@ons/design-system 50.0.0 → 52.0.0

package/js/cookies-settings.spec.js

@@ -0,0 +1,154 @@
+import { renderComponent, setTestPage } from '../tests/helpers/rendering';
+
+const EXAMPLE_COOKIES_SETTINGS_PAGE = `
+  ${renderComponent('cookies-banner', {
+    statementTitle: 'Tell us whether you accept cookies',
+    statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
+    confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
+  })}
+
+  <form data-module="cookie-settings">
+    <input type="radio" class="ons-js-radio" name="cookies-settings" value="on">
+    <input type="radio" class="ons-js-radio" name="cookies-settings" value="off">
+    <input type="radio" class="ons-js-radio" name="cookies-usage" value="on">
+    <input type="radio" class="ons-js-radio" name="cookies-usage" value="off">
+    <input type="radio" class="ons-js-radio" name="cookies-campaigns" value="on">
+    <input type="radio" class="ons-js-radio" name="cookies-campaigns" value="off">
+    <button id="submit-button" type="submit">Submit</button>
+  </form>
+
+  <div class="ons-cookies-confirmation-message ons-u-d-no">
+    <a class="ons-js-return-link" href="#0">Return to previous page</a>
+  </div>
+`;
+
+describe('script: cookies-settings', () => {
+  beforeEach(async () => {
+    const client = await page.target().createCDPSession();
+    await client.send('Network.clearBrowserCookies');
+  });
+
+  it('sets a consent cookie by default', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    const cookies = await page.cookies();
+    const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+
+    expect(policy).toEqual({
+      essential: true,
+      settings: false,
+      usage: false,
+      campaigns: false,
+    });
+  });
+
+  it('sets all radio buttons to the default values', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', node => node.checked);
+    const cookiesUsageOffRadio = await page.$eval('input[name=cookies-usage][value=off]', node => node.checked);
+    const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', node => node.checked);
+
+    expect(cookiesSettingsOffRadio).toBe(true);
+    expect(cookiesUsageOffRadio).toBe(true);
+    expect(cookiesCampaignsOffRadio).toBe(true);
+  });
+
+  it('sets all radios to on from off when accepting cookies', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    await page.click('.ons-js-accept-cookies');
+
+    const cookiesSettingsOnRadio = await page.$eval('input[name=cookies-settings][value=on]', node => node.checked);
+    const cookiesUsageOnRadio = await page.$eval('input[name=cookies-usage][value=on]', node => node.checked);
+    const cookiesCampaignsOnRadio = await page.$eval('input[name=cookies-campaigns][value=on]', node => node.checked);
+
+    expect(cookiesSettingsOnRadio).toBe(true);
+    expect(cookiesUsageOnRadio).toBe(true);
+    expect(cookiesCampaignsOnRadio).toBe(true);
+  });
+
+  it.each([['settings'], ['usage'], ['campaigns']])('updates consent cookie when "%s" policy is turned on', async policyName => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    await page.click(`input[name=cookies-${policyName}][value=on]`);
+    await page.click('#submit-button');
+
+    const cookies = await page.cookies();
+    const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+
+    expect(policy).toHaveProperty(policyName, true);
+  });
+
+  it.each([['settings'], ['usage'], ['campaigns']])(
+    'updates consent cookie when "%s" policy is turned on and then off',
+    async policyName => {
+      await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+      await page.click(`input[name=cookies-${policyName}][value=on]`);
+      await page.click('#submit-button');
+
+      await page.click(`input[name=cookies-${policyName}][value=off]`);
+      await page.click('#submit-button');
+
+      const cookies = await page.cookies();
+      const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+      const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+
+      expect(policy).toHaveProperty(policyName, false);
+    },
+  );
+
+  it('sets ons_cookie_message_displayed cookie on form submit', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    const cookiesBefore = await page.cookies();
+    const ons_cookie_message_displayed_before = cookiesBefore.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+    expect(ons_cookie_message_displayed_before).toBeUndefined();
+
+    await page.click('#submit-button');
+
+    const cookiesAfter = await page.cookies();
+    const ons_cookie_message_displayed_after = cookiesAfter.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+
+    expect(ons_cookie_message_displayed_after.value).toBe('true');
+  });
+
+  it('does not hide the cookie banner by default', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    expect(displayStyle).not.toBe('none');
+  });
+
+  it('hides the cookie banner on form submit', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    await page.click('#submit-button');
+
+    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    expect(displayStyle).toBe('none');
+  });
+
+  it('does not show a confirmation message by default', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    const displayStyle = await page.$eval('.ons-cookies-confirmation-message', node =>
+      window.getComputedStyle(node).getPropertyValue('display'),
+    );
+    expect(displayStyle).toBe('none');
+  });
+
+  it('shows a confirmation message on form submit', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+    await page.click('#submit-button');
+
+    const displayStyle = await page.$eval('.ons-cookies-confirmation-message', node =>
+      window.getComputedStyle(node).getPropertyValue('display'),
+    );
+    expect(displayStyle).not.toBe('none');
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "50.0.0",
+  "version": "52.0.0",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -10,12 +10,12 @@
   "scripts": {
     "start": "gulp start",
     "watch": "gulp watch",
+    "test": "gulp build-assets-for-testing && 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",
     "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",
     "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/generate-npm-package.js",
     "cdn-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/prepare-templates-for-zip.js",
-    "test:local": "STYLES=main gulp build-styles && TEST_MODE=esm KARMA_SINGLE_RUN=false karma start ./karma.conf.babel-register.js",
-    "test": "STYLES=main gulp build-styles && TEST_MODE=nomodule karma start ./karma.conf.babel-register.js && TEST_MODE=esm karma start ./karma.conf.babel-register.js && codecov",
-    "test:browserstack": "STYLES=main gulp build-styles && TEST_MODE=nomodule TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js && TEST_MODE=esm TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js",
     "test-visual": "yarn build && npx percy exec -- babel-node src/tests/visual/percy.snapshots.js",
     "tidy-clean": "rm -rf build css favicons fonts img components layout scripts coverage scss js",
     "check-unused": "npx npm-check-unused",
@@ -75,9 +75,8 @@
     "babelify": "^10.0.0",
     "browser-sync": "^2.27.3",
     "browserify": "^17.0.0",
-    "chai": "^4.3.4",
-    "chai-as-promised": "^7.1.1",
-    "chai-spies": "^1.0.0",
+    "chalk": "^4.1.2",
+    "cheerio": "^1.0.0-rc.10",
     "codecov": "^3.8.3",
     "core-js": "^3.21.1",
     "cssnano": "^4.1.11",
@@ -87,7 +86,6 @@
     "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-prettier": "^3.0.0",
     "express": "^4.17.1",
-    "fetch-mock": "^9.11.0",
     "front-matter": "^4.0.2",
     "fs-extra": "^10.0.0",
     "fuse.js": "^3.6.1",
@@ -104,26 +102,16 @@
     "http-server": "^0.12.3",
     "husky": "^1.2.0",
     "iframe-resizer": "4.2.11",
+    "jest": "^27.5.1",
+    "jest-axe": "^6.0.0",
+    "jest-puppeteer": "^6.1.0",
     "js-beautify": "^1.11.0",
-    "karma": "^6.3.4",
-    "karma-babel-preprocessor": "^8.0.1",
-    "karma-browserify": "^8.0.0",
-    "karma-browserstack-launcher": "^1.6.0",
-    "karma-chai": "^0.1.0",
-    "karma-chai-spies": "^0.1.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-firefox-launcher": "^2.1.1",
-    "karma-html": "^1.0.5",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
     "lighthouse": "^7.5.0",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.21",
     "marked": "^2.1.3",
     "mdn-polyfills": "^5.14.0",
     "minimist": "^1.2.5",
-    "mocha": "8.1.3",
     "normalize.css": "^8.0.1",
     "nunjucks": "^3.2.3",
     "postcss": "^8.3.5",
@@ -131,8 +119,7 @@
     "prepend-file": "^1.3.1",
     "prettier": "^1.15.2",
     "prismjs": "1.24.0",
-    "proxyquireify": "^3.2.1",
-    "puppeteer": "^5.3.1",
+    "puppeteer": "^13.5.1",
     "remark-cli": "^9.0.0",
     "remark-lint": "^8.0.0",
     "remark-preset-lint-recommended": "^5.0.0",