For stories not specifically testing id and name behaviour, we can se…

…t the id and/or name to stop autoID generation.
NHSDigital · Jan 19, 2024 · 53ac95c · 53ac95c
1 parent 424d98c
commit 53ac95c
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 48 deletions.
diff --git a/stories/Components/Checkboxes.stories.tsx b/stories/Components/Checkboxes.stories.tsx
@@ -33,7 +33,6 @@ import { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof Checkboxes> = {
   title: 'Components/Checkboxes',
   component: Checkboxes,
-  tags: ['no-test'],
 };
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
@@ -62,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"
@@ -177,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
@@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof Radios> = {
   title: 'Components/Radios',
   component: Radios,
-  tags: ['no-test'],
 };
 export default meta;
 type Story = StoryObj<typeof Radios>;
@@ -159,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."
@@ -194,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."
@@ -206,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
@@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
   component: Select,
-  tags: ['no-test'],
 };
 export default meta;
 type Story = StoryObj<typeof Select>;
@@ -28,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>
@@ -41,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>
@@ -66,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
@@ -54,7 +54,6 @@ export const TextareaWithErrorBoolean: Story = {
 };
 
 export const TextareaWithErrorString: Story = {
-  tags: ['no-test'],
   render: function TextareaWithErrorStringRender() {
     const [error, setError] = useState<string>('You must provide an explanation');
     return (
@@ -66,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__/Checkboxes.stories.tsx.snap b/stories/Components/__snapshots__/Checkboxes.stories.tsx.snap
@@ -309,15 +309,15 @@ exports[`Components/Checkboxes WithErrorString smoke-test 1`] = `
 </div>
 <div class="nhsuk-form-group">
   <label class="nhsuk-label"
-         id="input_71k7g--label"
-         for="input_71k7g"
+         id="error-value--label"
+         for="error-value"
   >
     Error Value
   </label>
   <input class="nhsuk-input"
-         aria-labelledby="input_71k7g--label"
-         name="input_71k7g"
-         id="input_71k7g"
+         aria-labelledby="error-value--label"
+         name="error-value"
+         id="error-value"
          type="text"
          value="Please select an option"
   >
@@ -334,7 +334,7 @@ exports[`Components/Checkboxes WithHintText smoke-test 1`] = `
     </legend>
     <div class="nhsuk-form-group">
       <div class="nhsuk-checkboxes"
-           id="checkboxes_1oqwu"
+           id="sign-in"
       >
         <div class="nhsuk-checkboxes__item">
           <input class="nhsuk-checkboxes__input"

diff --git a/stories/Components/__snapshots__/Radios.stories.tsx.snap b/stories/Components/__snapshots__/Radios.stories.tsx.snap
@@ -231,13 +231,13 @@ exports[`Components/Radios RadiosWithErrorBoolean smoke-test 1`] = `
     </legend>
     <div class="nhsuk-form-group nhsuk-form-group--error">
       <div class="nhsuk-hint"
-           id="radios_zsg9m--hint"
+           id="example--hint"
       >
         This includes changing your last name or spelling your name differently.
       </div>
       <div class="nhsuk-radios"
-           id="radios_zsg9m"
-           aria-describedby="radios_zsg9m--hint"
+           id="example"
+           aria-describedby="example--hint"
       >
         <div class="nhsuk-radios__item">
           <input class="nhsuk-radios__input"
@@ -290,12 +290,12 @@ exports[`Components/Radios RadiosWithErrorString smoke-test 1`] = `
     </legend>
     <div class="nhsuk-form-group nhsuk-form-group--error">
       <div class="nhsuk-hint"
-           id="radios_r2a90--hint"
+           id="example--hint"
       >
         This includes changing your last name or spelling your name differently.
       </div>
       <span class="nhsuk-error-message"
-            id="radios_r2a90--error-message"
+            id="example--error-message"
             role="alert"
       >
         <span class="nhsuk-u-visually-hidden">
@@ -304,8 +304,8 @@ exports[`Components/Radios RadiosWithErrorString smoke-test 1`] = `
         Please select an option
       </span>
       <div class="nhsuk-radios"
-           id="radios_r2a90"
-           aria-describedby="radios_r2a90--hint"
+           id="example"
+           aria-describedby="example--hint"
       >
         <div class="nhsuk-radios__item">
           <input class="nhsuk-radios__input"
@@ -344,8 +344,8 @@ exports[`Components/Radios RadiosWithErrorString smoke-test 1`] = `
 </div>
 <div class="nhsuk-form-group">
   <input class="nhsuk-input"
-         name="input_gmf03"
-         id="input_gmf03"
+         name="error-input"
+         id="error-input"
          type="text"
          value="Please select an option"
   >

diff --git a/stories/Components/__snapshots__/Select.stories.tsx.snap b/stories/Components/__snapshots__/Select.stories.tsx.snap
@@ -3,15 +3,15 @@
 exports[`Components/Select SelectWithErrorBoolean smoke-test 1`] = `
 <div class="nhsuk-form-group nhsuk-form-group--error">
   <label class="nhsuk-label"
-         id="select_h9ihn--label"
-         for="select_h9ihn"
+         id="error-boolean--label"
+         for="error-boolean"
   >
     Label text goes here
   </label>
   <select class="nhsuk-select nhsuk-select--error"
-          aria-labelledby="select_h9ihn--label"
-          name="select_h9ihn"
-          id="select_h9ihn"
+          aria-labelledby="error-boolean--label"
+          name="error-boolean"
+          id="error-boolean"
   >
     <option value="1">
       NHS.UK frontend option 1
@@ -35,13 +35,13 @@ exports[`Components/Select SelectWithErrorBoolean smoke-test 1`] = `
 exports[`Components/Select SelectWithErrorString smoke-test 1`] = `
 <div class="nhsuk-form-group nhsuk-form-group--error">
   <label class="nhsuk-label"
-         id="select_ae0zc--label"
-         for="select_ae0zc"
+         id="error-string--label"
+         for="error-string"
   >
     Label text goes here
   </label>
   <span class="nhsuk-error-message"
-        id="select_ae0zc--error-message"
+        id="error-string--error-message"
         role="alert"
   >
     <span class="nhsuk-u-visually-hidden">
@@ -50,9 +50,9 @@ exports[`Components/Select SelectWithErrorString smoke-test 1`] = `
     Error message goes here
   </span>
   <select class="nhsuk-select nhsuk-select--error"
-          aria-labelledby="select_ae0zc--label"
-          name="select_ae0zc"
-          id="select_ae0zc"
+          aria-labelledby="error-string--label"
+          name="error-string"
+          id="error-string"
   >
     <option value="1">
       NHS.UK frontend option 1
@@ -67,8 +67,8 @@ exports[`Components/Select SelectWithErrorString smoke-test 1`] = `
 </div>
 <div class="nhsuk-form-group">
   <input class="nhsuk-input"
-         name="input_1txv8"
-         id="input_1txv8"
+         name="error-string-input"
+         id="error-string-input"
          type="text"
          value="Error message goes here"
   >
@@ -78,21 +78,21 @@ exports[`Components/Select SelectWithErrorString smoke-test 1`] = `
 exports[`Components/Select SelectWithHintText smoke-test 1`] = `
 <div class="nhsuk-form-group">
   <label class="nhsuk-label"
-         id="select_3twao--label"
-         for="select_3twao"
+         id="with-hint-text--label"
+         for="with-hint-text"
   >
     Label text goes here
   </label>
   <div class="nhsuk-hint"
-       id="select_3twao--hint"
+       id="with-hint-text--hint"
   >
     Hint text goes here
   </div>
   <select class="nhsuk-select"
-          aria-describedby="select_3twao--hint"
-          aria-labelledby="select_3twao--label"
-          name="select_3twao"
-          id="select_3twao"
+          aria-describedby="with-hint-text--hint"
+          aria-labelledby="with-hint-text--label"
+          name="with-hint-text"
+          id="with-hint-text"
   >
     <option value="1">
       NHS.UK frontend option 1

diff --git a/stories/Components/__snapshots__/Textarea.stories.tsx.snap b/stories/Components/__snapshots__/Textarea.stories.tsx.snap
@@ -100,8 +100,8 @@ exports[`Components/Textarea TextareaWithErrorString smoke-test 1`] = `
 </div>
 <div class="nhsuk-form-group">
   <input class="nhsuk-input"
-         name="input_6qfuz"
-         id="input_6qfuz"
+         name="no-ni-reason-input"
+         id="no-ni-reason-input"
          type="text"
          value="You must provide an explanation"
   >