Add e2e test

Author: mattrunyon

tests/app.d/ui_table.py

@@ -173,3 +173,11 @@ def toggle_table_component():
     _stocks,
     aggregations=ui.TableAgg("sum"),
 )
+
+t_selection = ui.table(
+    _stocks,
+    on_selection_change=lambda d: print(
+        "Selection:", [[row["Sym"]["text"], row["Exchange"]["text"]] for row in d]
+    ),
+    always_fetch_columns=["Sym", "Exchange"],
+)

tests/ui_table.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { openPanel, gotoPage } from './utils';
+import { openPanel, gotoPage, clickGridRow } from './utils';
 
 const REACT_PANEL_VISIBLE = '.dh-react-panel:visible';
 
@@ -40,3 +40,21 @@ test('UI table responds to prop changes', async ({ page }) => {
   await locator.getByRole('button', { name: 'case' }).click();
   await expect(locator).toHaveScreenshot();
 });
+
+test('UI table on_selection_change', async ({ page }) => {
+  await gotoPage(page, '');
+  await openPanel(page, 't_selection', REACT_PANEL_VISIBLE);
+
+  const locator = page.locator(REACT_PANEL_VISIBLE);
+
+  await clickGridRow(locator, 3);
+  await expect(page.getByText("Selection: [['CAT', 'NYPE']]")).toBeVisible();
+
+  await clickGridRow(locator, 0, { modifiers: ['ControlOrMeta'] });
+  await expect(
+    page.getByText("Selection: [['FISH', 'TPET'], ['CAT', 'NYPE']]")
+  ).toBeVisible();
+
+  await page.keyboard.press('Escape');
+  await expect(page.getByText('Selection: []')).toBeVisible();
+});

tests/utils.ts

@@ -7,6 +7,9 @@ export const SELECTORS = {
   REACT_PANEL_OVERLAY: '.dh-react-panel-overlay',
 };
 
+const ROW_HEIGHT = 19;
+const COLUMN_HEADER_HEIGHT = 30;
+
 /**
  * Goes to a page and waits for the progress bar to disappear
  * @param page The page
@@ -168,3 +171,24 @@ export async function pasteInMonaco(
     await expect(locator.locator('textarea')).not.toBeEmpty();
   }
 }
+
+/**
+ * Clicks the specified row for the grid.
+ * Clicks in the first column of the row as column width is variable.
+ * Assumes there is only one level of column headers (i.e., no column groups).
+ * @param gridContainer The Playwright Locator of the grid container
+ * @param row The row index to click
+ * @param clickOptions The Locator click options such as modifies to use
+ */
+export async function clickGridRow(
+  gridContainer: Locator,
+  row: number,
+  clickOptions?: Parameters<Locator['click']>[0]
+): Promise<void> {
+  const x = 1;
+  const y = COLUMN_HEADER_HEIGHT + (row + 0.5) * ROW_HEIGHT;
+  await gridContainer.click({
+    ...clickOptions,
+    position: { x, y },
+  });
+}