e2e test: data explorer test cleanup (#8346)

### Summary

Preparing for upcoming work in the Data Explorer workstream by cleaning
up some of the existing tests and POM. No functional changes were made.


### QA Notes

@:data-explorer @:web @:win

Author: midleman

test/e2e/fixtures/keybindings.json

@@ -57,8 +57,13 @@
     {
         "key": "cmd+j c",
         "command": "workbench.action.togglePanel"
-    }, {
+    },
+    {
         "key": "cmd+j n",
         "command": "workbench.action.positronNotebookLayout" // View: Notebook Layout
+    },
+    {
+        "key": "cmd+b c",
+        "command": "workbench.action.closeSidebar" // View: Close Primary Side Bar
     }
 ]

test/e2e/infra/workbench.ts

@@ -105,7 +105,7 @@ export class Workbench {
 		this.sessions = new Sessions(code, this.quickaccess, this.quickInput, this.console);
 		this.notebooks = new Notebooks(code, this.quickInput, this.quickaccess);
 		this.welcome = new Welcome(code);
-		this.clipboard = new Clipboard(code);
+		this.clipboard = new Clipboard(code, this.hotKeys);
 		this.terminal = new Terminal(code, this.quickaccess, this.clipboard, this.popups);
 		this.viewer = new Viewer(code);
 		this.editor = new Editor(code);

test/e2e/pages/clipboard.ts

@@ -3,11 +3,21 @@
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { expect } from '@playwright/test';
 import { Code } from '../infra/code';
+import { HotKeys } from './hotKeys.js';
 
 export class Clipboard {
 
-	constructor(private code: Code) { }
+	constructor(private code: Code, private hotKeys: HotKeys) { }
+
+	async copy(): Promise<void> {
+		await this.hotKeys.copy();
+	}
+
+	async paste(): Promise<void> {
+		await this.hotKeys.paste();
+	}
 
 	async getClipboardText(): Promise<string | null> {
 		// Grant permissions to read from clipboard
@@ -25,6 +35,13 @@ export class Clipboard {
 		return clipboardText;
 	}
 
+	async expectClipboardTextToBe(expectedText: string): Promise<void> {
+		await expect(async () => {
+			const clipboardText = await this.getClipboardText();
+			expect(clipboardText).toBe(expectedText);
+		}).toPass({ timeout: 20000 });
+	}
+
 	async setClipboardText(text: string): Promise<void> {
 		// Grant permissions to write to clipboard
 		await this.code.driver.context.grantPermissions(['clipboard-write']);

test/e2e/pages/dataExplorer.ts

@@ -12,7 +12,6 @@ const COLUMN_HEADERS = '.data-explorer-panel .right-column .data-grid-column-hea
 const HEADER_TITLES = '.data-grid-column-header .title-description .title';
 const DATA_GRID_ROWS = '.data-explorer-panel .right-column .data-grid-rows';
 const DATA_GRID_ROW = '.data-grid-row';
-const CLOSE_DATA_EXPLORER = '.tab .codicon-close';
 const IDLE_STATUS = '.status-bar-indicator .icon.idle';
 const SCROLLBAR_LOWER_RIGHT_CORNER = '.data-grid-scrollbar-corner';
 const DATA_GRID_TOP_LEFT = '.data-grid-corner-top-left';
@@ -99,10 +98,6 @@ export class DataExplorer {
 		return tableData;
 	}
 
-	async closeDataExplorer() {
-		await this.code.driver.page.locator(CLOSE_DATA_EXPLORER).first().click();
-	}
-
 	async clickLowerRightCorner() {
 		await this.code.driver.page.locator(SCROLLBAR_LOWER_RIGHT_CORNER).click();
 	}
@@ -132,18 +127,56 @@ export class DataExplorer {
 		});
 	}
 
-	async getDataExplorerStatusBarText(): Promise<String> {
-		await expect(this.code.driver.page.locator(STATUS_BAR)).toHaveText(/Showing/, { timeout: 60000 });
-		return (await this.code.driver.page.locator(STATUS_BAR).textContent()) ?? '';
+	async expectLastCellContentToBe(columnName: string, expectedContent: string, rowAtIndex = -1): Promise<void> {
+		await test.step(`Verify last cell content: ${expectedContent}`, async () => {
+			await expect(async () => {
+				const tableData = await this.getDataExplorerTableData();
+				const lastRow = tableData.at(rowAtIndex);
+				const lastHour = lastRow![columnName];
+				expect(lastHour).toBe(expectedContent);
+			}, 'Verify last hour cell content').toPass();
+		});
+	}
+
+	async expectStatusBarToHaveText(expectedText: string, timeout = 60000): Promise<void> {
+		await test.step(`Expect status bar text: ${expectedText}`, async () => {
+			await expect(this.code.driver.page.locator(STATUS_BAR)).toHaveText(expectedText, { timeout });
+		});
 	}
 
+
 	async selectColumnMenuItem(columnIndex: number, menuItem: string) {
 		await test.step(`Sort column ${columnIndex} by: ${menuItem}`, async () => {
 			await this.code.driver.page.locator(`.data-grid-column-header:nth-child(${columnIndex}) .sort-button`).click();
-			await this.code.driver.page.locator(`.positron-modal-overlay div.title:has-text("${menuItem}")`).click();
+			await this.code.driver.page.locator(`.positron-modal-overlay div.title:has-text('${menuItem}')`).click();
 		});
 	}
 
+	async expectActionBarToHaveButton(buttonName: string, isVisible: boolean = true) {
+		await test.step(`Expect action bar to have button: ${buttonName}`, async () => {
+			const button = this.code.driver.page.getByRole('button', { name: buttonName });
+			if (isVisible) {
+				await expect(button).toBeVisible();
+			} else {
+				await expect(button).not.toBeVisible();
+			}
+		});
+	}
+
+	async verifyCanOpenAsPlaintext(searchString: string | RegExp) {
+		await this.workbench.editorActionBar.clickButton('Open as Plain Text File');
+
+		// Check if the 'Open Anyway' button is visible. This is needed on web only as it warns
+		// that the file is large and may take a while to open. This is due to a vs code behavior and file size limit.
+		const openAnyway = this.code.driver.page.getByText('Open Anyway');
+
+		if (await openAnyway.waitFor({ state: 'visible', timeout: 5000 }).then(() => true).catch(() => false)) {
+			await openAnyway.click();
+		}
+
+		await expect(this.code.driver.page.getByText(searchString, { exact: true })).toBeVisible();
+	}
+
 	async home(): Promise<void> {
 		await this.code.driver.page.keyboard.press('Home');
 	}
@@ -180,10 +213,8 @@ export class DataExplorer {
 	async getColumnProfileInfo(rowNumber: number): Promise<ColumnProfile> {
 
 		const expandCollapseLocator = this.code.driver.page.locator(EXPAND_COLLAPSE_PROFILE(rowNumber));
-
 		await expandCollapseLocator.scrollIntoViewIfNeeded();
 		await expandCollapseLocator.click();
-
 		await expect(expandCollapseLocator.locator(EXPAND_COLLASPE_ICON)).toHaveClass(/codicon-chevron-down/);
 
 		const profileData: { [key: string]: string } = {};
@@ -204,7 +235,7 @@ export class DataExplorer {
 			}
 		}
 
-		// some rects have "count" class, some have "bin-count" class, some have "count other" class
+		// some rects have 'count' class, some have 'bin-count' class, some have 'count other' class
 		const rects = await this.code.driver.page.locator('.column-profile-sparkline').locator('[class*="count"]').all();
 		const profileSparklineHeights: string[] = [];
 		for (let i = 0; i < rects.length; i++) {
@@ -254,7 +285,7 @@ export class DataExplorer {
 		});
 	}
 
-	async verifyTableData(expectedData, timeout = 60000) {
+	async verifyTableData(expectedData: Array<{ [key: string]: string }>, timeout = 60000) {
 		await test.step('Verify data explorer data', async () => {
 			await expect(async () => {
 				const tableData = await this.getDataExplorerTableData();
@@ -302,8 +333,8 @@ export class DataExplorer {
 		});
 	}
 
-	async verifyProfileData(expectedValues: Array<{ column: number; expected: { [key: string]: string } }>) {
-		await test.step('Verify profile data', async () => {
+	async verifyColumnData(expectedValues: Array<{ column: number; expected: { [key: string]: string } }>) {
+		await test.step('Verify column data', async () => {
 			for (const { column, expected } of expectedValues) {
 				const profileInfo = await this.getColumnProfileInfo(column);
 				expect(profileInfo.profileData).toStrictEqual(expected);
@@ -324,6 +355,15 @@ export class DataExplorer {
 		});
 	}
 
+	async verifySparklineHeights(expectedHeights: Array<{ column: number; expected: string[] }>) {
+		await test.step('Verify sparkline heights', async () => {
+			for (const { column, expected } of expectedHeights) {
+				const colProfileInfo = await this.getColumnProfileInfo(column);
+				expect(colProfileInfo.profileSparklineHeights).toStrictEqual(expected);
+			}
+		});
+	}
+
 	async verifyNullPercentHoverDialog(): Promise<void> {
 		await test.step('Verify null percent hover dialog', async () => {
 			const firstNullPercent = this.code.driver.page.locator('.column-null-percent').nth(0);
@@ -347,4 +387,11 @@ export class DataExplorer {
 			expect(missing).toEqual([]); // Will throw if any are missing
 		});
 	}
+
+	async clickCell(rowIndex: number, columnIndex: number) {
+		await test.step(`Click cell at row ${rowIndex}, column ${columnIndex}`, async () => {
+			const cellLocator = this.code.driver.page.locator(`${DATA_GRID_ROWS} ${DATA_GRID_ROW}:nth-child(${rowIndex + 1}) > div:nth-child(${columnIndex + 1})`);
+			await cellLocator.click();
+		});
+	}
 }

test/e2e/pages/hotKeys.ts

@@ -118,7 +118,7 @@ export class HotKeys {
 		await this.pressHotKeys('Cmd+J B', 'Show secondary sidebar');
 	}
 
-	public async hideSecondarySidebar() {
+	public async closeSecondarySidebar() {
 		await this.pressHotKeys('Cmd+J A', 'Hide secondary sidebar');
 	}
 
@@ -138,6 +138,10 @@ export class HotKeys {
 		await this.pressHotKeys('Cmd+J N', 'Notebook layout');
 	}
 
+	public async closePrimarySidebar() {
+		await this.pressHotKeys('Cmd+B C', 'Close primary sidebar');
+	}
+
 	// ----------------------
 	// --- Workspace Actions ---
 	// ----------------------

test/e2e/pages/popups.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 
-import { expect, Locator } from '@playwright/test';
+import test, { expect, Locator } from '@playwright/test';
 import { Code } from '../infra/code';
 
 const POSITRON_MODAL_DIALOG_BOX = '.positron-modal-dialog-box';
@@ -159,6 +159,12 @@ export class Popups {
 		await expect(this.code.driver.page.locator(POSITRON_MODAL_DIALOG_BOX)).toBeVisible({ timeout: 30000 });
 	}
 
+	async verifyModalDialogBoxContainsText(text: string | RegExp) {
+		await test.step(`Verify modal dialog box contains text: ${text}`, async () => {
+			await expect(this.code.driver.page.locator('.dialog-box .message')).toHaveText(text, { timeout: 10000 });
+		});
+	}
+
 	async waitForModalDialogBoxToDisappear() {
 		await expect(this.code.driver.page.locator(POSITRON_MODAL_DIALOG_BOX)).not.toBeVisible({ timeout: 30000 });
 	}

test/e2e/tests/autocomplete/autocomplete.test.ts

@@ -22,7 +22,7 @@ test.describe('Autocomplete', {
 		const { editors, console } = app.workbench;
 
 		const [pySession1, pySession2, pyAltSession] = await sessions.start(['python', 'python', 'pythonAlt']);
-		await hotKeys.hideSecondarySidebar();
+		await hotKeys.closeSecondarySidebar();
 
 		// Session 1 - trigger and verify console autocomplete
 		await sessions.select(pySession1.id);
@@ -59,7 +59,7 @@ test.describe('Autocomplete', {
 		const { console } = app.workbench;
 
 		const [pySession, pyAltSession] = await sessions.start(['python', 'pythonAlt']);
-		await hotKeys.hideSecondarySidebar();
+		await hotKeys.closeSecondarySidebar();
 
 		// Session 1 - verify console autocomplete
 		await sessions.select(pySession.id);
@@ -94,7 +94,7 @@ test.describe('Autocomplete', {
 		const { editors, console } = app.workbench;
 
 		const [rSession1, rSession2, rSessionAlt] = await sessions.start(['r', 'r', 'rAlt']);
-		await hotKeys.hideSecondarySidebar();
+		await hotKeys.closeSecondarySidebar();
 
 		// Session 1 - verify console autocomplete
 		await sessions.select(rSession1.id);
@@ -133,7 +133,7 @@ test.describe('Autocomplete', {
 		const { console } = app.workbench;
 
 		const [rSession, rSessionAlt] = await sessions.start(['r', 'rAlt']);
-		await hotKeys.hideSecondarySidebar();
+		await hotKeys.closeSecondarySidebar();
 
 		// Session 1 - verify console autocomplete
 		await sessions.select(rSession.id);

test/e2e/tests/connections/connections-postgres.test.ts

@@ -27,7 +27,7 @@ test.describe('Postgres DB Connection', {
 	tag: [tags.WEB, tags.CONNECTIONS]
 }, () => {
 
-	test('Python - Can establish a Postgres connection to a docker container', async function ({ app, python }) {
+	test('Python - Can establish a Postgres connection to a docker container', async function ({ app, hotKeys, python }) {
 
 		await app.workbench.connections.openConnectionPane();
 
@@ -65,7 +65,7 @@ test.describe('Postgres DB Connection', {
 			}).toPass({ timeout: 60000 });
 		});
 
-		await app.workbench.dataExplorer.closeDataExplorer();
+		await hotKeys.closeAllEditors();
 		await app.workbench.layouts.enterLayout('stacked');
 
 		await test.step('Remove connection', async () => {
@@ -83,7 +83,7 @@ test.describe('Postgres DB Connection', {
 
 	test('R - Can establish a Postgres connection to a docker container', {
 		tag: [tags.ARK]
-	}, async function ({ app, r }) {
+	}, async function ({ app, hotKeys, r }) {
 
 		await app.workbench.connections.openConnectionPane();
 
@@ -128,8 +128,7 @@ test.describe('Postgres DB Connection', {
 			}).toPass({ timeout: 60000 });
 		});
 
-		await app.workbench.dataExplorer.closeDataExplorer();
-		await app.workbench.layouts.enterLayout('stacked');
+		await hotKeys.closeAllEditors();
 
 		await test.step('Remove connection', async () => {
 			await app.workbench.connections.openConnectionPane();