From 2c7929c915bf051de9eb1d3bcb463444a3a4e091 Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:55:52 +0100
Subject: [PATCH] test: add chromatic modes

---
 apps/nextjs/.storybook/chromatic.ts        | 21 ++++++++++++++++++---
 apps/nextjs/.storybook/preview.tsx         |  2 --
 apps/nextjs/src/app/faqs/index.stories.tsx |  4 ++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
index d5f4c6c31..a0077d390 100644
--- a/apps/nextjs/.storybook/chromatic.ts
+++ b/apps/nextjs/.storybook/chromatic.ts
@@ -1,10 +1,25 @@
 import "@storybook/csf";
 
+const defaultMode = { "1200px": { viewport: 1200 } } as const;
+// TODO: look into using named viewport
+const mobileMode = { mobile: { viewport: 375 } };
+const desktopMode = { desktop: { viewport: 1200 } };
+
+export const CHROMATIC_MOBILE_ONLY = {
+  chromatic: { modes: mobileMode },
+};
+export const CHROMATIC_DESKTOP_ONLY = {
+  chromatic: { modes: desktopMode },
+};
+
 export const CHROMATIC_ALL_VIEWPORTS = {
-  chromatic: { viewports: [375, 1200] },
+  chromatic: { modes: { ...mobileMode, ...desktopMode } },
+};
+// NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
+//       This option allows us to add a mobile mode without discaring the current snapshot
+export const CHROMATIC_ALL_VIEWPORTS_COMPAT = {
+  chromatic: { modes: { ...mobileMode, ...defaultMode } },
 };
-export const CHROMATIC_MOBILE_ONLY = { chromatic: { viewports: [375] } };
-export const CHROMATIC_DESKTOP_ONLY = { chromatic: { viewports: [1200] } };
 
 declare module "@storybook/csf" {
   interface Parameters {
diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
index f0b9471c5..99b2ad60e 100644
--- a/apps/nextjs/.storybook/preview.tsx
+++ b/apps/nextjs/.storybook/preview.tsx
@@ -15,7 +15,6 @@ import { DialogProvider } from "../src/components/AppComponents/DialogContext";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
-import { CHROMATIC_DESKTOP_ONLY } from "./chromatic";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -29,7 +28,6 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    ...CHROMATIC_DESKTOP_ONLY,
   },
   loaders: [mswLoader],
 };
diff --git a/apps/nextjs/src/app/faqs/index.stories.tsx b/apps/nextjs/src/app/faqs/index.stories.tsx
index 7eef2c06a..3b680d677 100644
--- a/apps/nextjs/src/app/faqs/index.stories.tsx
+++ b/apps/nextjs/src/app/faqs/index.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FAQPageContent } from ".";
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;