@ons/design-system 65.2.0 → 65.2.2

package/README.md

@@ -33,6 +33,7 @@ To enable this we use [nvm (Node Version Manager)](https://github.com/creationix
 
 ```bash
 yarn install
+husky install
 ```
 
 ### Start a local server

package/components/access-code/example-access-code-error.njk

@@ -74,7 +74,7 @@ layout: ~
     {% endset %}
 
     {% call onsDetails({
-            "id": "details",
+            "id": "details-access-code-error",
             "title": "Need to answer separately from your household?",
             "button": {
                 "close": "Hide this",

package/components/access-code/example-access-code.njk

@@ -18,7 +18,7 @@ layout: ~
     <h1 class="ons-u-mt-l">Start study</h1>
 
     {{ onsAccessCode({
-        "id": "access-code",
+        "id": "access-code-example",
         "name": "access-code",
         "postTextboxLinkText": "Where to find your access code",
         "postTextboxLinkUrl": "#0",

package/components/accordion/example-accordion-open.njk

@@ -13,14 +13,14 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "data",
+                    "id": "data-checkbox",
                     "label": {
                         "text": "Data (309)"
                     },
                     "value": "data"
                 },
                 {
-                    "id": "publications",
+                    "id": "publications-checkbox",
                     "label": {
                         "text": "Publications (137)"
                     },
@@ -33,21 +33,21 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "datasets",
+                                "id": "datasets-checkbox",
                                 "label": {
                                     "text": "Datasets (100)"
                                 },
                                 "value": "datasets"
                             },
                             {
-                                "id": "timeseries",
+                                "id": "timeseries-checkbox",
                                 "label": {
                                     "text": "Timeseries (20)"
                                 },
                                 "value": "timeseries"
                             },
                             {
-                                "id": "requested",
+                                "id": "requested-checkbox",
                                 "label": {
                                     "text": "User requested data (16)"
                                 },
@@ -57,7 +57,7 @@
                     }
                 },
                 {
-                    "id": "areas",
+                    "id": "areas-checkbox",
                     "label": {
                         "text": "Areas (0)"
                     },
@@ -78,7 +78,7 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "crime",
+                    "id": "crime-checkbox",
                     "label": {
                         "text": "Crime (200)"
                     },
@@ -86,14 +86,14 @@
                     "checked": true
                 },
                 {
-                    "id": "education",
+                    "id": "education-checkbox",
                     "label": {
                         "text": "Education (55)"
                     },
-                    "value": "education"
+                    "value": "education-checkbox"
                 },
                 {
-                    "id": "disability",
+                    "id": "disability-checkbox",
                     "label": {
                         "text": "Disability (67)"
                     },

package/components/accordion/example-accordion.njk

@@ -2,7 +2,7 @@
 
 {{
     onsAccordion({
-        "id": "accordion",
+        "id": "accordion-example",
         "allButton": {
             "open": "Show all",
             "close": "Hide all"

package/components/address-input/example-address-input-editable.njk

@@ -1,11 +1,11 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input-editable",
     "dontWrap": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input-editable"
     },
     "isEditable": true,
     "mandatory": true,

package/components/address-input/example-address-input-manual.njk

@@ -1,12 +1,12 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input-manual",
     "dontWrap": true,
     "manualEntry": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input-manual"
     },
     "line1": {
         "label": "Address line 1"
@@ -20,4 +20,4 @@
     "postcode": {
         "label": "Postcode"
     }
-}) }}
+}) }}

package/components/address-input/example-address-input.njk

@@ -1,11 +1,11 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input",
     "dontWrap": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input"
     },
     "isEditable": false,
     "mandatory": true,

package/components/autosuggest/_macro.njk

@@ -28,6 +28,7 @@
         {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
         {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
         {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.language %}data-lang="{{ params.language }}"{% endif %}
         {% if params.options %}
             {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
             {% if params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}

package/components/autosuggest/autosuggest.js

@@ -3,6 +3,7 @@ import AutosuggestUI from './autosuggest.ui';
 export default class Autosuggest {
   constructor(context) {
     this.context = context;
+    this.language = context.getAttribute('data-lang');
 
     this.autosuggest = new AutosuggestUI({
       context,
@@ -13,7 +14,7 @@ export default class Autosuggest {
   }
 
   get lang() {
-    return document.documentElement.getAttribute('lang').toLowerCase();
+    return !this.language ? document.documentElement.getAttribute('lang').toLowerCase() : this.language.toLowerCase();
   }
 
   async onSelect(result) {

package/components/autosuggest/autosuggest.spec.js

@@ -25,6 +25,31 @@ const EXAMPLE_AUTOSUGGEST = {
   typeMore: 'Continue entering to get suggestions',
   autosuggestData: '/test/fake/api/countries',
 };
+const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
+  id: 'country-of-birth',
+  label: {
+    text: 'Current name of country',
+    description: 'Enter your own answer or select from suggestions',
+    id: 'country-of-birth-label',
+    classes: 'extra-label-class',
+  },
+  autocomplete: 'off',
+  instructions: 'Use up and down keys to navigate.',
+  ariaYouHaveSelected: 'You have selected',
+  ariaMinChars: 'Enter 3 or more characters for suggestions.',
+  minChars: 3,
+  ariaResultsLabel: 'Country suggestions',
+  ariaOneResult: 'There is one suggestion available.',
+  ariaNResults: 'There are {n} suggestions available.',
+  ariaLimitedResults: 'Type more characters to improve your search',
+  moreResults: 'Continue entering to improve suggestions',
+  resultsTitle: 'Suggestions',
+  resultsTitleId: 'country-of-birth-suggestions',
+  noResults: 'No suggestions found.',
+  typeMore: 'Continue entering to get suggestions',
+  autosuggestData: '/test/fake/api/countries',
+  language: 'en-gb',
+};
 
 describe('script: autosuggest', () => {
   const apiFaker = new PuppeteerEndpointFaker('/test/fake/api');
@@ -72,11 +97,11 @@ describe('script: autosuggest', () => {
     it('the instructions, listbox, and status should become visible', async () => {
       await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      const instructionsDisplayStyle = await page.$eval('.ons-js-autosuggest-instructions', node => getComputedStyle(node).display);
+      const instructionsDisplayStyle = await page.$eval('.ons-js-autosuggest-instructions', (node) => getComputedStyle(node).display);
       expect(instructionsDisplayStyle).toBe('block');
-      const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', node => getComputedStyle(node).display);
+      const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', (node) => getComputedStyle(node).display);
       expect(listboxDisplayStyle).toBe('block');
-      const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', node => getComputedStyle(node).display);
+      const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', (node) => getComputedStyle(node).display);
       expect(statusDisplayStyle).toBe('block');
     });
   });
@@ -88,7 +113,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -99,7 +124,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -110,11 +135,11 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
-      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id'));
+      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
 
@@ -124,7 +149,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('England');
     });
 
@@ -135,7 +160,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -147,7 +172,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -162,7 +187,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('U');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United');
     });
   });
@@ -174,7 +199,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -186,7 +211,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -198,11 +223,11 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
-      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id'));
+      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
 
@@ -214,7 +239,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -225,7 +250,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -238,7 +263,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('d');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United');
     });
   });
@@ -252,7 +277,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('Enter');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
     });
   });
