test: add e2e tests to context menu

packages/grid/src/Grid.tsx

@@ -1323,14 +1323,34 @@ class Grid extends PureComponent<GridProps, GridState> {
    * @param viewState New state properties to set.
    * @param forceUpdate Whether to force an update.
    */
-  setViewState(viewState: Partial<GridState>, forceUpdate = false): void {
+
+  setViewState(
+    viewState: Partial<GridState>,
+    forceUpdate = false,
+    eventType: WheelEvent | GridKeyboardEvent | null = null
+  ): void {
     if (!this.metrics) throw new Error('metrics not set');
 
     const { isStickyBottom, isStickyRight } = this.props;
     const { top, left } = viewState;
     const { lastTop, lastLeft } = this.metrics;
+    let isUserInputDown = false;
+
+    if (eventType instanceof WheelEvent) {
+      isUserInputDown = eventType.deltaY > 0;
+    } else if (
+      eventType instanceof KeyboardEvent ||
+      (eventType && 'nativeEvent' in eventType) // used to catch the case that a synthetic react keyboard event is passed
+    ) {
+      isUserInputDown =
+        eventType.key === 'ArrowDown' ||
+        eventType.key === 'End' ||
+        eventType.key === 'PageDown';
+    }
     if (top != null) {
-      this.setState({ isStuckToBottom: isStickyBottom && top >= lastTop });
+      this.setState({
+        isStuckToBottom: isStickyBottom && top >= lastTop && isUserInputDown,
+      });
     }
     if (left != null) {
       this.setState({ isStuckToRight: isStickyRight && left >= lastLeft });
@@ -1978,7 +1998,7 @@ class Grid extends PureComponent<GridProps, GridState> {
       }
     }
 
-    this.setViewState({ top, left, leftOffset, topOffset });
+    this.setViewState({ top, left, leftOffset, topOffset }, false, event);
 
     event.stopPropagation();
     event.preventDefault();

packages/grid/src/key-handlers/SelectionKeyHandler.ts

@@ -185,7 +185,7 @@ class SelectionKeyHandler extends KeyHandler {
 
         grid.moveCursorToPosition(left, cursorRow, isShiftKey, false);
 
-        grid.setViewState({ left });
+        grid.setViewState({ left }, false, event);
       } else if (autoSelectColumn && deltaRow !== 0) {
         const { lastTop } = grid.metrics;
         let { top } = grid.state;
@@ -194,9 +194,12 @@ class SelectionKeyHandler extends KeyHandler {
 
         grid.moveCursorToPosition(top, cursorColumn, isShiftKey, false);
 
-        grid.setViewState({ top });
+        grid.setViewState({ top }, false, event);
       } else {
+        const { lastLeft, lastTop } = grid.metrics;
+
         grid.moveCursor(deltaColumn, deltaRow, isShiftKey);
+        grid.setViewState({ left: lastLeft, top: lastTop }, false, event); // need to call setViewState again since moveCursor calls a series of functions that sets view state
       }
     }
     return true;
@@ -279,7 +282,7 @@ class SelectionKeyHandler extends KeyHandler {
       isShiftKey,
       false
     );
-    grid.setViewState({ top: viewportPosition });
+    grid.setViewState({ top: viewportPosition }, false, e);
 
     return true;
   }

packages/iris-grid/src/GotoRow.tsx

@@ -385,23 +385,23 @@ const GotoRow = forwardRef<GotoRowElement, GotoRowProps>(
 
                 <div>
                   <Button
+                    tooltip="Next match"
+                    icon={vsArrowUp}
                     kind="ghost"
                     disabled={gotoValue === ''}
                     onClick={() => {
                       onGotoValueSubmit(true);
                     }}
-                  >
-                    <FontAwesomeIcon icon={vsArrowUp} />
-                  </Button>
+                  />
                   <Button
+                    tooltip="Previous match"
+                    icon={vsArrowDown}
                     kind="ghost"
                     disabled={gotoValue === ''}
                     onClick={() => {
                       onGotoValueSubmit(false);
                     }}
-                  >
-                    <FontAwesomeIcon icon={vsArrowDown} />
-                  </Button>
+                  />
                 </div>
                 {gotoValueError && (
                   <div className="text-danger">{gotoValueError}</div>

tests/context-menu.spec.ts

@@ -1,4 +1,254 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
+import {
+  makeTableCommand,
+  pasteInMonaco,
+  TableTypes,
+  waitForLoadingDone,
+  generateVarName,
+} from './utils';
+
+test.describe.configure({ mode: 'serial' });
+
+async function openAdvancedFilters(page: Page) {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+  await page.getByRole('button', { name: 'Advanced Filters' }).click();
+}
+
+const tableName = generateVarName('t');
+test.beforeEach(async ({ page }) => {
+  await page.goto('');
+
+  const consoleInput = page.locator('.console-input');
+
+  const command = makeTableCommand(tableName, TableTypes.AllTypes);
+
+  await pasteInMonaco(consoleInput, command);
+  await page.keyboard.press('Enter');
+
+  // Wait for the panel to show
+  await expect(page.locator('.iris-grid-panel')).toHaveCount(1);
+
+  // Wait until it's done loading
+  await expect(page.locator('.iris-grid-panel .loading-spinner')).toHaveCount(
+    0
+  );
+
+  // Model is loaded, need to make sure table data is also loaded
+  await waitForLoadingDone(page);
+
+  const tableOperationsMenu = page.locator(
+    'data-testid=btn-iris-grid-settings-button-table'
+  );
+  await tableOperationsMenu.click();
+
+  // Wait for Table Options menu to show
+  await expect(page.locator('.table-sidebar')).toHaveCount(1);
+});
+
+test.afterEach(async ({ page }) => {
+  const consoleInput = page.locator('.console-input');
+  await consoleInput.click();
+
+  const command = `del ${tableName}`;
+  await pasteInMonaco(consoleInput, command);
+  await page.keyboard.press('Enter');
+});
+
+test('toggle column visibility', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Hide Column' }).click();
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Show All Columns' }).click();
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('quick filter and clear', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Quick Filters' }).click();
+  await page.keyboard.type('a999');
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Clear Column Filter' }).click();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .hover({ position: { x: 20, y: 20 } });
+  await page.mouse.wheel(0, -100);
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('advanced filters', async ({ page }) => {
+  await openAdvancedFilters(page);
+  await page.getByLabel('Sort String Ascending').click();
+
+  await page.getByRole('button', { name: 'Done' }).click();
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await openAdvancedFilters(page);
+  await page.getByLabel('Sort String Descending').click();
+
+  await page.getByRole('button', { name: 'Done' }).click();
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await openAdvancedFilters(page);
+  await page.getByPlaceholder('Enter value').click();
+  await page.keyboard.type('a999');
+
+  await page.getByRole('button', { name: 'Done' }).click();
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await openAdvancedFilters(page);
+  await page.getByLabel('Remove Filter').click();
+
+  await page.getByRole('button', { name: 'Done' }).click();
+  await waitForLoadingDone(page);
+
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await openAdvancedFilters(page);
+  await page.getByRole('button', { name: 'Clear', exact: true }).click();
+
+  await page.getByRole('button', { name: 'Done' }).click();
+  await waitForLoadingDone(page);
+
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await openAdvancedFilters(page);
+  await page.getByRole('button', { name: 'Select All' }).click();
+
+  await page.getByRole('button', { name: 'Done' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('sort by', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Sort By' }).hover();
+
+  await page.getByRole('button', { name: 'String Ascending' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Sort By' }).hover();
+  await page.getByRole('button', { name: 'String Descending' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Sort By' }).hover();
+  await page.getByRole('button', { name: 'Remove Sort' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('freeze column', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Freeze Column' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Unfreeze Column' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('reverse table', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 20 } });
+
+  await page.getByRole('button', { name: 'Reverse Table' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('filter by value', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 60 } });
+
+  await page.getByRole('button', { name: 'Filter by Value' }).hover();
+  await page.getByRole('button', { name: 'text is exactly' }).click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 60 } });
+  await page.getByRole('button', { name: 'Clear Column Filter' }).click();
+});
+
+test('go to', async ({ page }) => {
+  await page
+    .locator('.iris-grid .grid-wrapper')
+    .click({ button: 'right', position: { x: 20, y: 60 } });
+
+  await page.getByRole('button', { name: 'Go to' }).click();
+  await page.getByLabel('filter-type-select').selectOption('Equals');
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page.locator('[aria-label="Previous match"]').first().click();
+  await page.locator('[aria-label="Previous match"]').first().click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  await page.locator('[aria-label="Next match"]').first().click();
+
+  await waitForLoadingDone(page);
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
 
 test('open custom context menu with another custom context menu open', async ({
   page,
@@ -12,4 +262,6 @@ test('open custom context menu with another custom context menu open', async ({
     .getByText('Command History')
     .click({ button: 'right', force: true });
   await expect(page.getByText('Close', { exact: true })).toHaveCount(1);
+
+  await page.getByText('Console').click({ force: true });
 });