test: set up chromatic config and get storybook building (#344)

oaknational · Nov 7, 2024 · 7a34686 · 7a34686
1 parent 9af9b11
commit 7a34686
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 96 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,60 @@
+name: "Chromatic"
+
+on: push
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true
+
+jobs:
+  changed-files:
+    runs-on: ubuntu-latest
+    name: changed-files
+    outputs:
+      all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
+      any_changed: ${{ steps.changed-files.outputs.any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files: |
+            apps/nextjs/**
+
+  chromatic:
+    name: Run Chromatic
+    needs: [changed-files]
+    if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Inject Doppler env vars
+        uses: dopplerhq/[email protected]
+        id: doppler
+        with:
+          doppler-token: ${{ secrets.DOPPLER_TOKEN }}
+          inject-env-vars: true
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: apps/nextjs
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true
diff --git a/apps/nextjs/.gitignore b/apps/nextjs/.gitignore
@@ -9,6 +9,7 @@ tests-e2e/.auth
 .env.sentry-build-plugin
 
 *storybook.log
+.chromatic.log
 
 # Playwright artifacts
-playwright-report
+playwright-report
diff --git a/apps/nextjs/.storybook/ThemeDecorator.tsx → ...rybook/decorators/RadixThemeDecorator.tsx b/apps/nextjs/.storybook/ThemeDecorator.tsx → ...rybook/decorators/RadixThemeDecorator.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Theme } from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
 
-export const ThemeDecorator = (Story: React.ComponentType) => (
+export const RadixThemeDecorator = (Story: React.ComponentType) => (
   <Theme>
     <Story />
   </Theme>

diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
@@ -9,18 +9,10 @@ import "@fontsource/lexend/900.css";
 import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
 import type { Preview, Decorator } from "@storybook/react";
 
-// ModerationProvider is coming in the main Chat.tsx refactor
-//import { ModerationProvider } from "../src/components/AppComponents/Chat/Chat/ModerationProvider";
 import { TooltipProvider } from "../src/components/AppComponents/Chat/ui/tooltip";
-import { DialogProvider } from "../src/components/AppComponents/DialogContext";
-import { CookieConsentProvider } from "../src/components/ContextProviders/CookieConsentProvider";
-import { DemoProvider } from "../src/components/ContextProviders/Demo";
-import LessonPlanTrackingProvider from "../src/lib/analytics/lessonPlanTrackingContext";
-import { SidebarProvider } from "../src/lib/hooks/use-sidebar";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { TRPCReactProvider } from "../src/utils/trpc";
-import { MockClerkProvider } from "./MockClerkProvider";
-import { ThemeDecorator } from "./ThemeDecorator";
+import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
 const preview: Preview = {
@@ -35,33 +27,29 @@ const preview: Preview = {
   tags: ["autodocs"],
 };
 
+// Providers not currently used
+// - MockClerkProvider
+// - CookieConsentProvider
+// - DemoProvider
+// - LessonPlanTrackingProvider
+// - DialogProvider
+// - OakThemeProvider
+// - SidebarProvider
+// - ChatModerationProvider
+
 export const decorators: Decorator[] = [
-  ThemeDecorator,
+  RadixThemeDecorator,
   (Story) => (
-    <MockClerkProvider>
-      <CookieConsentProvider>
-        {" "}
-        <TRPCReactProvider>
-          <DemoProvider>
-            <AnalyticsProvider>
-              <LessonPlanTrackingProvider chatId={"faked"}>
-                <DialogProvider>
-                  <OakThemeProvider theme={oakDefaultTheme}>
-                    <SidebarProvider>
-                      <TooltipProvider>
-                        {/* <ModerationProvider initialModerations={[]}> */}
-                        <Story />
-                        {/* </ModerationProvider> */}
-                      </TooltipProvider>
-                    </SidebarProvider>
-                  </OakThemeProvider>
-                </DialogProvider>
-              </LessonPlanTrackingProvider>
-            </AnalyticsProvider>
-          </DemoProvider>{" "}
-        </TRPCReactProvider>
-      </CookieConsentProvider>
-    </MockClerkProvider>
+    <>
+      {/* TODO: Mock tRPC calls with MSW */}
+      <TRPCReactProvider>
+        <AnalyticsProvider>
+          <TooltipProvider>
+            <Story />
+          </TooltipProvider>
+        </AnalyticsProvider>
+      </TRPCReactProvider>
+    </>
   ),
 ];
 

diff --git a/apps/nextjs/chromatic.config.json b/apps/nextjs/chromatic.config.json
@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:672908473f629875f0be294f",
+  "storybookBaseDir": "apps/nextjs",
+  "zip": true
+}
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -23,7 +23,8 @@
     "with-env": "dotenv -e ../../.env --",
     "aila": "tsx scripts/aila-cli.ts",
     "storybook": "dotenv -e ../../.env -- storybook dev -p 6006 --no-open",
-    "build-storybook": "dotenv -e ../../.env -- storybook build"
+    "build-storybook": "dotenv -e ../../.env -- storybook build",
+    "chromatic": "pnpm with-env pnpm dlx chromatic"
   },
   "prettier": "@oakai/prettier-config",
   "dependencies": {

diff --git a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx
diff --git a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
@@ -1,3 +1,4 @@
+import * as Dialog from "@radix-ui/react-dialog";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatHistory } from "./chat-history";
@@ -9,6 +10,13 @@ const meta: Meta<typeof ChatHistory> = {
     layout: "centered",
   },
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <Dialog.Root>
+        <Story />
+      </Dialog.Root>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
@@ -27,6 +27,8 @@ export const Default: Story = {
   },
 };
 
+// NOTE: The modal appears on a parent element which isn't captured by visual testing
+// TODO: Test the modal directly
 export const SharePending: Story = {
   args: {
     ...Default.args,
@@ -38,6 +40,8 @@ export const SharePending: Story = {
   },
 };
 
+// NOTE: The modal appears on a parent element which isn't captured by visual testing
+// TODO: Test the modal directly
 export const RemovePending: Story = {
   args: {
     ...Default.args,