@@ -264,15 +289,15 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('Tab');
 
-      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample1).toBe(2);
 
       await page.waitForTimeout(200);
-      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample2).toBe(2);
 
       await page.waitForTimeout(320);
-      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample3).toBe(0);
     });
 
@@ -283,7 +308,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', node => node.innerHTML);
+      const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML);
       expect(listboxInnerHTML).toBe('');
     });
 
@@ -294,7 +319,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const hasClass = await page.$eval('.ons-autosuggest', node => node.classList.contains('ons-autosuggest--has-results'));
+      const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results'));
       expect(hasClass).toBe(false);
     });
 
@@ -318,7 +343,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.click('.ons-autosuggest__option:nth-child(2)');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
     });
   });
@@ -329,7 +354,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCount).toBe(0);
     });
 
@@ -338,9 +363,18 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCount).toBe(1);
     });
+
+    it('gets the language if set', async () => {
+      await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE));
+
+      await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
+
+      const attributes = await getNodeAttributes(page, '.ons-js-autosuggest');
+      expect(attributes['data-lang']).toBe('en-gb');
+    });
   });
 
   describe('when the mouse moves over a result and a suggestion is focused', () => {
@@ -351,7 +385,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.hover('.ons-autosuggest__option:nth-child(2)');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedClassCount).toBe(0);
     });
   });
