Add chromatic modes

frontend/.storybook/modes.tsx

@@ -0,0 +1,16 @@
+export const allModes = {
+  mobile: {
+    viewport: "small",
+  },
+  desktop: {
+    viewport: "large",
+  },
+  dark: {
+    backgrounds: { value: "#251f32" },
+    theme: "dark",
+  },
+  light: {
+    backgrounds: { value: "#fafafa" },
+    theme: "light",
+  },
+}

frontend/.storybook/preview.tsx

@@ -10,6 +10,7 @@ import { MotionGlobalConfig } from "framer-motion"
 import isChromatic from "chromatic/isChromatic"
 
 import { initialize, mswLoader } from "msw-storybook-addon"
+import { allModes } from "./modes"
 
 initialize()
 
@@ -61,7 +62,28 @@ const withI18next = (Story, context) => {
 }
 
 export default {
-  parameters: { mockingDate: new Date(2024, 0, 1) },
+  parameters: {
+    mockingDate: new Date(2024, 0, 1),
+    viewport: {
+      viewports: {
+        small: { name: "Small", styles: { width: "640px", height: "800px" } },
+        large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
+      },
+    },
+    backgrounds: {
+      values: [
+        { name: "light", value: "#fafafa" },
+        { name: "dark", value: "#251f32" },
+      ],
+    },
+    chromatic: {
+      modes: {
+        light: allModes["light"],
+        dark: allModes["dark"],
+        mobile: allModes["mobile"],
+      },
+    },
+  },
   loaders: [mswLoader],
   decorators: [
     withI18next,

frontend/@/components/ui/sonner.stories.tsx

@@ -4,6 +4,7 @@ import { Toaster } from "./sonner"
 import { toast } from "sonner"
 import React from "react"
 import { i18n } from "next-i18next"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
 
 const meta = {
   component: Toaster,
@@ -23,6 +24,17 @@ export const Default: Story = {
       />
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const button = canvas.getByRole("button")
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(canvas.getByText("Hello world!")).toBeInTheDocument()
+    })
+  },
 }
 
 export const Error: Story = {
@@ -35,6 +47,18 @@ export const Error: Story = {
       />
     </div>
   ),
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const button = canvas.getByRole("button")
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(canvas.getByText("Hello world!")).toBeInTheDocument()
+    })
+  },
 }
 
 export const Success: Story = {
@@ -47,6 +71,18 @@ export const Success: Story = {
       />
     </div>
   ),
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const button = canvas.getByRole("button")
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(canvas.getByText("Hello world!")).toBeInTheDocument()
+    })
+  },
 }
 
 export const Info: Story = {
@@ -59,4 +95,16 @@ export const Info: Story = {
       />
     </div>
   ),
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const button = canvas.getByRole("button")
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(canvas.getByText("Hello world!")).toBeInTheDocument()
+    })
+  },
 }

frontend/src/components/Disclosure.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { FlathubDisclosure } from "./Disclosure"
 import React from "react"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
 
 const meta: Meta<typeof FlathubDisclosure> = {
   title: "Components/Disclosure",
@@ -11,9 +12,24 @@ const meta: Meta<typeof FlathubDisclosure> = {
 export default meta
 type Story = StoryObj<typeof FlathubDisclosure>
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     buttonItems: [<div key="button-1">Button 1</div>],
     children: [<div key="content-1">Content</div>],
   },
 }
+
+export const Opened: Story = {
+  args: {
+    buttonItems: [<div key="button-1">Button 1</div>],
+    children: [<div key="content-1">Content</div>],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button"))
+
+    await waitFor(() => {
+      expect(canvas.getByText("Content")).toBeInTheDocument()
+    })
+  },
+}

frontend/src/components/application/AppVerificationControls/LoginVerification.stories.tsx

@@ -1,54 +1,67 @@
 import { faker } from "@faker-js/faker"
-import { Meta } from "@storybook/react"
-import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
 import LoginVerification from "./LoginVerification"
-import { AvailableMethod } from "../../../codegen/model"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
 
-export default {
-  title: "Components/Application/AppVerificationControls/LoginVerification",
+const meta = {
   component: LoginVerification,
-} as Meta<typeof LoginVerification>
+  title: "Components/Application/AppVerificationControls/LoginVerification",
+} satisfies Meta<typeof LoginVerification>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
 
