@ons/design-system 70.0.6 → 70.0.8

package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js

@@ -3,211 +3,211 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 const SCREEN_READER_TIMEOUT_DELAY = 300;
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
-  legend: 'What type of central heating do you have?',
-  checkboxesLabel: 'Select all that apply',
-  name: 'mutually-exclusive',
-  checkboxes: [
-    {
-      id: 'gas',
-      label: {
-        text: 'Gas',
-      },
-      value: 'gas',
-    },
-    {
-      id: 'electric',
-      label: {
-        text: 'Electric',
-      },
-      value: 'electric',
-    },
-    {
-      id: 'solid-fuel',
-      label: {
-        text: 'Solid fuel',
-      },
-      value: 'solid-fuel',
-    },
-    {
-      id: 'other-fuel',
-      label: {
-        text: 'Other',
-      },
-      value: 'other',
-      other: {
-        id: 'other-fuel-textbox',
-        name: 'other-fuel-answer',
-        label: {
-          text: 'Please specify',
+    legend: 'What type of central heating do you have?',
+    checkboxesLabel: 'Select all that apply',
+    name: 'mutually-exclusive',
+    checkboxes: [
+        {
+            id: 'gas',
+            label: {
+                text: 'Gas',
+            },
+            value: 'gas',
         },
-      },
-    },
-  ],
-  mutuallyExclusive: {
-    or: 'or',
-    deselectMessage: 'Selecting this will uncheck all other checkboxes',
-    deselectGroupAdjective: 'deselected',
-    deselectExclusiveOptionAdjective: 'deselected',
-    exclusiveOptions: [
-      {
-        id: 'no-central-heating',
-        label: {
-          text: 'No central heating',
+        {
+            id: 'electric',
+            label: {
+                text: 'Electric',
+            },
+            value: 'electric',
         },
-        value: 'no-central-heating',
-      },
-      {
-        id: 'dont-know',
-        label: {
-          text: 'Dont know',
+        {
+            id: 'solid-fuel',
+            label: {
+                text: 'Solid fuel',
+            },
+            value: 'solid-fuel',
+        },
+        {
+            id: 'other-fuel',
+            label: {
+                text: 'Other',
+            },
+            value: 'other',
+            other: {
+                id: 'other-fuel-textbox',
+                name: 'other-fuel-answer',
+                label: {
+                    text: 'Please specify',
+                },
+            },
         },
-        value: 'dont-know',
-      },
     ],
-  },
+    mutuallyExclusive: {
+        or: 'or',
+        deselectMessage: 'Selecting this will uncheck all other checkboxes',
+        deselectGroupAdjective: 'deselected',
+        deselectExclusiveOptionAdjective: 'deselected',
+        exclusiveOptions: [
+            {
+                id: 'no-central-heating',
+                label: {
+                    text: 'No central heating',
+                },
+                value: 'no-central-heating',
+            },
+            {
+                id: 'dont-know',
+                label: {
+                    text: 'Dont know',
+                },
+                value: 'dont-know',
+            },
+        ],
+    },
 };
 
 describe('script: mutually-exclusive', () => {
-  describe('checkboxes', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('checkboxes', EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS));
-    });
-
-    describe('Given the user has clicked multiple non-exclusive options', () => {
-      beforeEach(async () => {
-        await page.click('#gas');
-        await page.click('#electric');
-        await page.click('#other-fuel');
-        await page.type('#other-fuel-textbox', 'Biofuel');
-      });
-
-      describe('when the user clicks a mutually exclusive option', () => {
-        beforeEach(async () => {
-          await page.click('#dont-know');
-        });
-
-        it('then the mutually exclusive option is checked', async () => {
-          const isChecked = await page.$eval('#dont-know', (node) => node.checked);
-          expect(isChecked).toBe(true);
-        });
-
-        it('then the checkboxes are not checked', async () => {
-          expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel-textbox', (node) => node.value)).toBe('');
-        });
-
-        it('then the aria-live message should reflect the removed non exclusive options', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
-        });
-      });
-    });
-
-    describe('Given the user has clicked the mutually exclusive option', () => {
-      beforeEach(async () => {
-        await page.click('#dont-know');
-      });
-
-      describe('when the user clicks the non-exclusive options', () => {
-        beforeEach(async () => {
-          await page.click('#gas');
-          await page.click('#electric');
-          await page.click('#other-fuel');
-        });
-
-        it('then the expected checkboxes are checked', async () => {
-          expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
-          expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
-          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
-        });
-
-        it('then the exclusive options should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(false);
-        });
-
-        it('then the aria-live message should reflect the removed exclusive option', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('Dont know deselected.');
-        });
-
-        describe('and the user deselects an non-exclusive option', () => {
-          beforeEach(async () => {
-            await page.click('#electric');
-          });
-
-          it('the aria-live message should not be updated', async () => {
-            await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-            const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-            expect(alertText).toBe('Dont know deselected.');
-          });
-        });
-      });
-    });
-
-    describe('Given the user has not clicked the mutually exclusive option', () => {
-      describe('when the user clicks multiple non-exclusive options', () => {
+    describe('checkboxes', () => {
         beforeEach(async () => {
-          await page.click('#gas');
-          await page.click('#electric');
-          await page.click('#other-fuel');
-        });
-
-        it('then the expected checkboxes are checked', async () => {
-          expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
-          expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
-          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
-        });
-
-        it('then the exclusive options should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(false);
-        });
-
-        it('then the aria-live message should say nothing', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
-        });
-      });
-    });
-
-    describe('Given the user has not clicked any of the non-exclusive options', () => {
-      describe('when the user clicks the mutually exclusive option', () => {
-        beforeEach(async () => {
-          await page.click('#dont-know');
-        });
-
-        it('then the expected checkboxes are not checked', async () => {
-          expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
-        });
-
-        it('then the exclusive option should be checked', async () => {
-          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
-          expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(true);
-        });
-
-        it('then the aria-live message should say nothing', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
+            await setTestPage('/test', renderComponent('checkboxes', EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS));
+        });
+
+        describe('Given the user has clicked multiple non-exclusive options', () => {
+            beforeEach(async () => {
+                await page.click('#gas');
+                await page.click('#electric');
+                await page.click('#other-fuel');
+                await page.type('#other-fuel-textbox', 'Biofuel');
+            });
+
+            describe('when the user clicks a mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#dont-know');
+                });
+
+                it('then the mutually exclusive option is checked', async () => {
+                    const isChecked = await page.$eval('#dont-know', (node) => node.checked);
+                    expect(isChecked).toBe(true);
+                });
+
+                it('then the checkboxes are not checked', async () => {
+                    expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#other-fuel-textbox', (node) => node.value)).toBe('');
+                });
+
+                it('then the aria-live message should reflect the removed non exclusive options', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
+                });
+            });
+        });
+
+        describe('Given the user has clicked the mutually exclusive option', () => {
+            beforeEach(async () => {
+                await page.click('#dont-know');
+            });
+
+            describe('when the user clicks the non-exclusive options', () => {
+                beforeEach(async () => {
+                    await page.click('#gas');
+                    await page.click('#electric');
+                    await page.click('#other-fuel');
+                });
+
+                it('then the expected checkboxes are checked', async () => {
+                    expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
+                    expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
+                    expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
+                });
+
+                it('then the exclusive options should not be checked', async () => {
+                    expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(false);
+                });
+
+                it('then the aria-live message should reflect the removed exclusive option', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('Dont know deselected.');
+                });
+
+                describe('and the user deselects an non-exclusive option', () => {
+                    beforeEach(async () => {
+                        await page.click('#electric');
+                    });
+
+                    it('the aria-live message should not be updated', async () => {
+                        await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                        const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                        expect(alertText).toBe('Dont know deselected.');
+                    });
+                });
+            });
+        });
+
+        describe('Given the user has not clicked the mutually exclusive option', () => {
+            describe('when the user clicks multiple non-exclusive options', () => {
+                beforeEach(async () => {
+                    await page.click('#gas');
+                    await page.click('#electric');
+                    await page.click('#other-fuel');
+                });
+
+                it('then the expected checkboxes are checked', async () => {
+                    expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
+                    expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
+                    expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
+                });
+
+                it('then the exclusive options should not be checked', async () => {
+                    expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(false);
+                });
+
+                it('then the aria-live message should say nothing', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
+        });
+
+        describe('Given the user has not clicked any of the non-exclusive options', () => {
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#dont-know');
+                });
+
+                it('then the expected checkboxes are not checked', async () => {
+                    expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
+                });
+
+                it('then the exclusive option should be checked', async () => {
+                    expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+                    expect(await page.$eval('#dont-know', (node) => node.checked)).toBe(true);
+                });
+
+                it('then the aria-live message should say nothing', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
         });
-      });
     });
