fix: storybook flakiness and minor typescript issues (#5530)

* chore: moved fixture

* chore: updated storybook test-runner

* chore: fixed minor typescript errors

* chore: package-lock was mismatching

* chore: updated stories

* Update .storybook/test-runner.ts

Signed-off-by: Brian Muenzenmeyer <[email protected]>

---------

Signed-off-by: Brian Muenzenmeyer <[email protected]>
Co-authored-by: Brian Muenzenmeyer <[email protected]>

Author: ovflowd

.gitignore

@@ -23,6 +23,7 @@ coverage
 
 # Storybook
 storybook-static
+.nyc_output
 
 # Vercel Files
 .vercel

.storybook/main.ts

@@ -1,5 +1,5 @@
-import type { StorybookConfig } from '@storybook/nextjs';
 import { resolve } from 'node:path';
+import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: ['../components/**/*.stories.tsx'],
@@ -9,7 +9,7 @@ const config: StorybookConfig = {
   docs: { autodocs: 'tag' },
   staticDirs: ['../public'],
   core: { disableTelemetry: true },
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async config => {
     config.resolve!.modules = [resolve(__dirname, '..'), 'node_modules'];
 
     config.resolve!.alias = {

.storybook/test-runner.ts

@@ -1,13 +1,23 @@
 import type { TestRunnerConfig } from '@storybook/test-runner';
 
+const STORYBOOK_ELEMENT_ID = '[data-test-id="story-root"]';
+
 const config: TestRunnerConfig = {
-  postRender: async (page, context) => {
-    // Gather the page HTML inner content for a DOM HTML Snapshot
-    const rootElementId = '[data-test-id="story-root"]';
-    const rootElement = await page.locator(rootElementId);
+  postRender: async page => {
+    // We wait for the page to load for at least one second
+    // as there's no reliable way globally to ensure everything loaded correctly
+    await page.waitForTimeout(1000);
+
+    // We attempt to get the Storybook root Element
+    const rootElement = await page.locator(STORYBOOK_ELEMENT_ID);
+
+    // Then we rewrite the inner HTML content
     const content = await rootElement.innerHTML();
 
     expect(content).toBeDefined();
+
+    // We strip the `class` tags from the HTML content as we do not want
+    // to pollute the snapshots with generated class names
     expect(content.replace(/class="(.*?)"/gm, '')).toMatchSnapshot();
   },
 };

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

@@ -14,7 +14,7 @@ exports[`Article/AuthorList/Author Default smoke-test 1`] = `
        data-nimg="1"
        srcset="https://github.com/nodejs.png?size=60?w=64&q=75 1x, https://github.com/nodejs.png?size=60?w=128&q=75 2x"
        src="https://github.com/nodejs.png?size=60?w=128&q=75"
-       style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-image: url("/static/images/placeholder-img.png");"
+       style="color: transparent;"
   >
 </a>
 `;
@@ -31,9 +31,9 @@ exports[`Article/AuthorList/Author WithourUsername smoke-test 1`] = `
        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;/static/images/placeholder-img.png&quot;);"
+       srcset="/static/images/placeholder-img.png?w=16&amp;q=75 1x"
+       src="http://127.0.0.1:6006/static/images/placeholder-img.png?w=16&amp;q=75"
+       style
   >
 </a>
 `;

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

@@ -18,7 +18,7 @@ exports[`Article/AuthorList Default smoke-test 1`] = `
              data-nimg="1"
              srcset="https://github.com/flaviocopes.png?size=60?w=64&q=75 1x, https://github.com/flaviocopes.png?size=60?w=128&q=75 2x"
              src="https://github.com/flaviocopes.png?size=60?w=128&q=75"
-             style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-image: url("/static/images/placeholder-img.png");"
+             style="color: transparent;"
         >
       </a>
     </li>
@@ -36,7 +36,7 @@ exports[`Article/AuthorList Default smoke-test 1`] = `
              data-nimg="1"
              srcset="https://github.com/MarkPieszak.png?size=60?w=64&amp;q=75 1x, https://github.com/MarkPieszak.png?size=60?w=128&amp;q=75 2x"
              src="https://github.com/MarkPieszak.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;/static/images/placeholder-img.png&quot;);"
+             style="color: transparent;"
         >
       </a>
     </li>
@@ -54,7 +54,7 @@ exports[`Article/AuthorList Default smoke-test 1`] = `
              data-nimg="1"
              srcset="https://github.com/mcollina.png?size=60?w=64&amp;q=75 1x, https://github.com/mcollina.png?size=60?w=128&amp;q=75 2x"
              src="https://github.com/mcollina.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;/static/images/placeholder-img.png&quot;);"
+             style="color: transparent;"
         >
       </a>
     </li>
@@ -70,9 +70,9 @@ exports[`Article/AuthorList Default smoke-test 1`] = `
              height="60"
              decoding="async"
              data-nimg="1"
-             srcset="https://github.com/unavailable-author.png?size=60?w=64&amp;q=75 1x, https://github.com/unavailable-author.png?size=60?w=128&amp;q=75 2x"
-             src="https://github.com/unavailable-author.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;/static/images/placeholder-img.png&quot;);"
+             srcset="/static/images/placeholder-img.png?w=64&amp;q=75 1x, /static/images/placeholder-img.png?w=128&amp;q=75 2x"
+             src="http://127.0.0.1:6006/static/images/placeholder-img.png?w=128&amp;q=75"
+             style
         >
       </a>
     </li>

components/Common/index.ts

@@ -39,9 +39,11 @@ describe('useMediaQuery', () => {
   });
 
   it('should subscribe for media changes', () => {
-    const listenerMock = jest.fn().mockImplementation((_, handler) => {
-      handler();
-    });
+    const listenerMock = jest
+      .fn()
+      .mockImplementation((_: any, handler: Function) => {
+        handler();
+      });
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
@@ -58,7 +60,7 @@ describe('useMediaQuery', () => {
   });
 
   it("should support MediaQueryList's old event listeners", () => {
-    const listenerMock = jest.fn().mockImplementation(handler => {
+    const listenerMock = jest.fn().mockImplementation((handler: Function) => {
       handler();
     });
 

__fixtures__/nodeReleases.tsx components/__fixtures__/nodeReleases.tsx__fixtures__/nodeReleases.tsx renamed to components/__fixtures__/nodeReleases.tsx

@@ -29,7 +29,7 @@
     "format": "npm run lint:fix && npm run prettier:fix",
     "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
     "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --loglevel warn",
-    "test:unit": "cross-env NODE_NO_WARNINGS=1 jest --passWithNoTests",
+    "test:unit": "cross-env NODE_NO_WARNINGS=1 jest --passWithNoTests --coverage",
     "test:unit:watch": "npm run test:unit -- --watch",
     "test:storybook": "concurrently -P -k -s first -n \"storybook,test-storybook\" -c \"magenta,blue\" \"npm:storybook -- --ci\" \"wait-on http://localhost:6006 && test-storybook {@}\"",
     "test:storybook:snapshot": "npm run test:storybook -- -- --updateSnapshot",