NHSDigital · KaiSpencer · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 19, 2024
diff --git a/.github/workflows/storybook-tests.yml b/.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"
diff --git a/.gitignore b/.gitignore
@@ -113,3 +113,5 @@ storybook-static/
 
 # IDEA files
 .idea/
+
+*__diff_output__*
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -0,0 +1,24 @@
+import { TestRunnerConfig } from '@storybook/test-runner';
+
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const config: TestRunnerConfig = {
+  tags: {
+    /**
+     * Any Story can be skipped by adding the `no-test` tag to it.
+     * This is primaraily used for stories that generate dynamic id's as the snapshot will fail.
+     */
+    skip: ['no-test'],
+  },
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postVisit(page) {
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    if (!innerHTML) throw new Error('No innerHTML found');
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/package.json b/package.json
@@ -10,22 +10,31 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.19.6",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@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 +56,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 +67,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 +92,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",

diff --git a/stories/Components/Checkboxes.stories.tsx b/stories/Components/Checkboxes.stories.tsx
@@ -61,7 +61,7 @@ export const WithHintText: Story = {
   render: (args) => (
     <Fieldset>
       <Fieldset.Legend isPageHeading>How do you want to sign in?</Fieldset.Legend>
-      <Checkboxes>
+      <Checkboxes id="sign-in">
         <Checkboxes.Box
           id="government-gateway"
           name="gateway"
@@ -176,6 +176,7 @@ export const WithErrorString: Story = {
         <Input
           label="Error Value"
           value={error}
+          id="error-value"
           onChange={(e) => setError(e.currentTarget.value)}
         />
       </>

diff --git a/stories/Components/Radios.stories.tsx b/stories/Components/Radios.stories.tsx
@@ -158,6 +158,7 @@ export const RadiosWithErrorBoolean: Story = {
         <Fieldset>
           <Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
           <Radios
+            id="example"
             name="example"
             error={error}
             hint="This includes changing your last name or spelling your name differently."
@@ -193,6 +194,7 @@ export const RadiosWithErrorString: Story = {
         <Fieldset>
           <Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
           <Radios
+            id="example"
             name="example"
             error={error}
             hint="This includes changing your last name or spelling your name differently."
@@ -205,7 +207,7 @@ export const RadiosWithErrorString: Story = {
             </Radios.Radio>
           </Radios>
         </Fieldset>
-        <Input value={error} onChange={(e) => setError(e.currentTarget.value)} />
+        <Input id="error-input" value={error} onChange={(e) => setError(e.currentTarget.value)} />
       </>
     );
   },

diff --git a/stories/Components/Select.stories.tsx b/stories/Components/Select.stories.tsx
@@ -27,7 +27,7 @@ export const Standard: Story = {
 
 export const SelectWithHintText: Story = {
   render: (args) => (
-    <Select label="Label text goes here" hint="Hint text goes here">
+    <Select label="Label text goes here" hint="Hint text goes here" id="with-hint-text">
       <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
       <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
       <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -40,7 +40,7 @@ export const SelectWithErrorBoolean: Story = {
     const [error, setError] = React.useState<boolean>(true);
     return (
       <>
-        <Select error={error} label="Label text goes here">
+        <Select error={error} label="Label text goes here" id="error-boolean">
           <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
           <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
           <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -65,12 +65,16 @@ export const SelectWithErrorString: Story = {
     const [error, setError] = React.useState<string>('Error message goes here');
     return (
       <>
-        <Select error={error} label="Label text goes here">
+        <Select error={error} label="Label text goes here" id="error-string">
           <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
           <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
           <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
         </Select>
-        <Input onChange={(e) => setError(e.currentTarget.value)} value={error} />
+        <Input
+          id="error-string-input"
+          onChange={(e) => setError(e.currentTarget.value)}
+          value={error}
+        />
       </>
     );
   },

diff --git a/stories/Components/Textarea.stories.tsx b/stories/Components/Textarea.stories.tsx
@@ -65,7 +65,12 @@ export const TextareaWithErrorString: Story = {
           rows={5}
           label="Why can&#39;t you provide a National Insurance number?"
         />
-        <Input onChange={(e) => setError(e.currentTarget.value)} value={error} />
+        <Input
+          id="no-ni-reason-input"
+          name="no-ni-reason-input"
+          onChange={(e) => setError(e.currentTarget.value)}
+          value={error}
+        />
       </>
     );
   },

diff --git a/stories/Components/__snapshots__/ActionLink.stories.tsx.snap b/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>
+`;
diff --git a/stories/Components/__snapshots__/BackLink.stories.tsx.snap b/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>
+`;
diff --git a/stories/Components/__snapshots__/Breadcrumb.stories.tsx.snap b/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>
+`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -113,3 +113,5 @@ storybook-static/

		# IDEA files
		.idea/

		__diff_output__