-  });
 });

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -3,121 +3,121 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 const SCREEN_READER_TIMEOUT_DELAY = 300;
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
-  id: 'currency',
-  type: 'number',
-  legend: 'What is your annual income before tax in 2018/19?',
-  width: '5',
-  label: {
-    text: 'Gross annual income',
-  },
-  prefix: {
-    title: 'Pounds',
-    text: '£',
-    id: 'currency-prefix',
-  },
-  mutuallyExclusive: {
-    or: 'Or',
-    deselectMessage: 'Selecting this will clear your inputted annual income',
-    deselectGroupAdjective: 'cleared',
-    deselectExclusiveOptionAdjective: 'deselected',
-    exclusiveOptions: [
-      {
-        id: 'currency-exclusive-option',
-        name: 'no-currency',
-        value: 'no-currency',
-        label: {
-          text: 'I prefer not to say',
-        },
-      },
-    ],
-  },
+    id: 'currency',
+    type: 'number',
+    legend: 'What is your annual income before tax in 2018/19?',
+    width: '5',
+    label: {
+        text: 'Gross annual income',
+    },
+    prefix: {
+        title: 'Pounds',
+        text: '£',
+        id: 'currency-prefix',
+    },
+    mutuallyExclusive: {
+        or: 'Or',
+        deselectMessage: 'Selecting this will clear your inputted annual income',
+        deselectGroupAdjective: 'cleared',
+        deselectExclusiveOptionAdjective: 'deselected',
+        exclusiveOptions: [
+            {
+                id: 'currency-exclusive-option',
+                name: 'no-currency',
+                value: 'no-currency',
+                label: {
+                    text: 'I prefer not to say',
+                },
+            },
+        ],
+    },
 };
 
 describe('script: mutually-exclusive', () => {
-  describe('number input', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS));
-    });
-
-    describe('Given the user populated the number input', () => {
-      beforeEach(async () => {
-        await page.type('#currency', '25000');
-      });
-
-      describe('when the user clicks the mutually exclusive option', () => {
+    describe('number input', () => {
         beforeEach(async () => {
-          await page.click('#currency-exclusive-option');
-        });
-
-        it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(true);
+            await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS));
         });
 
-        it('then the number input should be cleared', async () => {
-          const inputValue = await page.$eval('#currency', (node) => node.value);
-          expect(inputValue).toBe('');
+        describe('Given the user populated the number input', () => {
+            beforeEach(async () => {
+                await page.type('#currency', '25000');
+            });
+
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#currency-exclusive-option');
+                });
+
+                it('then the mutually exclusive option should be checked', async () => {
+                    const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(true);
+                });
+
+                it('then the number input should be cleared', async () => {
+                    const inputValue = await page.$eval('#currency', (node) => node.value);
+                    expect(inputValue).toBe('');
+                });
+
+                it('then the aria alert should tell the user that the number input has been cleared', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('Gross annual income cleared.');
+                });
+            });
         });
 
