From eaa41033b52622ee5c6b0c06d37efe3df142b01d Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Tue, 7 Jan 2025 21:24:01 +0100
Subject: [PATCH 1/5] test: make chromatic modes explicit

---
 .../Chat/Chat/ChatModerationDisplay.stories.tsx             | 5 +++++
 .../components/AppComponents/Chat/chat-history.stories.tsx  | 3 +++
 .../AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx   | 4 ++++
 .../AppComponents/Chat/chat-lhs-header.stories.tsx          | 2 ++
 .../Chat/chat-list/demo-limit-message.stories.tsx           | 4 ++++
 .../Chat/chat-list/in-chat-download-buttons.stories.tsx     | 2 ++
 .../Chat/chat-message/ChatMessagePart.stories.tsx           | 5 +++++
 .../components/AppComponents/Chat/chat-panel.stories.tsx    | 2 ++
 .../AppComponents/Chat/chat-quick-buttons.stories.tsx       | 2 ++
 .../AppComponents/Chat/chat-right-hand-side-lesson.tsx      | 2 ++
 .../AppComponents/Chat/chat-start-form.stories.tsx          | 5 +++++
 .../components/AppComponents/Chat/clear-history.stories.tsx | 5 +++++
 .../AppComponents/Chat/drop-down-section/index.stories.tsx  | 2 ++
 .../export-buttons/LessonPlanProgressDropdown.stories.tsx   | 5 +++++
 .../AppComponents/Chat/export-buttons/index.stories.tsx     | 6 ++++--
 .../AppComponents/Chat/guidance-required.stories.tsx        | 5 +++++
 .../src/components/AppComponents/Chat/header.stories.tsx    | 1 +
 .../AppComponents/Chat/sidebar-actions.stories.tsx          | 3 +++
 .../src/components/DialogControl/DialogContents.stories.tsx | 4 ++++
 apps/nextjs/src/components/Footer.stories.tsx               | 5 +++++
 apps/nextjs/src/components/Header.stories.tsx               | 3 +++
 apps/nextjs/src/components/SignUpSignInLayout.stories.tsx   | 5 +++++
 22 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx
index 93fb1b5b8..f67d950bb 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx
@@ -1,6 +1,8 @@
 import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatModerationDisplay } from "./ChatModerationDisplay";
 
 const meta = {
@@ -14,6 +16,9 @@ const meta = {
       </div>
     ),
   ],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatModerationDisplay>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
