test: add e2e tests for rollup rows and aggregate columns

packages/iris-grid/src/IrisGrid.tsx

@@ -2319,6 +2319,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
         invertSearchColumns
       );
       this.setState({ searchFilter });
+      this.stopLoading();
     },
     SET_FILTER_DEBOUNCE
   );

tests/table.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Page } from '@playwright/test';
+import { test, expect, Page, Locator } from '@playwright/test';
 import { makeTableCommand, pasteInMonaco, TableTypes } from './utils';
 
 // Run tests serially since they all use the same table
@@ -31,6 +31,32 @@ async function waitForLoadingDone(page: Page) {
   ).toHaveCount(0);
 }
 
+async function dragComponent(
+  page: Page,
+  element: Locator,
+  offsetX: number,
+  offsetY: number,
+  stepNumber: number = 1000
+) {
+  // flipped the sign for offSetY since coordinates are from top-left of window
+  const [x, y] = await element
+    .boundingBox()
+    .then(pos =>
+      pos && pos.x && pos.y ? [pos.x + offsetX, pos.y - offsetY] : [0, 0]
+    );
+
+  await element.hover();
+  await page.mouse.down();
+  await page.mouse.move(x, y, { steps: stepNumber });
+
+  const dropTargetIndicator = page.locator('.is-dropping');
+  expect(dropTargetIndicator).toBeVisible();
+
+  await page.mouse.up();
+
+  await waitForLoadingDone(page);
+}
+
 async function changeCondFormatComparison(
   page: Page,
   condition: string,
@@ -506,6 +532,69 @@ test.describe('tests complex table operations', () => {
       await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
     });
   });
+
+  test('can rollup rows and aggregrate columns', async () => {
+    await page.locator('data-testid=menu-item-Rollup Rows').click();
+
+    await test.step('Rollup column', async () => {
+      const stringColumn = page.getByRole('button', { name: 'String' });
+      await dragComponent(page, stringColumn, -150, 100);
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Toggle constituents', async () => {
+      await page.getByText('Constituents').click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Toggle non-aggregated columns', async () => {
+      await page.getByText('Non-Aggregated Columns').click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Rollup another column', async () => {
+      const intColumn = page.getByRole('button', { name: 'Int', exact: true });
+      await dragComponent(page, intColumn, 150, 80);
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Aggregate columns', async () => {
+      await page.getByText('Constituents').click();
+      await page.getByText('Non-Aggregated Columns').click();
+
+      await page.getByTestId('btn-page-back').click();
+      await page.getByTestId('menu-item-Aggregate Columns').click();
+      await page.getByRole('button', { name: 'Add Aggregation' }).click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Edit aggregated columns', async () => {
+      await page
+        .getByRole('button', { name: 'Edit Columns', exact: true })
+        .click();
+      await page.getByText('Double', { exact: true }).click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Reset aggregated columns', async () => {
+      await page.getByRole('button', { name: 'Reset' }).click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('tests simple table operations', () => {