test: add responsive modes to chromatic (#427)

apps/nextjs/.storybook/chromatic.ts

@@ -0,0 +1,103 @@
+import "@storybook/csf";
+
+type ChromaticModes =
+  | "legacy"
+  | "mobile"
+  | "mobile-wide"
+  | "desktop"
+  | "desktop-wide";
+
+export function chromaticParams(modes: ChromaticModes[]) {
+  return {
+    chromatic: {
+      modes: {
+        ...(modes.includes("mobile") && {
+          mobile: { viewport: "mobile" },
+        }),
+        ...(modes.includes("mobile-wide") && {
+          mobile: { viewport: "mobile-wide" },
+        }),
+        ...(modes.includes("desktop") && {
+          desktop: { viewport: "desktop" },
+        }),
+        ...(modes.includes("desktop-wide") && {
+          "desktop-wide": { viewport: "desktopWide" },
+        }),
+        // 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 {
+    /**
+     * Parameters for chromatic
+     */
+    chromatic?: {
+      /**
+       * Delay capture for a fixed time (in milliseconds) to allow your story to get into
+       * the intended state
+       *
+       * @see [delaying snapshots chromatic documentation](https://www.chromatic.com/docs/delay)
+       */
+      delay?: number;
+      /**
+       * Override this behavior in instances where a single pixel change is not flagged by
+       * Chromatic but should be
+       *
+       * * @see [anti-aliasing chromatic documentation](https://www.chromatic.com/docs/threshold#anti-aliasing)
+       *
+       * @default false
+       */
+      diffIncludeAntiAliasing?: boolean;
+      /**
+       * The diffThreshold parameter allows you to fine tune the threshold for visual change
+       * between snapshots before they're flagged by Chromatic. Sometimes you need assurance
+       * to the sub-pixel and other times you want to skip visual noise generated by
+       * non-deterministic rendering such as anti-aliasing.
+       *
+       * 0 is the most accurate. 1 is the least accurate.
+       *
+       * @default 0.063
+       */
+      diffThreshold?: number;
+      /**
+       * You can omit stories entirely from Chromatic testing using the disable story parameter.
+       *
+       * @see [ignoring elements chromatic documentation](https://www.chromatic.com/docs/ignoring-elements)
+       */
+      disable?: boolean;
+      /**
+       * Modes
+       *
+       * @see [modes chromatic documentation](https://www.chromatic.com/docs/modes)
+       */
+      modes?: Record<
+        string,
+        {
+          viewport?: string | number;
+          theme?: "light" | "dark";
+          backgrounds?: { value: string };
+        }
+      > & {
+        "1200px"?: { viewport: 1200 };
+      };
+      /**
+       * Define one or more viewport sizes to capture. Note, units are considered in pixels
+       */
+      viewports?: number[];
+      /**
+       * To specify that Chromatic should pause the animation at the end instead of reseting
+       * them to their beginning state.
+       *
+       * @see [animations chromatic documentation](https://www.chromatic.com/docs/animations)
+       */
+      pauseAnimationAtEnd?: boolean;
+    };
+  }
+}

apps/nextjs/.storybook/preview.tsx

@@ -28,6 +28,26 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: { width: "375px", height: "800px" },
+        },
+        mobileWide: {
+          name: "Mobile Wide",
+          styles: { width: "430px", height: "930px" },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: { width: "1200px", height: "1000px" },
+        },
+        desktopWide: {
+          name: "Desktop Wide",
+          styles: { width: "1400px", height: "1000px" },
+        },
+      },
+    },
   },
   loaders: [mswLoader],
 };

apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx

@@ -4,6 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import { MobileExportButtons } from "./MobileExportButtons";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -40,6 +41,7 @@ const meta: Meta<typeof MobileExportButtons> = {
     viewport: {
       defaultViewport: "mobile1",
     },
+    ...chromaticParams(["mobile"]),
   },
   args: {
     closeMobileLessonPullOut: () => {},

apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx

@@ -4,6 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import ExportButtons from "./";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -42,6 +43,9 @@ const meta: Meta<typeof ExportButtons> = {
     sectionRefs: {},
     documentContainerRef: { current: null },
   },
+  parameters: {
+    ...chromaticParams(["legacy"]),
+  },
 };
 
 export default meta;