-        it('then the aria alert should tell the user that the number input has been cleared', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('Gross annual income cleared.');
-        });
-      });
-    });
-
-    describe('Given the user has checked the mutually exclusive exclusive option', () => {
-      beforeEach(async () => {
-        await page.click('#currency-exclusive-option');
-      });
+        describe('Given the user has checked the mutually exclusive exclusive option', () => {
+            beforeEach(async () => {
+                await page.click('#currency-exclusive-option');
+            });
 
-      describe('when the user populates the number input', () => {
-        beforeEach(async () => {
-          await page.type('#currency', '25000');
-        });
+            describe('when the user populates the number input', () => {
+                beforeEach(async () => {
+                    await page.type('#currency', '25000');
+                });
 
-        it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(false);
-        });
+                it('then the exclusive option should be unchecked', async () => {
+                    const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(false);
+                });
 
-        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('I prefer not to say deselected.');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('I prefer not to say deselected.');
+                });
+            });
         });
-      });
-    });
 
-    describe('Given the user has not populated the number input or checked the exclusive option', () => {
-      describe('when the user populates the number input', () => {
-        beforeEach(async () => {
-          await page.type('#currency', '25000');
-        });
+        describe('Given the user has not populated the number input or checked the exclusive option', () => {
+            describe('when the user populates the number input', () => {
+                beforeEach(async () => {
+                    await page.type('#currency', '25000');
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
-        });
-      });
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
 
-      describe('when the user clicks the mutually exclusive option', () => {
-        beforeEach(async () => {
-          await page.click('#currency-exclusive-option');
-        });
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#currency-exclusive-option');
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
         });
-      });
     });
-  });
 });