@ons/design-system 49.2.0 → 51.0.0

package/README.md

@@ -106,38 +106,60 @@ Mixed markdown files are easier to maintain when each section that is fenced wit
 
 ## Testing
 
-To test locally ensure you've followed all the steps above to install dependencies. You can have three options:
+This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
 
-### Run tests locally in watch mode
+```bash
+yarn test [jest-args]
+```
 
-This will watch your test files and JavaScript for changes and rerun the test suite each time a change is detected.
+### Run macro, unit and in-browser interaction tests
 
-_Note_: This will only run tests on the ES6 bundle.
+Macros and units are tested in the Node execution environment whereas interaction tests are ran in the web browser using [puppeteer](https://developer.chrome.com/docs/puppeteer/).
 
 ```bash
-yarn test:local
+yarn test
 ```
 
-### Run ES6 and ES5 bundle tests
+### Run specific tests
+
+Tests can be filtered using the [`testNamePattern`](https://jestjs.io/docs/cli#--testnamepatternregex) jest argument.
 
-Running this will run the test suite twice, once against the ES6 bundle and again against the ES5 bundle. However, as local tests only run on evergreen browsers it will be unlikely that you see the ES5 testing fail if the ES6 testing passes.
+To run all macro tests:
 
 ```bash
-yarn test
+yarn test --testNamePattern="macro:"
+```
+
+To run tests associated with a specific macro:
+
+```bash
+yarn test --testNamePattern="macro: button"
 ```
 
-### Run tests in BrowserStack
+To run all axe tests:
 
-All unit tests are automatically cross browser tested in [BrowserStack](https://www.browserstack.com) by [TravisCI](https://travis-ci.org/ONSdigital/design-system) when a pull request is created or if a change is pushed to an existing pull request.
+```bash
+yarn test --testNamePattern="axe"
+```
 
-You can also run cross browser testing in BrowserStack manually against your local branch by running this command:
+### Run tests locally in watch mode
 
-_Note_: You will need to set your `BROWSER_STACK_USERNAME` and `BROWSER_STACK_ACCESS_KEY` environment variables to allow authentication with BrowserStack. Username and access keys can be found under _Automate_ on the [BrowserStack settings page](https://www.browserstack.com/accounts/settings).
+This will watch for changed files based on git uncommitted files.
 
 ```bash
-yarn test:browserstack
+yarn test --watch
 ```
 
+_Note_: This command is of limited use since JavaScript and SCSS files will only be processed and bundled once each time the above command is ran. This command is only useful when working on JavaScript units that can be tested without bundling.
+
+### Testing tips
+
+It is sometimes useful to adjust the following settings when writing tests or diagnosing issues:
+
+- `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await page.waitForTimeout(100000)` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
+
+- `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
+
 ## Run visual regression tests
 
 To run visual regression (VR) tests on pull requests using our VR testing tool [percy.io](https://percy.io) you must include `[test-visual]` in your commit message e.g. `git commit -m "Update button border width [test-visual]"`. This prevents unnecessary builds and saves the limited quota we have available.

package/components/access-code/_macro.njk

@@ -28,7 +28,7 @@
 
     {% if params.error is not defined %}
         {% call onsPanel({
-                "classes": "ons-u-mb-s"
+                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes is defined and params.classes)
             })
         %}
             {{ content | safe }}

package/components/access-code/_macro.spec.js

@@ -0,0 +1,162 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+describe('macro: access-code', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        id: 'example-access-code',
+        label: {
+          text: 'Enter your 16-character access code',
+          description: 'Keep this code safe. You will need to enter it every time you access your study',
+        },
+      }),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        id: 'example-id',
+      }),
+    );
+
+    expect($('#example-id').length).toBe(1);
+  });
+
+  it('has the provided `name` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        name: 'special-name',
+      }),
+    );
+
+    expect($('input').attr('name')).toBe('special-name');
+  });
+
+  it('has a default `type` of "text"', () => {
+    const $ = cheerio.load(renderComponent('access-code'));
+
+    expect($('input').attr('type')).toBe('text');
+  });
+
+  it('has the provided `type` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        type: 'number',
+      }),
+    );
+
+    expect($('input').attr('inputmode')).toBe('numeric');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-panel--info').hasClass('extra-class')).toBe(true);
+    expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has provided label text and description', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        label: {
+          text: 'Enter your 16-character access code',
+          description: 'Keep this code safe. You will need to enter it every time you access your study',
+        },
+      }),
+    );
+
+    expect($('.ons-label--with-description').text()).toBe('Enter your 16-character access code');
+    expect($('.ons-input--with-description').text()).toBe(
+      'Keep this code safe. You will need to enter it every time you access your study',
+    );
+  });
+
+  it('has provided maximum length attribute including spaces required for groupSize', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        maxlength: 6,
+        groupSize: 3,
+      }),
+    );
+
+    expect($('input').attr('maxlength')).toBe('7');
+  });
+
+  it('has provided group size attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        groupSize: 2,
+      }),
+    );
+
+    expect($('input').attr('data-group-size')).toBe('2');
+  });
+
+  it('has autocomplete disabled on its text input', () => {
+    const $ = cheerio.load(renderComponent('access-code'));
+
+    expect($('input').attr('autocomplete')).toBe('off');
+  });
+
+  it('has automatic capitalization on its text input', () => {
+    const $ = cheerio.load(renderComponent('access-code'));
+
+    expect($('input').attr('autocapitalize')).toBe('characters');
+  });
+
+  it('has provided security message text', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        securityMessage: 'Example security message.',
+      }),
+    );
+
+    expect(
+      $('.ons-panel__body')
+        .text()
+        .trim(),
+    ).toBe('Example security message.');
+  });
+
+  it('has provided `postTextBoxLinkText` and `postTextBoxLinkUrl`', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        postTextboxLinkText: 'Example link text',
+        postTextboxLinkUrl: '#3',
+      }),
+    );
+
+    expect(
+      $('a[href="#3"]')
+        .text()
+        .trim(),
+    ).toBe('Example link text');
+  });
+
+  it('has provided `error` output', () => {
+    const $ = cheerio.load(
+      renderComponent('access-code', {
+        error: {
+          id: 'uac-error',
+          text: 'Enter an access code',
+        },
+      }),
+    );
+
+    expect($('#uac-error').length).toBe(1);
+    expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
+  });
+});

package/components/access-code/uac.spec.js

@@ -0,0 +1,26 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+describe('script: access-code', () => {
+  describe('Data grouping', () => {
+    it('correctly formats user input with spaces', async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('access-code', {
+          id: 'test-access-code',
+          groupSize: 5,
+        }),
+      );
+
+      await page.focus('#test-access-code');
+      await page.keyboard.type('1234');
+
+      const valueSample1 = await page.$eval('#test-access-code', element => element.value);
+      expect(valueSample1).toBe('1234');
+
+      await page.keyboard.type('5678');
+
+      const valueSample2 = await page.$eval('#test-access-code', element => element.value);
+      expect(valueSample2).toBe('12345 678');
+    });
+  });
+});

package/components/accordion/_macro.spec.js

@@ -0,0 +1,224 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
+  id: 'accordion-identifier',
+  itemsList: [
+    {
+      title: 'Title for item 1',
+      content: 'Content for item 1',
+    },
+    {
+      title: 'Title for item 2',
+      content: 'Content for item 2',
+    },
+  ],
+};
+
+const EXAMPLE_ACCORDION = {
+  ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+  allButton: {
+    open: 'Open label',
+    close: 'Close label',
+  },
+};
+
+describe('macro: accordion', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+    expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+    expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+  });
+
+  describe('item', () => {
+    it('has provided variant style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+          variants: ['variant-a', 'variant-b'],
+        }),
+      );
+
+      expect($('.ons-collapsible--variant-a').length).toBe(2);
+      expect($('.ons-collapsible--variant-b').length).toBe(2);
+    });
+
+    it('has provided title text', () => {
+      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+      const titleText = $('.ons-collapsible__title')
+        .first()
+        .text()
+        .trim();
+      expect(titleText).toBe('Title for item 1');
+    });
+
+    it('has title with provided tag override', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          itemsList: [
+            {
+              title: 'Title for item 1',
+              titleTag: 'h5',
+              content: 'Content for item 1',
+            },
+          ],
+        }),
+      );
+
+      const titleTag = $('.ons-collapsible__title')[0].tagName;
+      expect(titleTag).toBe('h5');
+    });
+
+    it('has provided content text', () => {
+      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+      const titleText = $('.ons-collapsible__content')
+        .first()
+        .text()
+        .trim();
+      expect(titleText).toBe('Content for item 1');
+    });
+
+    it('outputs a button with the expected class', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          itemsList: [
+            {
+              title: 'Title for item 1',
+              button: {
+                open: 'Open label',
+                close: 'Close label',
+              },
+            },
+            {
+              title: 'Title for item 2',
+              button: {
+                open: 'Open label',
+                close: 'Close label',
+              },
+            },
+          ],
+        }),
+      );
+
+      expect($('button.ons-js-collapsible-button').length).toBe(2);
+    });
+
+    it('has additionally provided `attributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          itemsList: [
+            {
+              title: 'Title for item 1',
+              attributes: {
+                a: 123,
+                b: 456,
+              },
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-collapsible').attr('a')).toBe('123');
+      expect($('.ons-collapsible').attr('b')).toBe('456');
+    });
+
+    it('has additionally provided `headingAttributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          itemsList: [
+            {
+              title: 'Title for item 1',
+              headingAttributes: {
+                a: 123,
+                b: 456,
+              },
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-collapsible__heading').attr('a')).toBe('123');
+      expect($('.ons-collapsible__heading').attr('b')).toBe('456');
+    });
+
+    it('has additionally provided `contentAttributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          itemsList: [
+            {
+              title: 'Title for item 1',
+              content: 'Content for item 1',
+              contentAttributes: {
+                a: 123,
+                b: 456,
+              },
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-collapsible__content').attr('a')).toBe('123');
+      expect($('.ons-collapsible__content').attr('b')).toBe('456');
+    });
+  });
+
+  describe('toggle all button', () => {
+    it('outputs a button with the expected class', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+          allButton: {
+            open: 'Open label',
+            close: 'Close label',
+          },
+        }),
+      );
+
+      expect($('button.ons-js-collapsible-all').length).toBe(1);
+    });
+
+    it('has additionally provided `attributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('accordion', {
+          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+          allButton: {
+            open: 'Open label',
+            close: 'Close label',
+            attributes: {
+              a: 123,
+              b: 456,
+            },
+          },
+        }),
+      );
+
+      expect($('button.ons-js-collapsible-all').attr('a')).toBe('123');
+      expect($('button.ons-js-collapsible-all').attr('b')).toBe('456');
+    });
+  });
+});

