diff --git a/webui2/.storybook/vitest.setup.ts b/webui2/.storybook/vitest.setup.ts index d0a94b337184f3083a1d36a07687746ecb94fd79..253ffaec143ab40a97c2546685a7b65ed865443d 100644 --- a/webui2/.storybook/vitest.setup.ts +++ b/webui2/.storybook/vitest.setup.ts @@ -3,9 +3,8 @@ import { beforeAll } from "vitest"; import * as previewAnnotations from "./preview"; -// Apply Storybook decorators/parameters from preview.ts to portable stories. -// Note: the @storybook/addon-vitest project handles this automatically; -// this setup file is only used by the snapshot test project. +// Apply Storybook decorators/parameters from preview.ts to portable stories +// used by the snapshot test project. const annotations = setProjectAnnotations([previewAnnotations]); beforeAll(annotations.beforeAll); diff --git a/webui2/src/components/ui/__snapshots__/button.test.tsx.snap b/webui2/src/components/ui/__snapshots__/button.test.tsx.snap index 32f14b992d16b7dd5d28cf0816a5867fc0b926e0..cc1c3f0ccb2c2c8603be2a0229d21dfa945c7f13 100644 --- a/webui2/src/components/ui/__snapshots__/button.test.tsx.snap +++ b/webui2/src/components/ui/__snapshots__/button.test.tsx.snap @@ -1,65 +1,81 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Button/Default matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Destructive matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Ghost matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Large matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Link matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Outline matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Secondary matches snapshot 1`] = ` - +
+ +
`; exports[`Button/Small matches snapshot 1`] = ` - +
+ +
`; diff --git a/webui2/src/components/ui/button.test.tsx b/webui2/src/components/ui/button.test.tsx index 1a69d56f27a14f36c1dadd85963437e27ec1d40f..cc51d3e255ab6375fe83df432d84ca451d725db6 100644 --- a/webui2/src/components/ui/button.test.tsx +++ b/webui2/src/components/ui/button.test.tsx @@ -1,5 +1,4 @@ import { composeStories } from "@storybook/react-vite"; -import { render } from "@testing-library/react"; import { expect, test } from "vitest"; import * as stories from "./button.stories"; @@ -7,8 +6,8 @@ import * as stories from "./button.stories"; const composed = composeStories(stories); for (const [name, Story] of Object.entries(composed)) { - test(`Button/${name} matches snapshot`, () => { - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); + test(`Button/${name} matches snapshot`, async () => { + await Story.run(); + expect(document.body.firstChild).toMatchSnapshot(); }); } diff --git a/webui2/vitest.config.ts b/webui2/vitest.config.ts index 8a37efe7d4fcf46bef4bb15a3f72c059c82dffd8..43eff428e689798c32ff5711268255d9dddb04ba 100644 --- a/webui2/vitest.config.ts +++ b/webui2/vitest.config.ts @@ -19,6 +19,7 @@ export default mergeConfig( plugins: [ storybookTest({ configDir: path.join(dirname, ".storybook"), + storybookScript: "pnpm storybook --no-open", }), ], test: { @@ -29,6 +30,7 @@ export default mergeConfig( headless: true, instances: [{ browser: "chromium" }], }, + setupFiles: ["./.storybook/vitest.setup.ts"], }, }, // Snapshot tests (happy-dom, fast)