@ons/design-system 70.0.13 → 70.0.14

package/README.md

@@ -106,13 +106,13 @@ _Note_: This command is of limited use since JavaScript and SCSS files will only
 
 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.
+-   `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 new Promise(r => setTimeout(r, 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.
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 

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

@@ -5,150 +5,184 @@ 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();
+describe('FOR: access-code', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            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',
+                    },
+                }),
+            );
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            test('THEN: autocomplete is disabled on text input', () => {
+                expect($('input').attr('autocomplete')).toBe('off');
+            });
+            test('THEN: text input has automatic capitalisation', () => {
+                expect($('input').attr('autocapitalize')).toBe('characters');
+            });
+        });
     });
-
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(
-            renderComponent('access-code', {
-                id: 'example-id',
-            }),
-        );
-
-        expect($('#example-id').length).toBe(1);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    id: 'example-id',
+                }),
+            );
+            test('THEN: renders with id provided', () => {
+                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');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with additional classes provided', () => {
+                expect($('.ons-panel--info').hasClass('extra-class')).toBe(true);
+                expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
-
-    it('has a default `type` of "text"', () => {
-        const $ = cheerio.load(renderComponent('access-code'));
-
-        expect($('input').attr('type')).toBe('text');
+    describe('GIVEN: Params: label', () => {
+        describe('WHEN: label text and description params are provided', () => {
+            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',
+                    },
+                }),
+            );
+            test('THEN: renders with provided text and description', () => {
+                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 the provided `type` attribute', () => {
-        const $ = cheerio.load(
-            renderComponent('access-code', {
-                type: 'number',
-            }),
-        );
-
-        expect($('input').attr('inputmode')).toBe('numeric');
+    describe('GIVEN: Params: type', () => {
+        describe('WHEN: param is at default state', () => {
+            const $ = cheerio.load(renderComponent('access-code'));
+            test('THEN: renders with default type of "text"', () => {
+                expect($('input').attr('type')).toBe('text');
+            });
+        });
+        describe('WHEN: type param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    type: 'number',
+                }),
+            );
+            test('THEN: renders with provided type', () => {
+                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);
+    describe('GIVEN: Params: name', () => {
+        describe('WHEN: name param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    name: 'special-name',
+                }),
+            );
+            test('THEN: renders with provided name', () => {
+                expect($('input').attr('name')).toBe('special-name');
+            });
+        });
     });
-
-    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',
-        );
+    describe('GIVEN: Params: maxlength & groupSize', () => {
+        describe('WHEN: params are at default state', () => {
+            const $ = cheerio.load(renderComponent('access-code'));
+            test('THEN: renders input with total maxlength of 19', () => {
+                expect($('input').attr('maxlength')).toBe('19');
+            });
+            test('THEN: renders input with groupSize of 4', () => {
+                expect($('input').attr('data-group-size')).toBe('4');
+            });
+        });
+        describe('WHEN: maxlength param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    maxlength: 8,
+                }),
+            );
+            test('THEN: renders input with provided maxlength', () => {
+                expect($('input').attr('maxlength')).toBe('9');
+            });
+        });
+        describe('WHEN: groupSize param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    groupSize: 2,
+                }),
+            );
+            test('THEN: renders input with provided groupSize', () => {
+                expect($('input').attr('data-group-size')).toBe('2');
+            });
+        });
+        describe('WHEN: maxlength and groupSize params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    maxlength: 6,
+                    groupSize: 3,
+                }),
+            );
+            test('THEN: renders input with provided maxlength accounting for provided groupSize', () => {
+                expect($('input').attr('maxlength')).toBe('7');
+            });
+        });
     });
-
-    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');
+    describe('GIVEN: Params: securityMessage', () => {
+        describe('WHEN: securityMessage param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    securityMessage: 'Example security message.',
+                }),
+            );
+            test('THEN: renders with provided security message', () => {
+                expect($('.ons-panel__body').text().trim()).toBe('Example security message.');
+            });
+        });
     });
-
-    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');
+    describe('GIVEN: Params: postTextboxLinkText & postTextBoxLinkUrl', () => {
+        describe('WHEN: postTextboxLinkText & postTextBoxLinkUrl params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    postTextboxLinkText: 'Example link text',
+                    postTextboxLinkUrl: '#3',
+                }),
+            );
+            test('THEN: renders link with provided link and text', () => {
+                expect($('a[href="#3"]').text().trim()).toBe('Example link text');
+            });
+        });
     });
-
-    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: 'access-code-error',
-                    text: 'Enter an access code',
-                },
-            }),
-        );
-
-        expect($('#access-code-error').length).toBe(1);
-        expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
+    describe('GIVEN: Params: error', () => {
+        describe('WHEN: error id & text params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('access-code', {
+                    error: {
+                        id: 'access-code-error',
+                        text: 'Enter an access code',
+                    },
+                }),
+            );
+            test('THEN: renders error with provided id and text', () => {
+                expect($('#access-code-error').length).toBe(1);
+                expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
+            });
+        });
     });
 });

package/components/address-input/autosuggest.address.spec.js

@@ -62,6 +62,8 @@ const EXAMPLE_ADDRESS_INPUT_WITH_API = {
     externalInitialiser: true,
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: address-input', () => {
     const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain);
 
@@ -184,7 +186,7 @@ describe('script: address-input', () => {
     describe('When the component initializes', () => {
         it('checks api status by trying a request', async () => {
             await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-            await page.waitForTimeout(50);
+            await setTimeout(50);
 
             expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
         });
@@ -192,7 +194,7 @@ describe('script: address-input', () => {
         describe('when api status is okay', () => {
             beforeEach(async () => {
                 await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('does not switch to manual input', async () => {
@@ -216,7 +218,7 @@ describe('script: address-input', () => {
                 });
 
                 await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('switches to manual input', async () => {
@@ -271,6 +273,7 @@ describe('script: address-input', () => {
             });
 
             it('has expected suggestion entries', async () => {
+                await setTimeout(100);
                 const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
                 expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
             });
@@ -305,7 +308,7 @@ describe('script: address-input', () => {
 
                 await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N'));
                 await page.type('.ons-js-autosuggest-input', 'Z');
-                await page.waitForTimeout(100);
+                await setTimeout(100);
             });
 
             it('provides expected parameters to the address API', async () => {
@@ -328,7 +331,7 @@ describe('script: address-input', () => {
                 beforeEach(async () => {
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(100);
+                    await setTimeout(100);
                 });
 
                 it('makes expected request when a suggestion is selected', async () => {
@@ -352,7 +355,7 @@ describe('script: address-input', () => {
 
                 await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 '));
                 await page.type('.ons-js-autosuggest-input', '2');
-                await page.waitForTimeout(200);
+                await setTimeout(200);
             });
 
             it('provides expected parameters to the address API', async () => {
@@ -371,7 +374,7 @@ describe('script: address-input', () => {
                 beforeEach(async () => {
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(200);
+                    await setTimeout(200);
                 });
 
                 it('makes expected request', async () => {
@@ -393,7 +396,7 @@ describe('script: address-input', () => {
                     beforeEach(async () => {
                         await page.keyboard.press('ArrowDown');
                         await page.keyboard.press('Enter');
-                        await page.waitForTimeout(200);
+                        await setTimeout(200);
                     });
 
                     it('populates manual input fields with address from selection', async () => {
@@ -437,7 +440,7 @@ describe('script: address-input', () => {
                 await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
                 await page.keyboard.press('ArrowDown');
                 await page.keyboard.press('Enter');
-                await page.waitForTimeout(100);
+                await setTimeout(100);
 
                 const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
                     node.classList.contains('ons-u-db-no-js_enabled'),
@@ -480,7 +483,7 @@ describe('script: address-input', () => {
                     await page.type('.ons-js-autosuggest-input', 'T', { delay: 20 });
                     await page.keyboard.press('ArrowDown');
                     await page.keyboard.press('Enter');
-                    await page.waitForTimeout(100);
+                    await setTimeout(100);
 
                     const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', (node) => node.value);
                     expect(urpnValueBefore).toBe('100070332099');
@@ -619,7 +622,7 @@ describe('script: address-input', () => {
                 await page.keyboard.press('ArrowDown');
                 await page.keyboard.press('Enter');
 
-                await page.waitForTimeout(50);
+                await setTimeout(50);
             });
 
             it('then the retrieveAddress function will be called', async () => {
@@ -730,6 +733,8 @@ describe('script: address-input', () => {
             await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
             await page.type('.ons-js-autosuggest-input', 'e');
 
+            await setTimeout(50);
+
             expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1);
         });
 
@@ -739,7 +744,7 @@ describe('script: address-input', () => {
             await page.keyboard.press('ArrowDown');
             await page.keyboard.press('Enter');
 
-            await page.waitForTimeout(50);
+            await setTimeout(50);
 
             expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1);
         });

package/components/autosuggest/autosuggest.spec.js

@@ -53,6 +53,8 @@ const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
     language: 'en-gb',
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: autosuggest', () => {
     const apiFaker = new PuppeteerEndpointFaker('/test/fake/api');
 
@@ -298,11 +300,11 @@ describe('script: autosuggest', () => {
             const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample1).toBe(2);
 
-            await page.waitForTimeout(200);
+            await setTimeout(200);
             const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample2).toBe(2);
 
-            await page.waitForTimeout(320);
+            await setTimeout(320);
             const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
             expect(suggestionCountSample3).toBe(0);
         });
@@ -312,7 +314,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML);
             expect(listboxInnerHTML).toBe('');
@@ -323,7 +325,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results'));
             expect(hasClass).toBe(false);
@@ -334,7 +336,7 @@ describe('script: autosuggest', () => {
 
             await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
             await page.keyboard.press('Tab');
-            await page.waitForTimeout(320);
+            await setTimeout(320);
 
             const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input');
             expect(attributes['aria-activedescendant']).toBeUndefined();

package/components/back-to-top/_macro.spec.js

@@ -5,56 +5,50 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('macro: back-to-top', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(
-            renderComponent('back-to-top', {
-                description: 'Back to top',
-                anchor: 'example-target',
-            }),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has back to top link with the provided description', async () => {
-        const $ = cheerio.load(
-            renderComponent('back-to-top', {
-                description: 'Scroll to top',
-                anchor: 'example-target',
-            }),
-        );
-        expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top');
-    });
-
-    it('has back to top link with the provided anchor', async () => {
-        const $ = cheerio.load(
-            renderComponent('back-to-top', {
-                description: 'Back to top',
-                anchor: 'example-target',
-            }),
-        );
-
-        expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target');
+describe('FOR: Back-to-top', () => {
+    describe('GIVEN: Params: default', () => {
+        describe('WHEN: params are at default', () => {
+            const $ = cheerio.load(renderComponent('back-to-top'));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has back to top link with the default description if no description provided', async () => {
-        const $ = cheerio.load(
-            renderComponent('back-to-top', {
-                anchor: 'example-target',
-            }),
-        );
-
-        expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top');
+    describe('GIVEN: Params: description', () => {
+        describe('WHEN: description text is not provided', () => {
+            const $ = cheerio.load(renderComponent('back-to-top'));
+            test('THEN: renders with default description text', () => {
+                expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top');
+            });
+        });
+        describe('WHEN: description text is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('back-to-top', {
+                    description: 'Scroll to top',
+                }),
+            );
+            test('THEN: renders button with provided text', () => {
+                expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top');
+            });
+        });
     });
-
-    it('has back to top link with the default anchor if no anchor provided', async () => {
-        const renderedComponent = renderComponent('back-to-top', {
-            description: 'Back to top',
+    describe('GIVEN: Params: anchor', () => {
+        describe('WHEN: anchor is not provided', () => {
+            const $ = cheerio.load(renderComponent('back-to-top'));
+            test('THEN: renders with default anchor id', () => {
+                expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top');
+            });
+        });
+        describe('WHEN: anchor is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('back-to-top', {
+                    anchor: 'example-target',
+                }),
+            );
+            test('THEN: renders button with provided anchor id', () => {
+                expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target');
+            });
         });
-        const $ = cheerio.load(renderedComponent);
-
-        expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top');
     });
 });

package/components/back-to-top/back-to-top.spec.js

@@ -1,5 +1,7 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: back-to-top', () => {
     beforeEach(async () => {
         await setTestPage(
@@ -98,7 +100,7 @@ describe('script: back-to-top', () => {
         await page.evaluate(() => {
             window.scrollTo(0, window.innerHeight * 2);
         });
-        await new Promise((r) => setTimeout(r, 250));
+        await setTimeout(250);
         const previousWidth = await page.evaluate(() => {
             const node = document.querySelector('.ons-back-to-top > .ons-back-to-top__link').children[0];
             return window.getComputedStyle(node).marginLeft;
@@ -107,7 +109,7 @@ describe('script: back-to-top', () => {
         await page.evaluate(() => {
             window.scrollTo(0, window.innerHeight * 2);
         });
-        await new Promise((r) => setTimeout(r, 250));
+        await setTimeout(250);
         const newWidth = await page.evaluate(() => {
             const node = document.querySelector('.ons-back-to-top > .ons-back-to-top__link').children[0];
             return window.getComputedStyle(node).marginLeft;