Merge pull request #51 from chromaui/ghengeveld/ap-3567-snapshot-imag…

…e-doesnt-change-when-you-switch-stories

Update `selectedTest` whenever tests change (e.g. when switching stories)

src/components/BrowserSelector.tsx

@@ -11,10 +11,10 @@ import { StatusDot, StatusDotWrapper } from "./StatusDot";
 import { TooltipMenu } from "./TooltipMenu";
 
 const browserIcons = {
-  [Browser.Chrome]: <ChromeIcon alt="Chrome" />,
-  [Browser.Firefox]: <FirefoxIcon alt="Firefox" />,
-  [Browser.Safari]: <SafariIcon alt="Safari" />,
-  [Browser.Edge]: <EdgeIcon alt="Edge" />,
+  [Browser.Chrome]: <ChromeIcon alt="Chrome" aria-label="Chrome" />,
+  [Browser.Firefox]: <FirefoxIcon alt="Firefox" aria-label="Firefox" />,
+  [Browser.Safari]: <SafariIcon alt="Safari" aria-label="Safari" />,
+  [Browser.Edge]: <EdgeIcon alt="Edge" aria-label="Edge" />,
 } as const;
 
 type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;

src/screens/VisualTests/SnapshotComparison.stories.tsx

@@ -1,7 +1,11 @@
 import { action } from "@storybook/addon-actions";
+import { useState } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
+import { screen, userEvent, within } from "@storybook/testing-library";
+import React, { ComponentProps } from "react";
 
 import { Browser, ComparisonResult, TestStatus } from "../../gql/graphql";
+import { playAll } from "../../utils/playAll";
 import { makeTest, makeTests } from "../../utils/storyData";
 import { SnapshotComparison } from "./SnapshotComparison";
 
@@ -89,3 +93,55 @@ export const WithSingleTestShowingBaseline: Story = {
     baselineImageVisible: true,
   },
 };
+
+export const SwitchingViewport: Story = {
+  args: {
+    tests: makeTests({
+      browsers: [Browser.Chrome, Browser.Safari],
+      viewports: [
+        { status: TestStatus.Passed, viewport: 320 },
+        { status: TestStatus.Passed, viewport: 600 },
+        { status: TestStatus.Passed, viewport: 1200 },
+      ],
+    }).map((test) => ({
+      ...test,
+      comparisons: test.comparisons.map((comparison) => ({
+        ...comparison,
+        headCapture: {
+          ...comparison.headCapture,
+          captureImage: {
+            imageUrl: `/ProjectItem-${comparison.browser.name}-${comparison.viewport.width}.png`,
+            imageWidth: comparison.viewport.width,
+          },
+        },
+      })),
+    })),
+  },
+  play: playAll(async ({ canvasElement, canvasIndex }) => {
+    const canvas = within(canvasElement);
+    const menu = await canvas.findByRole("button", { name: "320px" });
+    await userEvent.click(menu);
+    const items = await screen.findAllByText("1200px");
+    await userEvent.click(items[canvasIndex]);
+  }),
+};
+
+export const SwitchingBrowser: Story = {
+  args: SwitchingViewport.args,
+  play: playAll(async ({ canvasElement, canvasIndex }) => {
+    const canvas = within(canvasElement);
+    const menu = await canvas.findByRole("button", { name: "Chrome" });
+    await userEvent.click(menu);
+    const items = await screen.findAllByText("Safari");
+    await userEvent.click(items[canvasIndex]);
+  }),
+};
+
+export const SwitchingTests: Story = {
+  args: SwitchingViewport.args,
+  render: function RenderSwitchingTests({ ...props }: ComponentProps<typeof SnapshotComparison>) {
+    const [tests, setTests] = React.useState(null);
+    if (!tests) setTimeout(() => setTests([makeTest({})]), 0);
+    return <SnapshotComparison {...props} tests={tests || props.tests} />;
+  },
+};

src/utils/playAll.ts

@@ -10,7 +10,9 @@ export function playAll<Story extends StoryObj>(
     await Promise.all(
       sequence.flatMap((storyOrPlay) =>
         typeof storyOrPlay === "function"
-          ? canvasElements.map((canvasElement) => storyOrPlay({ ...context, canvasElement }))
+          ? canvasElements.map((canvasElement, canvasIndex) =>
+              storyOrPlay({ ...context, canvasElement, canvasIndex })
+            )
           : storyOrPlay?.play?.(context)
       )
     );

src/utils/useTests.ts

@@ -10,31 +10,23 @@ type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
  * for the same story.
  */
 export function useTests(tests: StoryTestFieldsFragment[]) {
-  const [selectedTest, onSelectTest] = useState<StoryTestFieldsFragment>(tests[0]);
-  const [selectedBrowserId, onSelectBrowserId] = useState<BrowserInfo["id"]>(
-    selectedTest.comparisons[0].browser.id
+  const [selectedBrowserId, onSelectBrowserId] = useState<BrowserData["id"]>(
+    tests[0].comparisons[0].browser.id
   );
-  const selectedComparison = selectedTest.comparisons.find(
-    (comparison) => comparison.browser.id === selectedBrowserId
+  const [selectedViewportId, onSelectViewportId] = useState<ViewportData["id"]>(
+    tests[0].comparisons[0].viewport.id
   );
-  if (!selectedComparison) {
-    throw new Error(`No comparison found with browser id ${selectedBrowserId}`);
-  }
 
-  const onSelectViewport = useCallback(
-    (viewport: ViewportData) => {
-      const newSelectedTest = tests.find(
-        ({ parameters }) => parameters.viewport.id === viewport.id
-      );
-      if (!newSelectedTest) throw new Error(`No test found with viewport ${viewport.id}`);
-      onSelectTest(newSelectedTest);
-    },
-    [tests]
-  );
-  const onSelectBrowser = useCallback(
-    (browser: BrowserData) => onSelectBrowserId(browser.id),
-    [onSelectBrowserId]
-  );
+  const onSelectBrowser = useCallback(({ id }: BrowserData) => onSelectBrowserId(id), []);
+  const onSelectViewport = useCallback(({ id }: ViewportData) => onSelectViewportId(id), []);
+
+  const selectedTest =
+    tests.find(({ parameters }) => parameters.viewport.id === selectedViewportId) || tests[0];
+
+  const selectedComparison =
+    selectedTest.comparisons.find(({ browser }) => browser.id === selectedBrowserId) ||
+    selectedTest.comparisons[0];
+
   return {
     selectedTest,
     selectedComparison,