Snapshot testing via Storybook

.github/workflows/storybook-tests.yml

@@ -0,0 +1,20 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx --yes concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx --yes http-server storybook-static --port 6006 --silent" \
+            "npx --yes wait-on http://127.0.0.1:6006 && yarn test-storybook"

.gitignore

@@ -113,3 +113,5 @@ storybook-static/
 
 # IDEA files
 .idea/
+
+*__diff_output__*

.storybook/test-runner.ts

@@ -0,0 +1,26 @@
+import { waitForPageReady, TestRunnerConfig } from '@storybook/test-runner';
+
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postVisit(page, context) {
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    if (!innerHTML) throw new Error('No innerHTML found');
+    expect(innerHTML).toMatchSnapshot();
+
+    // Waits for the page to be ready before taking a screenshot to ensure consistent results
+    await waitForPageReady(page);
+
+    // To capture a screenshot for for different browsers, add page.context().browser().browserType().name() to get the browser name to prefix the file name
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      customSnapshotIdentifier: context.id,
+    });
+  },
+};
+
+export default config;

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -14,18 +14,20 @@
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
-    "@storybook/addon-actions": "^7.0.2",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/addons": "^7.0.2",
-    "@storybook/blocks": "^7.0.2",
-    "@storybook/preview-web": "^7.0.2",
-    "@storybook/react": "^7.0.2",
-    "@storybook/react-vite": "^7.0.2",
-    "@storybook/theming": "^7.0.2",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/preview-web": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/theming": "^7.6.7",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.23",
     "@types/jest-axe": "^3.5.1",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/node": "^15.0.2",
     "@types/react": "16.14.0",
     "@types/react-dom": "^16.9.12",
@@ -47,6 +49,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
+    "jest-image-snapshot": "^6.4.0",
     "nhsuk-frontend": "5.0.0",
     "nhsuk-frontend-legacy": "npm:[email protected]",
     "prettier": "^2.3.0",
@@ -57,7 +60,7 @@
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.32.12",
-    "storybook": "^7.0.2",
+    "storybook": "^7.6.7",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
     "typescript": "4.2.4",
@@ -82,6 +85,7 @@
     "build": "yarn cleanup && yarn build:dist && yarn build:lib",
     "test": "jest",
     "test:ci": "jest --coverage",
+    "test:storybook": "test-storybook",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
     "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
     "build-storybook": "storybook build",

stories/Components/__snapshots__/ActionLink.stories.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/ActionLink OpenLinkInNewTab smoke-test 1`] = `
+<div class="nhsuk-action-link">
+  <a class="nhsuk-action-link__link"
+     href="#"
+     target="_blank"
+     rel="noopener noreferrer"
+  >
+    <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle"
+         xmlns="http://www.w3.org/2000/svg"
+         viewbox="0 0 24 24"
+         aria-hidden="true"
+         height="36"
+         width="36"
+    >
+      <path d="M0 0h24v24H0z"
+            fill="none"
+      >
+      </path>
+      <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z">
+      </path>
+    </svg>
+    <span class="nhsuk-action-link__text">
+      Link
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Components/ActionLink StandardLink smoke-test 1`] = `
+<div class="nhsuk-action-link">
+  <a class="nhsuk-action-link__link"
+     href="#"
+  >
+    <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle"
+         xmlns="http://www.w3.org/2000/svg"
+         viewbox="0 0 24 24"
+         aria-hidden="true"
+         height="36"
+         width="36"
+    >
+      <path d="M0 0h24v24H0z"
+            fill="none"
+      >
+      </path>
+      <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z">
+      </path>
+    </svg>
+    <span class="nhsuk-action-link__text">
+      Link
+    </span>
+  </a>
+</div>
+`;

stories/Components/__snapshots__/BackLink.stories.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/BackLink OpenInNewTabLink smoke-test 1`] = `
+<div class="nhsuk-back-link">
+  <a class="nhsuk-back-link__link"
+     href="/"
+     target="_blank"
+     rel="noopener noreferrer"
+  >
+    <svg class="nhsuk-icon nhsuk-icon__chevron-left"
+         xmlns="http://www.w3.org/2000/svg"
+         viewbox="0 0 24 24"
+         aria-hidden="true"
+         height="24"
+         width="24"
+    >
+      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z">
+      </path>
+    </svg>
+    Link
+  </a>
+</div>
+`;
+
+exports[`Components/BackLink StandardLink smoke-test 1`] = `
+<div class="nhsuk-back-link">
+  <a class="nhsuk-back-link__link"
+     href="/"
+  >
+    <svg class="nhsuk-icon nhsuk-icon__chevron-left"
+         xmlns="http://www.w3.org/2000/svg"
+         viewbox="0 0 24 24"
+         aria-hidden="true"
+         height="24"
+         width="24"
+    >
+      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z">
+      </path>
+    </svg>
+    Link
+  </a>
+</div>
+`;

