update tests

.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..."

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": {

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$/ })

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();

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);
-        });
       }
     }, [value]);
 

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx

@@ -158,14 +158,13 @@ const DropdownIcon: React.FC<{
   });
 
   const onClickContainer = useMemoizedFn(
-    (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {
+    (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
       event.stopPropagation();
     }
   );
 
   return (
-    <button
+    <div
-      type="button"
       className="relative flex h-full cursor-pointer items-center space-x-0.5 pr-1"
       onClick={onClickContainer}
       onKeyUp={(e) => e.key === 'Enter' && onClickContainer(e)}
@@ -205,7 +204,7 @@ const DropdownIcon: React.FC<{
           </div>
         }
       />
-    </button>
+    </div>
   );
 });
 DropdownIcon.displayName = 'DropdownIcon';

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisItemAvailableContainer.tsx

@@ -83,9 +83,9 @@ const ThreeDotMenu: React.FC<{
   }
 
   return (
-    <button type="button" onClick={onClickButton} className="flex">
+    <div onClick={onClickButton} className="flex">
       <SelectAxisColumnPopover {...props}>{ButtonNode}</SelectAxisColumnPopover>
-    </button>
+    </div>
   );
 };