From c460f49ddb30acd612599c9bb4aaba59aa7c0a64 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 12 Dec 2023 15:02:13 +0000 Subject: [PATCH 1/3] Document `checkSupport()` with `@throws` --- packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs b/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs index bd537c2ac5..03154a2127 100644 --- a/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs +++ b/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs @@ -23,6 +23,7 @@ export class GOVUKFrontendComponent { * Validates whether GOV.UK Frontend is supported * * @private + * @throws {SupportError} when GOV.UK Frontend is not supported */ checkSupport() { if (!isSupported()) { From bc69e6777173d63d405d00361a2ef83b111b7440 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 8 Jan 2024 17:45:56 +0000 Subject: [PATCH 2/3] Prefer `$element` to `element` --- packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs index 0422c3c9a2..516bf1af91 100644 --- a/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs +++ b/packages/govuk-frontend/src/govuk/errors/index.jsdom.test.mjs @@ -78,12 +78,12 @@ describe('errors', () => { ).toBe('Component name: variableName not found') }) it('formats the message when the element is not the right type', () => { - const element = document.createElement('div') + const $element = document.createElement('div') expect( new ElementError({ componentName: 'Component name', - element, + element: $element, expectedType: 'HTMLAnchorElement', identifier: 'variableName' }).message From 39e34e0a0b20750b1dd6df5ab93f9477d1be1f6f Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 12 Dec 2023 16:43:59 +0000 Subject: [PATCH 3/3] Fix character count behaviour tests instantiating twice Our tests were sharing the same HTML markup but creating 2x `new CharacterCount()` instances --- .../character-count.jsdom.test.mjs | 41 +++++++++++++------ 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs index 5a5a1c1d5d..27fade7175 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs @@ -1,19 +1,26 @@ import { getExamples, render } from '@govuk-frontend/lib/components' +import { outdent } from 'outdent' import { CharacterCount } from './character-count.mjs' describe('CharacterCount', () => { - let html + let examples beforeAll(async () => { - const examples = await getExamples('character-count') - html = render('character-count', examples['to configure in JavaScript']) + examples = await getExamples('character-count') }) - beforeEach(async () => { - // Some tests add attributes to `document.body` so we need - // to reset it alongside the component's markup - document.body.outerHTML = `${html}` + beforeEach(() => { + const example = examples['to configure in JavaScript'] + + // Some tests add attributes to `document.body` so we need to reset it + // alongside both character count renders (for maxlength and maxwords) + document.body.outerHTML = outdent` + + ${render('character-count', example)} + ${render('character-count', example)} + + ` }) describe('formatCountMessage', () => { @@ -22,9 +29,15 @@ describe('CharacterCount', () => { let componentWithMaxWords beforeEach(() => { - const $div = document.querySelector('[data-module]') - componentWithMaxLength = new CharacterCount($div, { maxlength: 100 }) - componentWithMaxWords = new CharacterCount($div, { maxwords: 100 }) + const $divs = document.querySelectorAll('[data-module]') + + componentWithMaxLength = new CharacterCount($divs[0], { + maxlength: 100 + }) + + componentWithMaxWords = new CharacterCount($divs[1], { + maxwords: 100 + }) }) const cases = [ @@ -108,14 +121,16 @@ describe('CharacterCount', () => { }) it('uses specific keys for when limit is reached', () => { - const $div = document.querySelector('[data-module]') - const componentWithMaxLength = new CharacterCount($div, { + const $divs = document.querySelectorAll('[data-module]') + + const componentWithMaxLength = new CharacterCount($divs[0], { maxlength: 100, i18n: { charactersAtLimit: 'Custom text.' } }) - const componentWithMaxWords = new CharacterCount($div, { + + const componentWithMaxWords = new CharacterCount($divs[1], { maxwords: 100, i18n: { wordsAtLimit: 'Different custom text.'