test(snapshot): Migrate snapshot tests to storybook

.github/workflows/pull-request.yml

@@ -83,7 +83,13 @@ jobs:
  enableCrossOsArchive: true
 
  - name: Run Unit Tests
- run: npx turbo test:ci
+ run: npx turbo test:unit -- --coverage
+ env:
+ TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+ TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+ - name: Run Storybook Tests
+ run: npx turbo test:storybook
  env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

.storybook/preview.tsx

@@ -39,7 +39,9 @@ export const decorators = [
  }
  `}
  </style>
- <Story />
+ <div data-test-id="story-root">
+ <Story />
+ </div>
  </NodeDataProvider>
  </LocaleProvider>
  </SiteProvider>

.storybook/test-runner.ts

@@ -0,0 +1,14 @@
+// TODO: Convert this to ESM once the bug is resolved
+// https://github.com/storybookjs/test-runner/issues/293
+
+const config = {
+ async postRender(page, _context) {
+ const rootElementId = '[data-test-id="story-root"]';
+ const rootElement = await page.locator(rootElementId);
+ const content = await rootElement.innerHTML();
+ expect(content).toBeDefined();
+ expect(content).toMatchSnapshot();
+ },
+};
+
+module.exports = config;

CONTRIBUTING.md

@@ -102,7 +102,10 @@ We also offer other commands that offer you assistance during your local develop
  - **Usage:** `npx turbo scripts:release-post -- --version=vXX.X.X --force`
 - `npx turbo storybook` starts Storybook's local server
 - `npx turbo storybook:build` builds Storybook as a static web application for publishing
-- `npx turbo test` runs jest (unit-tests) locally
+- `npx turbo test` runs all tests locally
+ - `npx turbo test:unit` runs jest (unit-tests) locally
+ - `npx turbo test:storybook` runs storybook test-runner tests
+ - `npx turbo test:storybook:snapshot` generates and updates snapshots for all storybook components.
 
 ## Creating Components
 
@@ -178,7 +181,7 @@ Commits should be signed. You can read more about [Commit Signing][] here.
 
 Each new feature or bug fix should be accompanied by a unit test (when deemed valuable). We use [Jest][] as our test runner and [React Testing Library][] for our React unit tests.
 
-We also use [Storybook][] to document our components. Each component should have a storybook story that documents the component's usage.
+We also use [Storybook][] to document our components. Each component should have a storybook story that documents the component's usage. Snapshot testing of our components is directly done by taking snapshot of all Storybook stories, using [Storybook Test Runner][] and [Playwright][].
 
 ### General Guidelines for Unit Tests
 
@@ -299,6 +302,8 @@ If something is missing here, or you feel something is not well described, feel
 [Jest]: https://jestjs.io/
 [React Testing Library]: https://testing-library.com/docs/react-testing-library/intro/
 [Storybook]: https://storybook.js.org/
+[Storybook Test Runner]: https://storybook.js.org/addons/@storybook/test-runner#dom-snapshot-recipe
+[Playwright]: https://playwright.dev/
 [`react-intl`]: https://formatjs.io/docs/react-intl/
 [Next.js]: https://nextjs.org/
 [MDX]: https://mdxjs.com/

components/Api/DataTag/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/DataTag Blue smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+ data-tag="M"
+>
+ M
+</span>
+`;
+
+exports[`Api/DataTag Red smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+ data-tag="E"
+>
+ E
+</span>
+`;
+
+exports[`Api/DataTag Yellow smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+ data-tag="C"
+>
+ C
+</span>
+`;

components/Article/Alert/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Article/Alert Default smoke-test 1`] = `
+<div class="Alert_alert__qjYPQ">
+ This is an alert
+</div>
+`;

components/Article/AuthorList/Author/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Article/AuthorList/Author Default smoke-test 1`] = `
+<li>
+ <a class="Author_link__6oI83"
+ href="https://github.com/nodejs"
+ aria-label="nodejs Github - opens in new tab"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img alt="nodejs"
+ loading="lazy"
+ width="60"
+ height="60"
+ decoding="async"
+ data-nimg="1"
+ srcset="https://github.com/nodejs.png?size=60?w=64&amp;q=75 1x, https://github.com/nodejs.png?size=60?w=128&amp;q=75 2x"
+ src="https://github.com/nodejs.png?size=60?w=128&amp;q=75"
+ style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(&quot;/placeholder-img.png&quot;);"
+ >
+ </a>
+</li>
+`;
+
+exports[`Article/AuthorList/Author WithourUsername smoke-test 1`] = `
+<li>
+ <a class="Author_link__6oI83"
+ href="https://github.com/"
+ aria-label=" Github - opens in new tab"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img alt
+ loading="lazy"
+ width="0"
+ height="0"
+ decoding="async"
+ data-nimg="1"
+ srcset="https://github.com/.png?size=0?w=16&amp;q=75 1x"
+ src="https://github.com/.png?size=0?w=16&amp;q=75"
+ style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(&quot;/placeholder-img.png&quot;);"
+ >
+ </a>
+</li>
+`;

components/Article/AuthorList/Author/index.stories.tsx

@@ -0,0 +1,21 @@
+import Author from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Author>;
+type Meta = MetaObj<typeof Author>;
+
+export const Default: Story = {
+ args: {
+ username: 'nodejs',
+ size: 60,
+ },
+};
+
+export const WithourUsername: Story = {
+ args: {
+ username: '',
+ size: 0,
+ },
+};
+
+export default { component: Author } as Meta;