@ons/design-system 70.0.12 → 70.0.14

package/components/timeout-modal/timeout-modal.spec.js

@@ -14,20 +14,22 @@ const EXAMPLE_TIMEOUT_MODAL_BASIC = {
     endWithFullStop: true,
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: timeout modal', () => {
     describe('when the page loads', () => {
         beforeEach(async () => {
             const component = renderComponent('timeout-modal', { ...EXAMPLE_TIMEOUT_MODAL_BASIC, showModalTimeInSeconds: 58 });
             const template = `
-        <div class="ons-page">
-          ${component}
-        </div>
-      `;
+                <div class="ons-page">
+                    ${component}
+                </div>
+            `;
             await setTestPage('/test', template);
         });
 
         it('displays the modal after the correct number of seconds', async () => {
-            await page.waitForTimeout(2000);
+            await setTimeout(2000);
             const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
             expect(modalIsVisible).toBe(true);
         });
@@ -42,17 +44,17 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
 
                 await setTestPage('/test', template);
             });
 
             it('shows the time counting down', async () => {
                 const timeAtStart = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
-                await page.waitForTimeout(1000);
+                await setTimeout(1000);
                 const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
                 expect(timeAfterOneSecond).not.toEqual(timeAtStart);
             });
@@ -70,10 +72,10 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
                 await setTestPage('/test', template);
             });
 
@@ -95,10 +97,10 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
                 await setTestPage('/test', template);
             });
 
@@ -120,10 +122,10 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
                 await setTestPage('/test', template);
             });
 
@@ -145,10 +147,10 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
                 await setTestPage('/test', template);
             });
 
@@ -170,10 +172,10 @@ describe('script: timeout modal', () => {
                 });
 
                 const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+                    <div class="ons-page">
+                        ${component}
+                    </div>
+                `;
                 await setTestPage('/test', template);
             });
 
@@ -183,7 +185,7 @@ describe('script: timeout modal', () => {
             });
 
             it('then redirects to the provided `redirectUrl`', async () => {
-                await page.waitForTimeout(2000);
+                await setTimeout(2000);
                 expect(page.url()).toContain('#!');
             });
         });
@@ -197,10 +199,10 @@ describe('script: timeout modal', () => {
             });
 
             const template = `
-        <div class="ons-page">
-          ${component}
-        </div>
-      `;
+                <div class="ons-page">
+                    ${component}
+                </div>
+            `;
 
             await setTestPage('/test', template);
         });
@@ -213,11 +215,14 @@ describe('script: timeout modal', () => {
 
             it('closes the modal', async () => {
                 const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+
+                await setTimeout(50);
+
                 expect(modalIsVisible).toBe(false);
             });
 
             it('restarts the timer and displays the modal after the correct number of seconds', async () => {
-                await page.waitForTimeout(2000);
+                await setTimeout(2000);
                 const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
                 expect(modalIsVisible).toBe(true);
             });

package/components/timeout-panel/timeout-panel.spec.js

@@ -13,6 +13,8 @@ const EXAMPLE_TIMEOUT_PANEL_BASIC = {
     endWithFullStop: true,
 };
 
+const { setTimeout } = require('node:timers/promises');
+
 describe('script: timeout panel', () => {
     describe('when the page loads', () => {
         beforeEach(async () => {
@@ -29,7 +31,7 @@ describe('script: timeout panel', () => {
 
         it('shows the time counting down', async () => {
             const timeAtStart = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
-            await page.waitForTimeout(1000);
+            await setTimeout(1000);
             const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
             expect(timeAfterOneSecond).not.toEqual(timeAtStart);
         });
@@ -130,7 +132,7 @@ describe('script: timeout panel', () => {
         });
 
         it('then redirects to the provided `redirectUrl`', async () => {
-            await page.waitForTimeout(2000);
+            await setTimeout(2000);
             expect(page.url()).toContain('#!');
         });
     });

package/components/video/video.spec.js

@@ -1,10 +1,13 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
+const { setTimeout } = require('node:timers/promises');
+
 const EXAMPLE_VIDEO_YOUTUBE = {
     videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
     title: 'Census 2021 promotional TV advert',
     linkText: 'Example link text',
 };
+
 const EXAMPLE_VIDEO_VIMEO = {
     videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754',
     title: 'Vimeo Video',
@@ -14,112 +17,133 @@ const EXAMPLE_VIDEO_VIMEO = {
 const EXAMPLE_APPROVED_COOKIE = JSON.stringify({ campaigns: true }).replace(/"/g, "'");
 
 describe('script: video', () => {
-    beforeEach(async () => {
-        const client = await page.target().createCDPSession();
-        await client.send('Network.clearBrowserCookies');
-    });
-
-    it('should show the placeholder content', async () => {
-        await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
-
-        const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
-            window.getComputedStyle(node).getPropertyValue('display'),
-        );
-        expect(displayStyle).toBe('block');
-    });
-
-    it('should not show the iframe', async () => {
-        await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
-
-        const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display'));
-        expect(displayStyle).toBe('none');
-    });
-
-    describe('when cookies are accepted on page load', () => {
+    describe('YouTube videos', () => {
         beforeEach(async () => {
-            await page.setCookie({
-                name: 'ons_cookie_policy',
-                value: EXAMPLE_APPROVED_COOKIE,
-            });
+            const client = await page.createCDPSession();
+            await client.send('Network.clearBrowserCookies');
+        });
 
+        it('should show the placeholder content', async () => {
             await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
-        });
 
-        it('should hide the placeholder content', async () => {
             const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
                 window.getComputedStyle(node).getPropertyValue('display'),
             );
-            expect(displayStyle).toBe('none');
-        }, 10000);
+            expect(displayStyle).toBe('block');
+        });
+
+        it('should not show the iframe', async () => {
+            await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-        it('should show the iframe', async () => {
             const displayStyle = await page.$eval('.ons-js-video-iframe', (node) =>
                 window.getComputedStyle(node).getPropertyValue('display'),
             );
-            expect(displayStyle).toBe('block');
-        }, 10000);
+            expect(displayStyle).toBe('none');
+        });
 
-        it('should add the correct modifier class', async () => {
-            const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
-            expect(hasClass).toBe(true);
-        }, 10000);
+        describe('when cookies are accepted on page load', () => {
+            beforeEach(async () => {
+                await page.setCookie({
+                    name: 'ons_cookie_policy',
+                    value: EXAMPLE_APPROVED_COOKIE,
+                });
 
-        it('should not add dnt to YouTube videos', async () => {
-            const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
-            expect(src.includes('?dnt=1')).toBe(false);
-        }, 10000);
+                await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+            });
 
-        it('should add dnt to Vimeo videos', async () => {
-            await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+            it('should hide the placeholder content', async () => {
+                const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
+                    window.getComputedStyle(node).getPropertyValue('display'),
+                );
+                expect(displayStyle).toBe('none');
+            }, 10000);
+
+            it('should show the iframe', async () => {
+                const displayStyle = await page.$eval('.ons-js-video-iframe', (node) =>
+                    window.getComputedStyle(node).getPropertyValue('display'),
+                );
+                expect(displayStyle).toBe('block');
+            }, 10000);
+
+            it('should add the correct modifier class', async () => {
+                const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
+                expect(hasClass).toBe(true);
+            }, 10000);
+
+            it('should not add dnt', async () => {
+                const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
+                expect(src.includes('?dnt=1')).toBe(false);
+            }, 10000);
+        });
 
-            const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
-            expect(src.includes('?dnt=1')).toBe(true);
-        }, 10000);
-    });
+        describe('when cookies are accepted via banner', () => {
+            beforeEach(async () => {
+                await setTestPage(
+                    '/test',
+                    `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)}
+                    <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
+                );
+                await page.click('.ons-js-accept-cookies');
+            });
 