package/components/accordion/accordion.spec.js

@@ -0,0 +1,134 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_ACCORDION_WITH_THREE_ITEMS = {
+  id: 'example-accordion',
+  itemsList: [
+    {
+      title: 'Title for item 1',
+      content: 'Content for item 1',
+      button: {
+        open: 'Open item',
+        close: 'Close item',
+      },
+    },
+    {
+      title: 'Title for item 2',
+      content: 'Content for item 2',
+      button: {
+        open: 'Open item',
+        close: 'Close item',
+      },
+    },
+    {
+      title: 'Title for item 3',
+      content: 'Content for item 3',
+      button: {
+        open: 'Open item',
+        close: 'Close item',
+      },
+    },
+  ],
+};
+
+const EXAMPLE_ACCORDION_WITH_ALL_BUTTON = {
+  ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+  allButton: {
+    open: 'Open all',
+    close: 'Close all',
+    attributes: {
+      'data-test-trigger': true,
+    },
+  },
+};
+
+describe('script: accordion', () => {
+  it('begins with all items closed', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+
+    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
+    expect(openItemCount).toBe(0);
+  });
+
+  it('begins with all items open when specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+        open: true,
+      }),
+    );
+
+    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
+    expect(openItemCount).toBe(3);
+  });
+
+  it('opens all items when accordion "Open all" button is clicked', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+
+    await page.click('button[data-test-trigger]');
+
+    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
+    expect(openItemCount).toBe(3);
+  });
+
+  it('closes all items when accordion "Open all" button is clicked twice', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+
+    await page.click('button[data-test-trigger]');
+    await page.click('button[data-test-trigger]');
+
+    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
+    expect(openItemCount).toBe(0);
+  });
+
+  it('starts with the toggle all button labelled as "Open all"', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Open all');
+  });
+
+  it('sets toggle all button label to "Hide all" when clicked', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+
+    await page.click('button[data-test-trigger]');
+
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
+  });
+
+  it('sets toggle all button label to "Hide all" when all items are shown', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+
+    await page.click('#example-accordion-1 .ons-collapsible__btn');
+    await page.click('#example-accordion-2 .ons-collapsible__btn');
+    await page.click('#example-accordion-3 .ons-collapsible__btn');
+
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
+  });
+
+  it('opens an item when its open button is clicked', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+
+    await page.click('#example-accordion-2 .ons-collapsible__btn');
+    await page.click('#example-accordion-3 .ons-collapsible__btn');
+
+    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
+    expect(openItemCount).toBe(2);
+  });
+
+  it('closes an item when its open button is clicked twice', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+
+    await page.click('#example-accordion-2 .ons-collapsible__btn');
+    await page.click('#example-accordion-3 .ons-collapsible__btn');
+    await page.click('#example-accordion-3 .ons-collapsible__btn');
+
+    const isItem2Open = await page.$eval('#example-accordion-2', element => element.classList.contains('ons-collapsible--open'));
+    expect(isItem2Open).toBe(true);
+
+    const isItem3Open = await page.$eval('#example-accordion-3', element => element.classList.contains('ons-collapsible--open'));
+    expect(isItem3Open).toBe(false);
+  });
+});

package/components/address-input/_macro.njk

@@ -11,6 +11,7 @@
                         {{
                             onsInput({
                                 "id": params.id + "-organisation",
+                                "value": params.organisation.value,
                                 "label": {
                                     "text": params.organisation.label
                                 },
@@ -132,7 +133,6 @@
                             "ariaYouHaveSelected": params.ariaYouHaveSelected,
                             "ariaMinChars": params.ariaMinChars,
                             "minChars": params.minChars,
-                            "ariaResultsLabel": params.ariaResultsLabel,
                             "ariaOneResult": params.ariaOneResult,
                             "ariaNResults": params.ariaNResults,
                             "ariaLimitedResults": params.ariaLimitedResults,