Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: mobile snapshots for page stories #436

Merged
merged 11 commits into from
Dec 10, 2024
95 changes: 95 additions & 0 deletions apps/nextjs/.storybook/chromatic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import "@storybook/csf";

type ChromaticModes = "legacy" | "mobile" | "desktop" | "desktop-wide";

export function chromaticParams(modes: ChromaticModes[]) {
return {
chromatic: {
modes: {
...(modes.includes("mobile") && {
mobile: { viewport: "mobile" },
}),
...(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;
};
}
}
20 changes: 20 additions & 0 deletions apps/nextjs/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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],
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../../../.storybook/chromatic";
import { DemoProvider } from "../../../../../src/components/ContextProviders/Demo";
import { DownloadContent } from "./DownloadView";

Expand All @@ -9,6 +10,7 @@ const meta: Meta<typeof DownloadContent> = {
component: DownloadContent,
parameters: {
layout: "fullscreen",
...chromaticParams(["mobile", "legacy"]),
},
decorators: [
(Story) => (
Expand Down
2 changes: 2 additions & 0 deletions apps/nextjs/src/app/aila/[id]/share/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../../../.storybook/chromatic";
import ShareChat from "./";

const meta: Meta<typeof ShareChat> = {
title: "Pages/Chat/Share",
component: ShareChat,
parameters: {
layout: "fullscreen",
...chromaticParams(["mobile", "legacy"]),
},
};

Expand Down
2 changes: 2 additions & 0 deletions apps/nextjs/src/app/aila/help/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import type { Meta, StoryObj } from "@storybook/react";
import { DemoProvider } from "@/components/ContextProviders/Demo";

import { HelpContent } from ".";
import { chromaticParams } from "../../../../.storybook/chromatic";

const meta: Meta<typeof HelpContent> = {
title: "Pages/Chat/Help",
component: HelpContent,
parameters: {
// Including custom decorators changes the layout from fullscreen
layout: "fullscreen",
...chromaticParams(["mobile", "legacy"]),
},
decorators: [
(Story) => (
Expand Down
4 changes: 4 additions & 0 deletions apps/nextjs/src/app/faqs/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { FAQPageContent } from ".";
import { chromaticParams } from "../../../.storybook/chromatic";

const meta: Meta<typeof FAQPageContent> = {
title: "Pages/FAQs",
component: FAQPageContent,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
4 changes: 4 additions & 0 deletions apps/nextjs/src/app/home-page.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../.storybook/chromatic";
import { HomePageContent } from "./home-page";

const meta: Meta<typeof HomePageContent> = {
title: "Pages/Homepage",
component: HomePageContent,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
4 changes: 4 additions & 0 deletions apps/nextjs/src/app/legal/[slug]/legal.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../../.storybook/chromatic";
import { LegalContent } from "./legal";

const meta: Meta<typeof LegalContent> = {
title: "Pages/Legal/Sanity dynamic",
component: LegalContent,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../../.storybook/chromatic";
import { AccountLocked } from "./account-locked";

const meta: Meta<typeof AccountLocked> = {
title: "Pages/Legal/Account Locked",
component: AccountLocked,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
4 changes: 4 additions & 0 deletions apps/nextjs/src/app/prompts/prompts.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../.storybook/chromatic";
import { PromptsContent } from "./prompts";

const meta: Meta<typeof PromptsContent> = {
title: "Pages/Prompts",
component: PromptsContent,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";

import { DemoProvider } from "@/components/ContextProviders/Demo";

import { chromaticParams } from "../../../../.storybook/chromatic";
import { DialogProvider } from "../DialogContext";
import { ChatStart } from "./chat-start";

Expand All @@ -11,6 +12,7 @@ const meta: Meta<typeof ChatStart> = {
parameters: {
// Including custom decorators changes the layout from fullscreen
layout: "fullscreen",
...chromaticParams(["mobile", "legacy"]),
},
decorators: [
(Story) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand Down Expand Up @@ -40,6 +41,7 @@ const meta: Meta<typeof MobileExportButtons> = {
viewport: {
defaultViewport: "mobile1",
},
...chromaticParams(["mobile"]),
},
args: {
closeMobileLessonPullOut: () => {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand Down Expand Up @@ -42,6 +43,9 @@ const meta: Meta<typeof ExportButtons> = {
sectionRefs: {},
documentContainerRef: { current: null },
},
parameters: {
...chromaticParams(["legacy"]),
},
};

export default meta;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../.storybook/chromatic";
import { AcceptTermsForm } from "./AcceptTermsForm";

const meta: Meta<typeof AcceptTermsForm> = {
title: "Pages/Onboarding/AcceptTermsForm",
component: AcceptTermsForm,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";

import { chromaticParams } from "../../../.storybook/chromatic";
import { LegacyUpgradeNotice } from "./LegacyUpgradeNotice";

const meta: Meta<typeof LegacyUpgradeNotice> = {
title: "Pages/Onboarding/LegacyUpgradeNotice",
component: LegacyUpgradeNotice,
parameters: {
...chromaticParams(["mobile", "legacy"]),
},
};

export default meta;
Expand Down
Loading