From a5550af2a0c9e43e92b235c9b0b23587dd2bd119 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 29 May 2025 22:06:53 -0600 Subject: [PATCH] update tests --- .github/workflows/web-e2e-tests.yml | 4 +- web/package.json | 2 +- .../line-chart-axis-tests.spec.ts | 44 +++++++++++++++---- .../metric-chart-updates.spec.ts | 3 ++ .../components/ui/segmented/AppSegmented.tsx | 4 +- .../Common/CollapseDelete.tsx | 7 ++- .../SelectAxisItemAvailableContainer.tsx | 4 +- 7 files changed, 48 insertions(+), 20 deletions(-) diff --git a/.github/workflows/web-e2e-tests.yml b/.github/workflows/web-e2e-tests.yml index fce60484c..ef979ac6d 100644 --- a/.github/workflows/web-e2e-tests.yml +++ b/.github/workflows/web-e2e-tests.yml @@ -31,7 +31,7 @@ jobs: - name: Setup Node.js (Blacksmith Cache) uses: useblacksmith/setup-node@v5 with: - node-version: "20" + node-version: "22" - name: Mount NPM Cache (Sticky Disk) uses: useblacksmith/stickydisk@v1 @@ -123,7 +123,7 @@ jobs: echo "Checking make script content for 'start-fast':" cat web/Makefile | grep -A 10 "start-fast" - - name: Run Frontend E2E Tests with xvfb + - name: Run Frontend E2E Tests working-directory: ./web run: | echo "Running web E2E tests..." diff --git a/web/package.json b/web/package.json index c81e7982a..81a4eecc7 100644 --- a/web/package.json +++ b/web/package.json @@ -104,7 +104,7 @@ "use-context-selector": "^2.0.0", "utility-types": "^3.11.0", "virtua": "^0.41.2", - "zod": "^3.25.39", + "zod": "^3.25.41", "zustand": "^5.0.5" }, "devDependencies": { diff --git a/web/playwright-tests/line-chart-axis-tests.spec.ts b/web/playwright-tests/line-chart-axis-tests.spec.ts index cbaa50d7e..67af6314a 100644 --- a/web/playwright-tests/line-chart-axis-tests.spec.ts +++ b/web/playwright-tests/line-chart-axis-tests.spec.ts @@ -36,7 +36,7 @@ test.describe await page.waitForLoadState('networkidle'); await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('load'); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('button', { name: 'Avg Revenue Per Customer' }).first().click(); await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).click(); await page.getByRole('textbox', { name: 'Avg Revenue Per Customer' }).fill('NATE RULEZ'); await page.getByRole('button', { name: 'Save' }).click(); @@ -61,10 +61,14 @@ test.describe await page.goto( 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + + await page.getByRole('button', { name: 'Avg Revenue Per Customer' }).first().click(); + + expect(page.getByTestId('segmented-trigger-line')).toHaveAttribute('data-state', 'active'); await page.getByTestId('segmented-trigger-dot-line').click(); + await page.waitForTimeout(100); await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(120); + await page.waitForTimeout(100); await page.waitForLoadState('networkidle'); await expect(page.getByTestId('segmented-trigger-dot-line')).toHaveAttribute( 'data-state', @@ -83,10 +87,15 @@ test.describe 'data-state', 'active' ); - await page.waitForTimeout(100); + await page.waitForTimeout(200); await page.getByTestId('segmented-trigger-line').click(); + await page.waitForTimeout(100); + await expect(page.getByTestId('segmented-trigger-line')).toHaveAttribute( + 'data-state', + 'active' + ); await page.getByRole('button', { name: 'Save' }).click(); - await page.waitForTimeout(50); + await page.waitForTimeout(100); await page.waitForLoadState('networkidle'); await expect(page.getByTestId('segmented-trigger-line')).toHaveAttribute( 'data-state', @@ -98,7 +107,7 @@ test.describe await page.goto( 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' ); - await page.getByTestId('select-axis-drop-zone-yAxis').getByRole('button').nth(3).click(); + await page.getByRole('button', { name: 'Avg Revenue Per Customer' }).first().click(); await page.getByRole('switch').click(); await expect(page.getByRole('switch')).toBeVisible(); await expect(page.getByRole('switch')).toHaveAttribute('data-state', 'checked'); @@ -200,7 +209,9 @@ test.describe await page.reload(); await page.getByTestId('segmented-trigger-Styling').click(); - + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); await expect( page .locator('div') @@ -230,6 +241,12 @@ test.describe 'http://localhost:3000/app/metrics/635d9b06-afb1-5b05-8130-03c0b7a04bcb/chart?secondary_view=chart-edit' ); await page.getByTestId('segmented-trigger-Styling').click(); + await expect( + page + .locator('div') + .filter({ hasText: /^Dot on lines$/ }) + .getByRole('switch') + ).toHaveAttribute('data-state', 'unchecked'); await page.waitForTimeout(100); await page.waitForLoadState('networkidle'); await page.waitForLoadState('domcontentloaded'); @@ -240,9 +257,16 @@ test.describe .getByRole('switch') .click(); await page.getByRole('button', { name: 'Save' }).click(); - + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); await page.reload(); await page.getByTestId('segmented-trigger-Styling').click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); await expect( page .locator('div') @@ -252,6 +276,10 @@ test.describe await page.reload(); await page.getByTestId('segmented-trigger-Styling').click(); + await page.waitForTimeout(50); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); await page .locator('div') .filter({ hasText: /^Dot on lines$/ }) diff --git a/web/playwright-tests/metric-chart-updates.spec.ts b/web/playwright-tests/metric-chart-updates.spec.ts index 27935ec73..0c45c3db4 100644 --- a/web/playwright-tests/metric-chart-updates.spec.ts +++ b/web/playwright-tests/metric-chart-updates.spec.ts @@ -8,6 +8,9 @@ test.describe await page.getByRole('link', { name: 'Total Unique Products Sold' }).click(); await page.getByTestId('edit-chart-button').getByRole('button').click(); + await page.waitForLoadState('networkidle'); + await page.waitForLoadState('domcontentloaded'); + await page.waitForLoadState('load'); expect(page.getByTestId('metric-view-chart-content')).toBeVisible(); expect(page.getByTestId('select-chart-type-column')).toBeVisible(); diff --git a/web/src/components/ui/segmented/AppSegmented.tsx b/web/src/components/ui/segmented/AppSegmented.tsx index 53289701d..fae2ede82 100644 --- a/web/src/components/ui/segmented/AppSegmented.tsx +++ b/web/src/components/ui/segmented/AppSegmented.tsx @@ -157,9 +157,7 @@ export const AppSegmented: AppSegmentedComponent = React.memo( useEffect(() => { if (value !== undefined && value !== selectedValue) { - startTransition(() => { - setSelectedValue(value); - }); + setSelectedValue(value); } }, [value]); diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx index 87598e630..150b43f47 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx +++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx @@ -158,14 +158,13 @@ const DropdownIcon: React.FC<{ }); const onClickContainer = useMemoizedFn( - (event: React.MouseEvent | React.KeyboardEvent) => { + (event: React.MouseEvent | React.KeyboardEvent) => { event.stopPropagation(); } ); return ( - + ); }); DropdownIcon.displayName = 'DropdownIcon'; diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisItemAvailableContainer.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisItemAvailableContainer.tsx index ca1581055..4deb159a3 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisItemAvailableContainer.tsx +++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisItemAvailableContainer.tsx @@ -83,9 +83,9 @@ const ThreeDotMenu: React.FC<{ } return ( - + ); };