@ons/design-system 50.0.1 → 51.0.0

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

@@ -0,0 +1,182 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_CHECKBOX_OPTION = {
+  id: 'example-option-id',
+  name: 'example-option-name',
+  value: 'example-option-value',
+  checked: false,
+  classes: 'extra-option-class',
+  attributes: {
+    'data-attribute': 'Example attribute',
+  },
+  label: {
+    text: 'Example option text',
+    description: 'Example option description',
+  },
+};
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE = {
+  id: 'example-mutually-exclusive',
+  classes: 'extra-class',
+  exclusiveOptions: [EXAMPLE_CHECKBOX_OPTION],
+  or: 'Or',
+  deselectMessage: 'Selecting this will uncheck all other checkboxes',
+  deselectGroupAdjective: 'Group was unselected',
+  deselectExclusiveOptionAdjective: 'Exclusive option was unselected',
+  legend: 'Legend text',
+  legendClasses: 'extra-legend-class',
+  description: 'An example description.',
+  attributes: { a: 42 },
+  dontWrap: true,
+  legendIsQuestionTitle: true,
+  error: {
+    id: 'file-error',
+    text: 'Select a file that is an XLS, XLSX or PDF',
+  },
+};
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS = {
+  ...EXAMPLE_MUTUALLY_EXCLUSIVE,
+  exclusiveOptions: [
+    {
+      id: 'house',
+      label: {
+        text: 'House or bungalow',
+      },
+      value: 'house',
+    },
+    {
+      id: 'flat',
+      label: {
+        text: 'Flat, maisonette or apartment',
+      },
+      value: 'flat',
+    },
+  ],
+};
+
+const FAKE_FIELD = '<span id="fake-field">Fake field</span>';
+
+describe('macro: mutually-exclusive', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('renders `fieldset` component with the expected parameters', () => {
+    const faker = templateFaker();
+    const fieldsetSpy = faker.spy('fieldset');
+
+    faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
+
+    expect(fieldsetSpy.occurrences).toContainEqual({
+      id: 'example-mutually-exclusive',
+      classes: 'extra-class',
+      legend: 'Legend text',
+      legendClasses: 'extra-legend-class',
+      description: 'An example description.',
+      attributes: EXAMPLE_MUTUALLY_EXCLUSIVE.attributes,
+      dontWrap: true,
+      legendIsQuestionTitle: true,
+      error: EXAMPLE_MUTUALLY_EXCLUSIVE.error,
+    });
+  });
+
+  it('renders inner field via `caller` mechanism', () => {
+    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+
+    expect($('.ons-mutually-exclusive > #fake-field').length).toBe(1);
+  });
+
+  it('renders `autosuggestResults` after the field', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'mutually-exclusive',
+        {
+          ...EXAMPLE_MUTUALLY_EXCLUSIVE,
+          autosuggestResults: '<span id="autosuggest-results"></span>',
+        },
+        FAKE_FIELD,
+      ),
+    );
+
+    expect($('#fake-field + #autosuggest-results').length).toBe(1);
+  });
+
+  it('renders `deselectGroupAdjective` and `deselectExclusiveOptionAdjective` for the alert', () => {
+    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+
+    expect($('.ons-js-exclusive-alert').attr('data-group-adjective')).toBe('Group was unselected');
+    expect($('.ons-js-exclusive-alert').attr('data-option-adjective')).toBe('Exclusive option was unselected');
+  });
+
+  describe('mode: with single checkbox', () => {
+    it('renders visually hidden "Or" label', () => {
+      const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+
+      expect(
+        $('.ons-checkboxes__label')
+          .text()
+          .trim(),
+      ).toBe('Or');
+    });
+
+    it('renders a checkbox component with the expected parameters', () => {
+      const faker = templateFaker();
+      const checkboxSpy = faker.spy('checkboxes/checkbox');
+
+      faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
+
+      expect(checkboxSpy.occurrences).toContainEqual({
+        id: 'example-option-id',
+        name: 'example-option-name',
+        value: 'example-option-value',
+        checked: false,
+        classes: 'extra-option-class',
+        attributes: {
+          'data-attribute': 'Example attribute',
+        },
+        deselectMessage: 'Selecting this will uncheck all other checkboxes',
+        inputClasses: 'ons-js-exclusive-option',
+        label: {
+          text: '<span class="ons-u-vh">Or, </span> Example option text',
+          description: 'Example option description',
+        },
+      });
+    });
+  });
+
+  describe('mode: with multiple radio options', () => {
+    it('renders visually hidden "Or" label', () => {
+      const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD));
+
+      expect(
+        $('.ons-checkboxes__label')
+          .text()
+          .trim(),
+      ).toBe('Or');
+    });
+
+    it('renders a radios component with the expected parameters', () => {
+      const faker = templateFaker();
+      const radiosSpy = faker.spy('radios');
+
+      faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD);
+
+      expect(radiosSpy.occurrences).toContainEqual({
+        dontWrap: true,
+        radios: EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS.exclusiveOptions,
+        inputClasses: 'ons-js-exclusive-option',
+        name: 'mutuallyExclusiveRadio',
+        deselectMessage: 'Selecting this will uncheck all other checkboxes',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,203 @@
+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',
+        },
+      },
+    },
+  ],
+  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',
+      },
+    ],
+  },
+};
+
+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 the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#no-central-heating');
+        });
+
+        it('then the mutually exclusive option is checked', async () => {
+          const isChecked = await page.$eval('#no-central-heating', 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('#no-central-heating');
+      });
+
+      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 option should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', 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('No central heating 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('No central heating 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 option should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', 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('#no-central-heating');
+        });
+
+        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(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.date.spec.js

@@ -0,0 +1,142 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_PARAMS = {
+  id: 'date-mutually-exclusive',
+  legendOrLabel: 'When did you leave your last paid job?',
+  description: 'For example, 31 3 2018',
+  day: {
+    label: {
+      text: 'Day',
+    },
+    name: 'day-exclusive',
+  },
+  month: {
+    label: {
+      text: 'Month',
+    },
+    name: 'month-exclusive',
+  },
+  year: {
+    label: {
+      text: 'Year',
+    },
+    name: 'year-exclusive',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'date-exclusive-exclusive-option',
+        name: 'no-paid-job',
+        value: 'no-paid-job',
+        label: {
+          text: 'I have never had a paid job',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('date', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('date-input', EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_PARAMS));
+    });
+
+    describe('Given the user populated the date input', () => {
+      beforeEach(async () => {
+        await page.type('#date-mutually-exclusive-day', '14');
+        await page.type('#date-mutually-exclusive-month', '12');
+        await page.type('#date-mutually-exclusive-year', '2018');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#date-exclusive-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the date input should be cleared', async () => {
+          const dayValue = await page.$eval('#date-mutually-exclusive-day', node => node.value);
+          expect(dayValue).toBe('');
+          const monthValue = await page.$eval('#date-mutually-exclusive-month', node => node.value);
+          expect(monthValue).toBe('');
+          const yearValue = await page.$eval('#date-mutually-exclusive-year', node => node.value);
+          expect(yearValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the date 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('Day cleared. Month cleared. Year cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#date-exclusive-exclusive-option');
+      });
+
+      describe('when the user populates the dateInput', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-day', '14');
+          await page.type('#date-mutually-exclusive-month', '12');
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-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);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I have never had a paid job deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the date input or checked the exclusive option', () => {
+      describe('when the user populates the date input', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-day', '14');
+          await page.type('#date-mutually-exclusive-month', '12');
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        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('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#date-exclusive-exclusive-option');
+        });
+
+        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('');
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,141 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
+  id: 'address-duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'If you have lived at this address for less than a year then enter 0 into the year input.',
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    suffix: {
+      text: 'Years',
+    },
+    attributes: {
+      min: 0,
+      max: 100,
+    },
+  },
+  field2: {
+    id: 'address-duration-months',
+    name: 'address-duration-months',
+    suffix: {
+      text: 'Months',
+    },
+    attributes: {
+      min: 0,
+      max: 11,
+    },
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'duration-exclusive-option',
+        name: 'no-duration',
+        value: 'no-duration',
+        label: {
+          text: 'I have not moved in to this address yet',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('duration', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('duration', EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS));
+    });
+
+    describe('Given the user populated the duration', () => {
+      beforeEach(async () => {
+        await page.type('#address-duration-years', '2');
+        await page.type('#address-duration-months', '4');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#duration-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the inputs should be cleared', async () => {
+          const yearsValue = await page.$eval('#address-duration-years', node => node.value);
+          expect(yearsValue).toBe('');
+          const monthsValue = await page.$eval('#address-duration-months', node => node.value);
+          expect(monthsValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the inputs have 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('Years cleared. Months cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#duration-exclusive-option');
+      });
+
+      describe('when the user populates the duration fields', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+          await page.type('#address-duration-months', '4');
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#duration-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);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I have not moved in to this address yet deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the duration inputs or checked the exclusive option', () => {
+      describe('when the user populates the duration inputs', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+          await page.type('#address-duration-months', '4');
+        });
+
+        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('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        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('');
+        });
+      });
+    });
+  });
+});