-export const Individual = () => {
-  const method: AvailableMethod = {
-    method: "login_provider",
-    login_provider: "github",
-    login_name: faker.internet.userName(),
-    login_is_organization: false,
-    login_status: "ready",
-  }
+export const Individual: Story = {
+  args: {
+    appId: "io.github.appId",
+    isNewApp: false,
+    method: {
+      method: "login_provider",
+      login_provider: "github",
+      login_name: faker.internet.displayName(),
+      login_is_organization: false,
+      login_status: "ready",
+    },
+    onVerified: () => {},
+    onReloadNeeded: () => {},
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Login provider verification" }),
+    )
 
-  return (
-    <div className="space-y-3">
-      <LoginVerification
-        appId="io.github.appId"
-        isNewApp={false}
-        method={method}
-        onVerified={() => {}}
-        onReloadNeeded={() => {}}
-      ></LoginVerification>
-    </div>
-  )
+    await waitFor(() => {
+      expect(canvas.getByText("io.github.appId")).toBeInTheDocument()
+      expect(canvas.getByText("Verify app")).toBeInTheDocument()
+    })
+  },
 }
 
-export const Organization = () => {
-  const method: AvailableMethod = {
-    method: "login_provider",
-    login_provider: "github",
-    login_name: faker.internet.domainWord(),
-    login_is_organization: true,
-    login_status: "ready",
-  }
+export const Organization: Story = {
+  args: {
+    appId: "io.github.appId",
+    isNewApp: false,
+    method: {
+      method: "login_provider",
+      login_provider: "github",
+      login_name: faker.internet.domainWord(),
+      login_is_organization: true,
+      login_status: "ready",
+    },
+    onVerified: () => {},
+    onReloadNeeded: () => {},
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Login provider verification" }),
+    )
 
-  return (
-    <div className="space-y-3">
-      <LoginVerification
-        appId="io.github.appId"
-        method={method}
-        isNewApp={false}
-        onVerified={() => {}}
-        onReloadNeeded={() => {}}
-      ></LoginVerification>
-    </div>
-  )
+    await waitFor(() => {
+      expect(canvas.getByText("Verify app")).toBeInTheDocument()
+      expect(canvas.getByText("io.github.appId")).toBeInTheDocument()
+    })
+  },
 }

frontend/src/components/application/AppVerificationControls/WebsiteVerification.stories.tsx

@@ -1,47 +1,64 @@
-import React from "react"
-import { Meta } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import { faker } from "@faker-js/faker"
 import WebsiteVerification from "./WebsiteVerification"
-import { AvailableMethod } from "../../../codegen/model"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
 
-export default {
-  title: "Components/Application/AppVerificationControls/WebsiteVerification",
+const meta = {
   component: WebsiteVerification,
-} as Meta<typeof WebsiteVerification>
+  title: "Components/Application/AppVerificationControls/WebsiteVerification",
+} satisfies Meta<typeof WebsiteVerification>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
 
-export const NoTokenFirstStep = () => {
-  const method: AvailableMethod = {
-    method: "website",
-    website: faker.internet.url(),
-  }
+export const NoTokenFirstStep: Story = {
+  args: {
+    appId: "io.github.appId",
+    isNewApp: false,
+    method: {
+      method: "website",
+      website: faker.internet.url(),
+    },
+    onVerified: () => {},
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Website verification" }),
+    )
 
-  return (
-    <div className="space-y-3">
-      <WebsiteVerification
-        appId="my.domain.appId"
-        method={method}
-        onVerified={() => {}}
-        isNewApp={false}
-      />
-    </div>
-  )
+    await waitFor(() => {
+      expect(canvas.getByText("io.github.appId")).toBeInTheDocument()
+      expect(canvas.getByText("Begin")).toBeInTheDocument()
+    })
+  },
 }
 
-export const HasTokenSecondStep = () => {
-  const method: AvailableMethod = {
-    method: "website",
-    website: faker.internet.url(),
-    website_token: faker.string.uuid(),
-  }
+export const HasTokenSecondStep: Story = {
+  args: {
+    appId: "io.github.appId",
+    isNewApp: false,
+    method: {
+      method: "website",
+      website: "test.com/my-app",
+      website_token: faker.string.uuid(),
+    },
+    onVerified: () => {},
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Website verification" }),
+    )
 
-  return (
-    <div className="space-y-3">
-      <WebsiteVerification
-        appId="my.domain.appId"
-        method={method}
-        onVerified={() => {}}
-        isNewApp={false}
-      />
-    </div>
-  )
+    await waitFor(() => {
+      expect(
+        canvas.getByText(
+          "https://test.com/my-app/.well-known/org.flathub.VerifiedApps.txt",
+        ),
+      ).toBeInTheDocument()
+      expect(canvas.getByText("Continue")).toBeInTheDocument()
+    })
+  },
 }