-    describe('when cookies are accepted via banner', () => {
-        beforeEach(async () => {
-            await setTestPage(
-                '/test',
-                `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)}
-        <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
-            );
-            await page.click('.ons-js-accept-cookies');
-        });
+            it('should hide the placeholder content', async () => {
+                const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
+                    window.getComputedStyle(node).getPropertyValue('display'),
+                );
+                expect(displayStyle).toBe('none');
+            });
 
-        it('should hide the placeholder content', async () => {
-            const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
-                window.getComputedStyle(node).getPropertyValue('display'),
-            );
-            expect(displayStyle).toBe('none');
+            it('should show the iframe', async () => {
+                const displayStyle = await page.$eval('.ons-js-video-iframe', (node) =>
+                    window.getComputedStyle(node).getPropertyValue('display'),
+                );
+                expect(displayStyle).toBe('block');
+            });
+
+            it('should add the correct modifier class', async () => {
+                const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
+                expect(hasClass).toBe(true);
+            }, 10000);
+
+            it('should not add dnt', async () => {
+                const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
+                expect(src.includes('?dnt=1')).toBe(false);
+            }, 10000);
         });
+    });
 
-        it('should show the iframe', async () => {
-            const displayStyle = await page.$eval('.ons-js-video-iframe', (node) =>
-                window.getComputedStyle(node).getPropertyValue('display'),
-            );
-            expect(displayStyle).toBe('block');
+    describe('Vimeo videos', () => {
+        describe('when cookies are accepted on page load', () => {
+            it('should add dnt', async () => {
+                await page.setCookie({
+                    name: 'ons_cookie_policy',
+                    value: EXAMPLE_APPROVED_COOKIE,
+                });
+                await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+
+                const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
+
+                await setTimeout(100);
+
+                expect(src.includes('?dnt=1')).toBe(true);
+            }, 10000);
         });
 
-        it('should add the correct modifier class', async () => {
-            const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
-            expect(hasClass).toBe(true);
-        }, 10000);
-        it('should not add dnt to YouTube videos', async () => {
-            const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
-            expect(src.includes('?dnt=1')).toBe(false);
-        }, 10000);
-
-        it('should add dnt to Vimeo videos', async () => {
-            await setTestPage(
-                '/test',
-                `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)}
-        <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
-            );
-            await page.click('.ons-js-accept-cookies');
+        describe('when cookies are accepted on page load', () => {
+            it('when cookies are accepted via banner, should add dnt', async () => {
+                await setTestPage(
+                    '/test',
+                    `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)}
+                    <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
+                );
+                await page.click('.ons-js-accept-cookies');
 
-            const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
-            expect(src.includes('?dnt=1')).toBe(true);
-        }, 10000);
+                const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
+
+                await setTimeout(100);
+
+                expect(src.includes('?dnt=1')).toBe(true);
+            }, 10000);
+        });
     });
 });

package/js/cookies-settings.spec.js

@@ -38,7 +38,7 @@ const EXAMPLE_PART_COOKIES_SETTINGS_PAGE = `
 
 describe('script: cookies-settings', () => {
     beforeEach(async () => {
-        const client = await page.target().createCDPSession();
+        const client = await page.createCDPSession();
         await client.send('Network.clearBrowserCookies');
     });
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "70.0.12",
+    "version": "70.0.14",
     "main": "index.js",
     "license": "MIT",
     "author": {
@@ -11,6 +11,7 @@
         "start": "gulp start",
         "watch": "gulp watch",
         "test": "gulp build-assets && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
+        "test:clear-cache": "jest --clearCache",
         "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
         "test:with-log": "yarn test --no-color 2>test.log",
         "test:start-server": "TEST_PORT=3020 gulp start-dev-server",
@@ -98,7 +99,7 @@
         "jest": "^29.6.1",
         "jest-axe": "^8.0.0",
         "jest-environment-jsdom": "^29.6.1",
-        "jest-puppeteer": "^9.0.0",
+        "jest-puppeteer": "^10.0.0",
         "lighthouse": "^11.0.0",
         "lint-staged": "^15.2.0",
         "lodash": "^4.17.21",
@@ -111,7 +112,7 @@
         "prepend-file": "^2.0.1",
         "prettier": "^3.2.5",
         "prettier-plugin-jinja-template": "^1.4.0",
-        "puppeteer": "^21.0.2",
+        "puppeteer": "^22.0.0",
         "remark-cli": "^12.0.0",
         "remark-lint": "^9.1.2",
         "remark-preset-lint-recommended": "^6.1.3",