test(snapshot): Migrate snapshot tests to storybook (#5340)

Co-authored-by: Manish Kumar ⛄ <[email protected]>
Co-authored-by: Wai.Tung <[email protected]>
Co-authored-by: Shanmughapriyan S <[email protected]>
Co-authored-by: Michael Esteban <[email protected]>
Co-authored-by: Claudio Wunder <[email protected]>
Co-authored-by: Teja Sai Sandeep Reddy Konala <[email protected]>
Co-authored-by: Claudio Wunder <[email protected]>
Co-authored-by: vasanth9 <cheepurupalli.vasanthkumar.com>
Co-authored-by: Aymen Naghmouchi <[email protected]>
Co-authored-by: Teja Sai Sandeep Reddy Konala <[email protected]>
Co-authored-by: Augustin Mauroy <[email protected]>
Co-authored-by: Guilherme Araújo <[email protected]>
Co-authored-by: Augustin Mauroy <[email protected]>
Co-authored-by: HinataKah0 <[email protected]>
Co-authored-by: Olaleye Blessing <[email protected]>
Co-authored-by: ktssr <[email protected]>
Co-authored-by: vasanthkumar <[email protected]>
Co-authored-by: Floran Hachez <[email protected]>
Co-authored-by: Jatin <[email protected]>
fixed styleling misconfig and fixed storybooks (#5281)
fix storybook styles, imports, typescript config and dependencies (#5319
fix(package.json) Lint command is missing slashes (#5321
fix storybook local development mode (#5335)
fix(i18n): translation key (#5347)

Author: 17 people

.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

@@ -103,7 +103,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.
 
 ## Vocabulary
 
@@ -185,7 +188,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
 
@@ -300,6 +303,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/Api/DataTag/__tests__/__snapshots__/index.test.tsx.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>
+`;