@@ -371,7 +405,7 @@ describe('script: autosuggest', () => {
       await page.hover('.ons-autosuggest__option:nth-child(2)');
       await page.hover('#dummy');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedClassCount).toBe(1);
     });
   });
@@ -384,7 +418,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 });
 
-      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedNodeCount).toBe(0);
     });
 
@@ -393,7 +427,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedValue).toBe('true');
     });
 
@@ -402,7 +436,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent));
       expect(emboldened).toEqual(['Unite', 'Unite']);
     });
 
@@ -411,9 +445,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 });
 
-      const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(matchCount).toBe(2);
-      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent));
       expect(emboldened).toEqual(['tland']);
     });
 
@@ -422,7 +456,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'st', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.');
     });
 
@@ -431,7 +465,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Engla', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('There is one suggestion available.');
     });
 
@@ -440,7 +474,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'sta', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('There are 2 suggestions available.');
     });
   });
@@ -452,7 +486,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', node => node.textContent);
+        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.textContent);
         expect(noResultsContent).toBe('No suggestions found.');
       });
 
@@ -461,7 +495,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedValue).toBe('true');
       });
 
@@ -470,7 +504,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'ab', { delay: 20 });
 
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.');
       });
 
@@ -479,7 +513,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('No suggestions found.: "abc"');
       });
     });
@@ -496,7 +530,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+        const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
         expect(matchCount).toBe(0);
       });
 
@@ -511,7 +545,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedValue).toBe('false');
       });
     });
@@ -532,9 +566,9 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the type more message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
+        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
         expect(listItemCount).toBe(1);
-        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', node => node.innerText);
+        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText);
         expect(noResultsText.trim()).toBe('Continue entering to get suggestions');
       });
     });
@@ -563,29 +597,29 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the API error message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
+        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
         expect(listItemCount).toBe(1);
-        const warningText = await page.$eval('.ons-autosuggest__warning', node => node.textContent);
+        const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 
       it('the input should be disabled', async () => {
-        const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', node => node.hasAttribute('disabled'));
+        const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled'));
         expect(hasDisabledAttribute).toBe(true);
       });
 
       it('the input value should be empty', async () => {
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('');
       });
 
       it('the label class should be added', async () => {
-        const hasClass = await page.$eval('.ons-label', node => node.classList.contains('ons-u-lighter'));
+        const hasClass = await page.$eval('.ons-label', (node) => node.classList.contains('ons-u-lighter'));
         expect(hasClass).toBe(true);
       });
 
       it('the aria status should be set', async () => {
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('Sorry, there is a problem.');
       });
     });
@@ -609,7 +643,7 @@ describe('script: autosuggest', () => {
         await page.keyboard.press('Tab');
         await page.focus('.ons-js-autosuggest-input');
 
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('England, ');
       });
     });
@@ -627,7 +661,7 @@ describe('script: autosuggest', () => {
         await page.type('.ons-js-autosuggest-input', 'England, ', { delay: 20 });
         await page.keyboard.press('Tab');
 
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('England');
       });
     });