@ons/design-system 49.2.0 → 51.0.0

package/components/modal/modal.spec.js

@@ -0,0 +1,59 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_MODAL = {
+  title: 'Modal title',
+  body: 'Modal body text',
+  btnText: 'Modal button',
+};
+
+describe('script: modal', () => {
+  beforeEach(async () => {
+    const component = renderComponent('modal', EXAMPLE_MODAL);
+    const template = `
+      <div class="ons-page">
+        <button id="launcher" data-modal-id="dialog">Launcher</button> 
+        ${component}
+      </div>
+  `;
+    await setTestPage('/test', template);
+  });
+
+  describe('when the modal launcher is clicked', () => {
+    beforeEach(async () => {
+      await page.focus('#launcher');
+      await page.keyboard.press('Enter');
+    });
+
+    it('displays the modal', async () => {
+      const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+      expect(modalIsVisible).toBe(true);
+    });
+
+    it('has the correct body class added', async () => {
+      const bodyClassAddition = await page.$eval('body', node => node.classList.contains('ons-modal-overlay'));
+      expect(bodyClassAddition).toBe(true);
+    });
+
+    describe('when the modal close button is clicked', () => {
+      beforeEach(async () => {
+        await page.focus('.ons-js-modal-btn');
+        await page.keyboard.press('Enter');
+      });
+
+      it('hides the modal', async () => {
+        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        expect(modalIsVisible).toBe(false);
+      });
+
+      it('has the body class removed', async () => {
+        const bodyClassAddition = await page.$eval('body', node => node.classList.contains('ons-modal-overlay'));
+        expect(bodyClassAddition).toBe(false);
+      });
+
+      it('focuses the last active element', async () => {
+        const activeElementId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElementId).toBe('launcher');
+      });
+    });
+  });
+});

package/components/mutually-exclusive/_macro.njk

@@ -2,9 +2,11 @@
 {% macro onsMutuallyExclusive(params) %}
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+    {% from "components/radios/_macro.njk" import onsRadios %}
 
-    {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
+    {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
     {% set content = caller() %}
+    {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
 
     {% call onsFieldset({
         "id": params.id,
@@ -22,26 +24,41 @@
             {% if params.autosuggestResults is defined and params.autosuggestResults %}
                 {{ params.autosuggestResults | safe }}
             {% endif %}
-            <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
-                {{
-                    onsCheckbox({
-                        "id": params.checkbox.id,
-                        "name": params.checkbox.name,
-                        "value": params.checkbox.value,
-                        "checked": params.checkbox.checked,
-                        "classes": params.checkbox.classes,
-                        "attributes": params.checkbox.attributes,
-                        "deselectMessage": params.deselectMessage,
-                        "inputClasses": "ons-js-exclusive-checkbox",
-                        "label": {
-                            "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.checkbox.label.text,
-                            "description": params.checkbox.label.description
-                        }
-                    })
-                }}
-            </p>
-            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-checkbox-adjective="{{ params.deselectCheckboxAdjective }}"></span>
+            {% if exclusiveOptionsLength == 1 %}
+                <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    {{
+                        onsCheckbox({
+                            "id": params.exclusiveOptions[0].id,
+                            "name": params.exclusiveOptions[0].name,
+                            "value": params.exclusiveOptions[0].value,
+                            "checked": params.exclusiveOptions[0].checked,
+                            "classes": params.exclusiveOptions[0].classes,
+                            "attributes": params.exclusiveOptions[0].attributes,
+                            "deselectMessage": params.deselectMessage,
+                            "inputClasses": "ons-js-exclusive-option",
+                            "label": {
+                                "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.exclusiveOptions[0].label.text,
+                                "description": params.exclusiveOptions[0].label.description
+                            }
+                        })
+                    }}
+                </p>
+            {% elif exclusiveOptionsLength > 1 %}
+                <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    {{
+                        onsRadios({
+                            "dontWrap": true,
+                            "radios": params.exclusiveOptions,
+                            "inputClasses": "ons-js-exclusive-option",
+                            "name": "mutuallyExclusiveRadio",
+                            "deselectMessage": params.deselectMessage
+                        })
+                    }}
+                </p>
+            {% endif %}
+            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"></span>
         </div>
     {% endcall %}
 {% endmacro %}

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('');
+        });
+      });
+    });
+  });
+});