index 58ae81767..e79b5b8d5 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
@@ -1,6 +1,8 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatHistory } from "./chat-history";
 
 const meta = {
@@ -8,6 +10,7 @@ const meta = {
   component: ChatHistory,
   parameters: {
     layout: "centered",
+    ...chromaticParams(["desktop"]),
   },
   tags: ["autodocs"],
   decorators: [
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx
index 7cff21bc8..fad8c17fe 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import type { ChatContextProps } from "@/components/ContextProviders/ChatProvider";
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import LessonPlanDisplay from "./chat-lessonPlanDisplay";
@@ -32,6 +33,9 @@ const meta = {
     sectionRefs: {},
     showLessonMobile: false,
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof LessonPlanDisplay>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.stories.tsx
index d18674a0b..b79c9c672 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import ChatLhsHeader from "./chat-lhs-header";
@@ -17,6 +18,7 @@ const meta = {
     isDemoUser: false,
   },
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       ailaStreamingStatus: "Idle",
     },
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx
index 626d41a72..055894d5f 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatModerationProvider } from "@/components/ContextProviders/ChatModerationContext";
+import { chromaticParams } from "@/storybook/chromatic";
 
 import { DemoLimitMessage } from "./demo-limit-message";
 
@@ -18,6 +19,9 @@ const meta = {
   args: {
     id: "test-chat-id",
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof DemoLimitMessage>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx
index 0a3a91d47..4a37523da 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import {
   DemoDecorator,
   demoParams,
@@ -16,6 +17,7 @@ const meta = {
   },
   decorators: [DemoDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     ...demoParams({ isDemoUser: true }),
   },
 } satisfies Meta<typeof InChatDownloadButtons>;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-message/ChatMessagePart.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-message/ChatMessagePart.stories.tsx
index a0bfcc600..263470ab6 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-message/ChatMessagePart.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-message/ChatMessagePart.stories.tsx
@@ -1,6 +1,8 @@
 import type { MessagePart } from "@oakai/aila/src/protocol/jsonPatchProtocol";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatMessagePart } from "./ChatMessagePart";
 
 const meta = {
@@ -10,6 +12,9 @@ const meta = {
   args: {
     inspect: false,
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatMessagePart>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-panel.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-panel.stories.tsx
index 384b1f794..fe1ad4bcf 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-panel.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-panel.stories.tsx
@@ -1,6 +1,7 @@
 import type { Message } from "@oakai/aila/src/core/chat";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 import { LessonPlanTrackingDecorator } from "@/storybook/decorators/LessonPlanTrackingDecorator";
 import { SidebarDecorator } from "@/storybook/decorators/SidebarDecorator";
@@ -22,6 +23,7 @@ const meta = {
     isDemoLocked: false,
   },
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       messages: [DummyMessage],
     },
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-quick-buttons.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-quick-buttons.stories.tsx
index 05adefe11..6a812b992 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-quick-buttons.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-quick-buttons.stories.tsx
@@ -1,6 +1,7 @@
 import type { Message } from "@oakai/aila/src/core/chat";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 import { LessonPlanTrackingDecorator } from "@/storybook/decorators/LessonPlanTrackingDecorator";
 
@@ -18,6 +19,7 @@ const meta = {
   tags: ["autodocs"],
   decorators: [ChatDecorator, LessonPlanTrackingDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       messages: [DummyMessage],
     },
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx
index 8a7fa2b7b..479284108 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx
@@ -24,6 +24,8 @@ const ChatRightHandSideLesson = ({
   demo,
 }: Readonly<ChatRightHandSideLessonProps>) => {
   const { messages } = useLessonChat();
+  console.log({ messages, showLessonMobile });
+  console.log(messages.length);
 
   const chatEndRef = useRef<HTMLDivElement>(null);
 
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-start-form.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-start-form.stories.tsx
index 22f08d579..896e7291a 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-start-form.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-start-form.stories.tsx
@@ -1,11 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatStartForm } from "./chat-start-form";
 
 const meta = {
   title: "Components/Chat Start/ChatStartForm",
   component: ChatStartForm,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatStartForm>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/clear-history.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/clear-history.stories.tsx
index de0d65c04..4a4906329 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/clear-history.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/clear-history.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ClearHistory } from "./clear-history";
 
 const meta = {
@@ -9,6 +11,9 @@ const meta = {
   argTypes: {
     isEnabled: { control: "boolean" },
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
   decorators: [
     (Story) => {
       return <Story />;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx
index 322496291..4b12c5189 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import DropDownSection from "./";
@@ -25,6 +26,7 @@ const meta = {
   },
   decorators: [ChatDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       id: "123",
       lastModeration: null,
diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.stories.tsx
index a9cf19bff..18e9b5a6e 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.stories.tsx
@@ -6,12 +6,17 @@ import type {
 } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { LessonPlanProgressDropdown } from "./LessonPlanProgressDropdown";
 
 const meta = {
   title: "Components/LessonPlan/LessonPlanProgressDropdown",
   component: LessonPlanProgressDropdown,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof LessonPlanProgressDropdown>;
 
 export default meta;
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
index fc59a9a17..02ce925d6 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 import {
   DemoDecorator,
@@ -8,7 +9,7 @@ import {
 
 import ExportButtons from "./";
 
-const meta: Meta<typeof ExportButtons> = {
+const meta = {
   title: "Components/LessonPlan/ExportButtons",
   component: ExportButtons,
   tags: ["autodocs"],
@@ -18,6 +19,7 @@ const meta: Meta<typeof ExportButtons> = {
     documentContainerRef: { current: null },
   },
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       id: "123",
       isStreaming: false,
@@ -25,7 +27,7 @@ const meta: Meta<typeof ExportButtons> = {
     },
     ...demoParams({ isDemoUser: false }),
   },
-};
+} satisfies Meta<typeof ExportButtons>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx
index e6df42f91..472f53eda 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx
@@ -1,12 +1,17 @@
 import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { GuidanceRequired } from "./guidance-required";
 
 const meta = {
   title: "Components/Chat/GuidanceRequired",
   component: GuidanceRequired,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof GuidanceRequired>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
index 7e39d249b..0f81a6050 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
@@ -21,6 +21,7 @@ const meta = {
       },
     },
     ...demoParams({ isDemoUser: false }),
+    ...chromaticParams(["desktop"]),
   },
 } satisfies Meta<typeof Header>;
 
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
index 772bee5bd..30670e8bb 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { within } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { SidebarActions } from "./sidebar-actions";
 
 const meta = {
@@ -8,6 +10,7 @@ const meta = {
   component: SidebarActions,
   parameters: {
     layout: "centered",
+    ...chromaticParams(["desktop"]),
   },
   tags: ["autodocs"],
 } satisfies Meta<typeof SidebarActions>;
diff --git a/apps/nextjs/src/components/DialogControl/DialogContents.stories.tsx b/apps/nextjs/src/components/DialogControl/DialogContents.stories.tsx
index b519c01e1..59e284451 100644
--- a/apps/nextjs/src/components/DialogControl/DialogContents.stories.tsx
+++ b/apps/nextjs/src/components/DialogControl/DialogContents.stories.tsx
@@ -4,6 +4,7 @@ import { http, HttpResponse } from "msw";
 import { SurveyQuestionType, SurveyType } from "posthog-js";
 import type { PostHog } from "posthog-js";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { AnalyticsDecorator } from "@/storybook/decorators/AnalyticsDecorator";
 import { DialogContentDecorator } from "@/storybook/decorators/DialogContentDecorator";
 
@@ -18,6 +19,9 @@ const meta = {
     lesson: {},
     chatId: "example-chat-id",
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof DialogContents>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/Footer.stories.tsx b/apps/nextjs/src/components/Footer.stories.tsx
index 688fc02b0..4dfb7e53b 100644
--- a/apps/nextjs/src/components/Footer.stories.tsx
+++ b/apps/nextjs/src/components/Footer.stories.tsx
@@ -1,11 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import Footer from "./Footer";
 
 const meta = {
   title: "Components/Layout/Footer",
   component: Footer,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof Footer>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/Header.stories.tsx b/apps/nextjs/src/components/Header.stories.tsx
index 300f608c9..898ff2d94 100644
--- a/apps/nextjs/src/components/Header.stories.tsx
+++ b/apps/nextjs/src/components/Header.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import Header from "./Header";
 
 const meta = {
@@ -14,6 +16,7 @@ const meta = {
         height: "80px",
       },
     },
+    ...chromaticParams(["desktop"]),
   },
   args: {
     menuOpen: false,
diff --git a/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx b/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx
index 567147602..59c704885 100644
--- a/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx
+++ b/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx
@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import SignUpSignInLayout from "./SignUpSignInLayout";
 
 const meta = {
   title: "Components/Layout/SignUpSignInLayout",
   component: SignUpSignInLayout,
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof SignUpSignInLayout>;
 
 export default meta;

From 39489b2f74508329a2a1d0128c2389e64cceeec7 Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Tue, 7 Jan 2025 21:28:48 +0100
Subject: [PATCH 2/5] test: remove default chromatic modes

---
 .../decorators/ChromaticValidationDecorator.tsx  | 16 ++++++++++++++++
 apps/nextjs/.storybook/preview.tsx               |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 apps/nextjs/.storybook/decorators/ChromaticValidationDecorator.tsx

diff --git a/apps/nextjs/.storybook/decorators/ChromaticValidationDecorator.tsx b/apps/nextjs/.storybook/decorators/ChromaticValidationDecorator.tsx
new file mode 100644
index 000000000..87f95fd9b
--- /dev/null
+++ b/apps/nextjs/.storybook/decorators/ChromaticValidationDecorator.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Decorator } from "@storybook/react";
+
+export const ChromaticValidationDecorator: Decorator = (
+  Story,
+  { parameters },
+) => {
+  if (
+    !parameters.chromatic?.modes ||
+    Object.keys(parameters.chromatic.modes).length === 0
+  ) {
+    throw new Error("No chromatic parameters set");
+  }
+  return <Story />;
+};
diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
index 0f552f1be..6638a42f6 100644
--- a/apps/nextjs/.storybook/preview.tsx
+++ b/apps/nextjs/.storybook/preview.tsx
@@ -19,7 +19,7 @@ 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 { chromaticParams } from "./chromatic";
+import { ChromaticValidationDecorator } from "./decorators/ChromaticValidationDecorator";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -59,7 +59,6 @@ const preview: Preview = {
         },
       },
     },
-    ...chromaticParams(["desktop"]),
   },
   loaders: [mswLoader],
 };
@@ -69,6 +68,7 @@ const preview: Preview = {
 export const decorators: Decorator[] = [
   RadixThemeDecorator,
   ClerkDecorator,
+  ChromaticValidationDecorator,
   (Story) => (
     <>
       <TRPCReactProvider>

From ccf3219ad2b0d320cd8e7339051a8a7ae1e910bf Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Tue, 7 Jan 2025 22:06:10 +0100
Subject: [PATCH 3/5] test: add missing chromatic modes

---
 .../AppComponents/Chat/chat-message/index.stories.tsx        | 4 ++++
 .../src/components/Onboarding/TermsContent.stories.tsx       | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
index e2901608f..022e5f8bb 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatModerationProvider } from "@/components/ContextProviders/ChatModerationContext";
+import { chromaticParams } from "@/storybook/chromatic";
 
 import { ChatMessage } from "./";
 
@@ -20,6 +21,9 @@ const meta = {
     persistedModerations: [],
     ailaStreamingStatus: "Idle",
   },
+  parameters: {
+    ...chromaticParams(["mobile", "desktop"]),
+  },
 } satisfies Meta<typeof ChatMessage>;
 
 export default meta;
diff --git a/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
index d3a282067..87b806da8 100644
--- a/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
+++ b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import TermsContent from "./TermsContent";
 
 const meta = {
   title: "Components/Onboarding/TermsContent",
   component: TermsContent,
+  parameters: {
+    ...chromaticParams(["mobile", "desktop"]),
+  },
 } satisfies Meta<typeof TermsContent>;
 
 export default meta;

From f1d10f8ecfe5fe5186b5b7403b621333e2a8667c Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Tue, 7 Jan 2025 22:09:20 +0100
Subject: [PATCH 4/5] test: add stories for mobile pullout

---
 .../chat-right-hand-side-lesson.stories.tsx   | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.stories.tsx

diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.stories.tsx
new file mode 100644
index 000000000..8325a0957
--- /dev/null
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.stories.tsx
@@ -0,0 +1,68 @@
+import type { Message } from "@oakai/aila/src/core/chat";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { chromaticParams } from "@/storybook/chromatic";
+import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
+import {
+  DemoDecorator,
+  demoParams,
+} from "@/storybook/decorators/DemoDecorator";
+
+import ChatRightHandSideLesson from "./chat-right-hand-side-lesson";
+
+const DummyUserMessage: Message = {
+  id: "123",
+  role: "user",
+  content: "Dummy message",
+};
+
+const DummyAssistantMessage: Message = {
+  id: "123",
+  role: "assistant",
+  content: "Dummy message",
+};
+
+const DummyMessages: Message[] = [DummyUserMessage, DummyAssistantMessage];
+
+const meta = {
+  title: "Components/LessonPlan/ChatRightHandSideLesson",
+  component: ChatRightHandSideLesson,
+  tags: ["autodocs"],
+  decorators: [ChatDecorator, DemoDecorator],
+  args: {
+    showLessonMobile: true,
+    closeMobileLessonPullOut: fn,
+    demo: { isDemoUser: false, isSharingEnabled: true, demo: undefined },
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile",
+    },
+    ...chromaticParams(["mobile"]),
+    chatContext: {
+      lessonPlan: {
+        subject: "biology",
+        keyStage: "key-stage-3",
+        title: "About Frogs",
+      },
+      messages: DummyMessages,
+    },
+    ...demoParams({ isDemoUser: false }),
+  },
+} satisfies Meta<typeof ChatRightHandSideLesson>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const OnlyOneMessage: Story = {
+  parameters: {
+    chatContext: {
+      messages: [DummyUserMessage],
+    },
+  },
+};

From 7aef0ef6934cd0adc5552d9b97e60166e250a368 Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:43:15 +0100
Subject: [PATCH 5/5] test: fix @/storybook imports from jest

---
 apps/nextjs/.storybook/chromatic.ts           |  2 +-
 apps/nextjs/jest.config.mjs                   |  1 +
 .../Chat/chat-message/index.stories.tsx       |  2 +-
 .../LessonPlanProgressDropdown.test.tsx       | 21 -------------------
 .../Onboarding/TermsContent.stories.tsx       |  2 +-
 5 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
index bc755b188..dc8bfec65 100644
--- a/apps/nextjs/.storybook/chromatic.ts
+++ b/apps/nextjs/.storybook/chromatic.ts
@@ -10,7 +10,7 @@ export function chromaticParams(modes: ChromaticModes[]) {
           mobile: { viewport: "mobile" },
         }),
         ...(modes.includes("mobile-wide") && {
-          mobile: { viewport: "mobile-wide" },
+          "mobile-wide": { viewport: "mobile-wide" },
         }),
         ...(modes.includes("desktop") && {
           desktop: { viewport: "desktop" },
diff --git a/apps/nextjs/jest.config.mjs b/apps/nextjs/jest.config.mjs
index 7898f8abb..a7fdb640d 100644
--- a/apps/nextjs/jest.config.mjs
+++ b/apps/nextjs/jest.config.mjs
@@ -27,6 +27,7 @@ const config = {
     "^(\\.{1,2}/.*)\\.js$": "$1",
     "^@/components/(.*)$": "<rootDir>/src/components/$1",
     "^@/assets/(.*)$": "<rootDir>/src/assets/$1",
+    "^@/storybook/(.*)$": "<rootDir>/.storybook/$1",
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
   testMatch: ["**/*.test.ts", "**/*.test.tsx"],
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
index 022e5f8bb..1341f5a59 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.stories.tsx
@@ -22,7 +22,7 @@ const meta = {
     ailaStreamingStatus: "Idle",
   },
   parameters: {
-    ...chromaticParams(["mobile", "desktop"]),
+    ...chromaticParams(["desktop"]),
   },
 } satisfies Meta<typeof ChatMessage>;
 
diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.test.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.test.tsx
index 6665475c5..2e3c3f78d 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.test.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.test.tsx
@@ -19,27 +19,6 @@ const { Default, PartiallyCompleted, FullyCompleted, PartialCycles } =
   composeStories(stories);
 
 describe("LessonPlanProgressDropdown", () => {
-  it("renders the Default story with correct closed state", () => {
-    render(<Default />);
-    expect(screen.getByText("4 of 10 sections complete")).toBeInTheDocument();
-    expect(screen.queryByText("Cycles")).not.toBeInTheDocument();
-  });
-
-  it("renders the PartiallyCompleted story with correct closed state", () => {
-    render(<PartiallyCompleted />);
-    expect(screen.getByText("7 of 10 sections complete")).toBeInTheDocument();
-  });
-
-  it("renders the FullyCompleted story with correct closed state", () => {
-    render(<FullyCompleted />);
-    expect(screen.getByText("10 of 10 sections complete")).toBeInTheDocument();
-  });
-
-  it("renders the PartialCycles story with correct closed state", () => {
-    render(<PartialCycles />);
-    expect(screen.getByText("5 of 10 sections complete")).toBeInTheDocument();
-  });
-
   it("displays the dropdown menu when clicked and shows correct completed sections", async () => {
     render(<PartiallyCompleted />);
 
diff --git a/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
index 87b806da8..472d544d5 100644
--- a/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
+++ b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
   title: "Components/Onboarding/TermsContent",
   component: TermsContent,
   parameters: {
-    ...chromaticParams(["mobile", "desktop"]),
+    ...chromaticParams(["desktop"]),
   },
 } satisfies Meta<typeof TermsContent>;