test: create chromaticParams helper with wide viewport

oaknational · Dec 9, 2024 · 887c1b8 · 887c1b8
1 parent d787b53
commit 887c1b8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 25 deletions.
diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
@@ -1,27 +1,29 @@
 import "@storybook/csf";
 
-const defaultMode = { "1200px": { viewport: 1200 } } as const;
-const mobileMode = { mobile: { viewport: 375 } };
-const desktopMode = { desktop: { viewport: 1200 } };
+type ChromaticModes = "legacy" | "mobile" | "desktop" | "desktop-wide";
 
-export const CHROMATIC_MOBILE_ONLY = {
-  chromatic: { modes: mobileMode },
-};
-export const CHROMATIC_DESKTOP_ONLY = {
-  chromatic: { modes: desktopMode },
-};
-export const CHROMATIC_ALL_VIEWPORTS = {
-  chromatic: { modes: { ...mobileMode, ...desktopMode } },
-};
-
-// NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
-//       These options allow us to reuse the existing desktop snapshot until we're ready to migrate
-export const CHROMATIC_DESKTOP_COMPAT = {
-  chromatic: { modes: defaultMode },
-};
-export const CHROMATIC_ALL_VIEWPORTS_COMPAT = {
-  chromatic: { modes: { ...mobileMode, ...defaultMode } },
-};
+export function chromaticParams(modes: ChromaticModes[]) {
+  return {
+    chromatic: {
+      modes: {
+        ...(modes.includes("mobile") && {
+          mobile: { viewport: 375 },
+        }),
+        ...(modes.includes("desktop") && {
+          desktop: { viewport: 1200 },
+        }),
+        ...(modes.includes("desktop-wide") && {
+          "wide desktop": { viewport: 1400 },
+        }),
+        // NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
+        //       This option allows us to reuse the existing desktop snapshot until we're ready to migrate
+        ...(modes.includes("legacy") && {
+          "1200px": { viewport: 1200 as const },
+        }),
+      },
+    },
+  };
+}
 
 declare module "@storybook/csf" {
   interface Parameters {

diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx
@@ -4,7 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
-import { CHROMATIC_MOBILE_ONLY } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import { MobileExportButtons } from "./MobileExportButtons";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -41,7 +41,7 @@ const meta: Meta<typeof MobileExportButtons> = {
     viewport: {
       defaultViewport: "mobile1",
     },
-    ...CHROMATIC_MOBILE_ONLY,
+    ...chromaticParams(["mobile"]),
   },
   args: {
     closeMobileLessonPullOut: () => {},

diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
@@ -4,7 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
-import { CHROMATIC_DESKTOP_COMPAT } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import ExportButtons from "./";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -44,7 +44,7 @@ const meta: Meta<typeof ExportButtons> = {
     documentContainerRef: { current: null },
   },
   parameters: {
-    ...CHROMATIC_DESKTOP_COMPAT,
+    ...chromaticParams(["compat"]),
   },
 };
 

diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
+import { chromaticParams } from "../../../../.storybook/chromatic";
 import { Header } from "./header";
 
 const DemoDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -23,6 +24,7 @@ const meta: Meta<typeof Header> = {
   decorators: [DemoDecorator],
   parameters: {
     layout: "fullscreen",
+    ...chromaticParams(["legacy", "desktop"]),
     docs: {
       story: {
         height: "150px",