stories/Components/__snapshots__/Breadcrumb.stories.tsx.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Breadcrumb OverrideAriaLabel smoke-test 1`] = `
+<nav class="nhsuk-breadcrumb"
+     aria-label="custom-aria-label"
+>
+  <div class="nhsuk-width-container">
+    <ol class="nhsuk-breadcrumb__list">
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/one"
+        >
+          Level One
+        </a>
+      </li>
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/two"
+        >
+          Level Two
+        </a>
+      </li>
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/three"
+        >
+          Level Three
+        </a>
+      </li>
+    </ol>
+    <p class="nhsuk-breadcrumb__back">
+      <a class="nhsuk-breadcrumb__backlink"
+         href="/level/three"
+      >
+        Back to Level Three
+      </a>
+    </p>
+  </div>
+</nav>
+`;
+
+exports[`Components/Breadcrumb Standard smoke-test 1`] = `
+<nav class="nhsuk-breadcrumb"
+     aria-label="Breadcrumb"
+>
+  <div class="nhsuk-width-container">
+    <ol class="nhsuk-breadcrumb__list">
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/one"
+        >
+          Level One
+        </a>
+      </li>
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/two"
+        >
+          Level Two
+        </a>
+      </li>
+      <li class="nhsuk-breadcrumb__item">
+        <a class="nhsuk-breadcrumb__link"
+           href="/level/three"
+        >
+          Level Three
+        </a>
+      </li>
+    </ol>
+    <p class="nhsuk-breadcrumb__back">
+      <a class="nhsuk-breadcrumb__backlink"
+         href="/level/three"
+      >
+        Back to Level Three
+      </a>
+    </p>
+  </div>
+</nav>
+`;

stories/Components/__snapshots__/Button.stories.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Button Disabled smoke-test 1`] = `
+<button class="nhsuk-button nhsuk-button--disabled"
+        disabled
+        aria-disabled="true"
+        type="submit"
+>
+  Disabled
+</button>
+`;
+
+exports[`Components/Button ForceAnchor smoke-test 1`] = `
+<a class="nhsuk-button"
+   role="button"
+   aria-disabled="false"
+   draggable="false"
+>
+  As an Anchor
+</a>
+`;
+
+exports[`Components/Button ForceButton smoke-test 1`] = `
+<button class="nhsuk-button"
+        aria-disabled="false"
+        type="submit"
+>
+  As a Button
+</button>
+`;
+
+exports[`Components/Button LinkButton smoke-test 1`] = `
+<a class="nhsuk-button"
+   role="button"
+   aria-disabled="false"
+   draggable="false"
+   href="/"
+>
+  As a Link
+</a>
+`;
+
+exports[`Components/Button Primary smoke-test 1`] = `
+<button class="nhsuk-button"
+        aria-disabled="false"
+        type="submit"
+>
+  Primary
+</button>
+`;
+
+exports[`Components/Button Reverse smoke-test 1`] = `
+<button class="nhsuk-button nhsuk-button--reverse"
+        aria-disabled="false"
+        type="submit"
+>
+  Reverse
+</button>
+`;
+
+exports[`Components/Button Secondary smoke-test 1`] = `
+<button class="nhsuk-button nhsuk-button--secondary"
+        aria-disabled="false"
+        type="submit"
+>
+  Secondary
+</button>
+`;