✅ #28 - test: update Chromatic stories

src/components/data/attributelist/attributelist.stories.tsx

@@ -30,13 +30,6 @@ export const AttributeListComponent: Story = {
   },
 };
 
-export const AttributeListOnMobile: Story = {
-  ...AttributeListComponent,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-  },
-};
-
 export const SelectedFieldOnly: Story = {
   ...AttributeListComponent,
   args: {

src/components/data/paginator/paginator.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 import React from "react";
 
+import { allModes } from "../../../../.storybook/modes";
 import { Page } from "../../page";
 import { Paginator } from "./paginator";
 
@@ -39,20 +40,26 @@ export const PaginatorComponent: Story = {
   },
 };
 
-export const PaginatorOnMobile = {
-  ...PaginatorComponent,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-  },
-};
-
 export const PaginatorComponentWithSpinner: Story = {
   ...PaginatorComponent,
   args: {
     ...PaginatorComponent.args,
     onPageChange: () => new Promise((resolve) => setTimeout(resolve, 1000)),
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        "light desktop": allModes["light desktop"],
+        "dark desktop": allModes["dark desktop"],
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
+    // Spinner not supported on mobile.
+    if (window?.matchMedia("(max-width: 767px)").matches) {
+      return;
+    }
+
     const canvas = within(canvasElement);
     const pageInput = canvas.getByRole("spinbutton");
     const previousButton = canvas.getByLabelText("Previous");

src/components/dropdown/dropdown.stories.tsx

@@ -98,13 +98,6 @@ export const DropdownComponent: Story = {
   },
 };
 
-export const DropdownOnMobile: Story = {
-  ...DropdownComponent,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-  },
-};
-
 export const ActivateOnHover: Story = {
   args: {
     activateOnHover: true,

src/components/navbar/navbar.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
 import React from "react";
 
+import { allModes } from "../../../.storybook/modes";
 import { Button, ButtonLink } from "../button";
 import { Outline } from "../icon";
 import { Page } from "../page";
@@ -51,4 +53,50 @@ export const NavbarComponent: Story = {
       </>
     ),
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        "light desktop": allModes["light desktop"],
+        "dark desktop": allModes["dark desktop"],
+      },
+    },
+  },
+};
+
+export const NavbarOnMobile: Story = {
+  ...NavbarComponent,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    chromatic: {
+      modes: {
+        "light mobile": allModes["light mobile"],
+        "dark mobile": allModes["dark mobile"],
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // Hamburger menu not supported on desktop.
+    if (window?.matchMedia("(min-width: 768px)").matches) {
+      return;
+    }
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+
+    // Click opens, escape closes.
+    await userEvent.click(button, { delay: 10 });
+    await expect(canvas.getByRole("dialog")).toBeVisible();
+    await userEvent.keyboard("{Escape}", { delay: 10 });
+    await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
+    await userEvent.click(button, { delay: 10 });
+    await expect(canvas.getByRole("dialog")).toBeVisible();
+
+    // Tab focuses items.
+    await userEvent.tab({ delay: 10 });
+    await userEvent.tab({ delay: 10 });
+    await userEvent.tab({ delay: 10 });
+
+    expect(canvas.getByRole("dialog")).toContainElement(
+      document.activeElement as HTMLElement,
+    );
+  },
 };

src/components/toolbar/toolbar.stories.tsx

@@ -55,13 +55,6 @@ export const ToolbarComponent: Story = {
   },
 };
 
-export const ToolbarOnMobile: Story = {
-  ...ToolbarComponent,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-  },
-};
-
 export const TransparentToolbar: Story = {
   ...ToolbarComponent,
   args: {