From 5b2cd6442fac2ab315d19477f2ef3444b8ac0e8c Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Fri, 2 Aug 2024 17:59:22 +0100 Subject: [PATCH 1/2] Fix rendering of Back link's `href` and `text` for falsy values Reverts to the behaviour of 5.4.0, which ensured consistency across falsy values, and importantly that a 'Back' text was displayed in case of empty strings (and a '#' value for the `href` attribute, but there's less difference with a ''). Instead of reverting the commit, I used the `boolean` option from Nunjucks' `default` filter to keep the tidy up of the templates introduced in https://github.com/alphagov/govuk-frontend/commit/fc704d1efc0fc15a69ff84eb18050dd7ba7ce4b3. --- .../back-link/template.jsdom.test.js | 73 ++++++++++++++----- .../govuk/components/back-link/template.njk | 4 +- 2 files changed, 58 insertions(+), 19 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/back-link/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/back-link/template.jsdom.test.js index 0e4b7de581..933a7c9c40 100644 --- a/packages/govuk-frontend/src/govuk/components/back-link/template.jsdom.test.js +++ b/packages/govuk-frontend/src/govuk/components/back-link/template.jsdom.test.js @@ -35,32 +35,71 @@ describe('back-link component', () => { expect($component).toHaveClass('app-back-link--custom-class') }) - it('allows the link to be customised using the `href` option', () => { - document.body.innerHTML = render('back-link', examples['with custom link']) + describe('the `href` option', () => { + it('allows the link to be customised', () => { + document.body.innerHTML = render( + 'back-link', + examples['with custom link'] + ) + + const $component = document.querySelector('.govuk-back-link') + expect($component).toHaveAttribute('href', '/home') + }) - const $component = document.querySelector('.govuk-back-link') - expect($component).toHaveAttribute('href', '/home') + it.each(['', 0, false, null, undefined])('uses `#` for `%s`', (href) => { + document.body.innerHTML = render('back-link', { context: { href } }) + const $component = document.querySelector('.govuk-back-link') + + expect($component).toHaveAttribute('href', '#') + }) }) - it('allows the text to be customised using the `text` option', () => { - document.body.innerHTML = render('back-link', examples['with custom text']) + describe('the `text` option', () => { + it('allows the text to be customised', () => { + document.body.innerHTML = render( + 'back-link', + examples['with custom text'] + ) - const $component = document.querySelector('.govuk-back-link') - expect($component).toHaveTextContent('Back to home') - }) + const $component = document.querySelector('.govuk-back-link') + expect($component).toHaveTextContent('Back to home') + }) - it('escapes HTML when using the `text` option', () => { - document.body.innerHTML = render('back-link', examples['html as text']) + it('escapes HTML', () => { + document.body.innerHTML = render('back-link', examples['html as text']) - const $component = document.querySelector('.govuk-back-link') - expect($component).toHaveTextContent('Home') + const $component = document.querySelector('.govuk-back-link') + expect($component).toHaveTextContent('Home') + }) + + it.each(['', 0, false, null, undefined])( + 'displays `Back` for `%s`', + (text) => { + document.body.innerHTML = render('back-link', { context: { text } }) + const $component = document.querySelector('.govuk-back-link') + + expect($component).toHaveTextContent('Back') + } + ) }) - it('does not escape HTML when using the `html` option', () => { - document.body.innerHTML = render('back-link', examples.html) + describe('the `html` option', () => { + it('does not escape HTML', () => { + document.body.innerHTML = render('back-link', examples.html) - const $component = document.querySelector('.govuk-back-link') - expect($component).toContainHTML('Back') + const $component = document.querySelector('.govuk-back-link') + expect($component).toContainHTML('Back') + }) + + it.each(['', 0, false, null, undefined])( + 'displays `Back` for `%s`', + (html) => { + document.body.innerHTML = render('back-link', { context: { html } }) + const $component = document.querySelector('.govuk-back-link') + + expect($component).toHaveTextContent('Back') + } + ) }) it('sets any additional attributes based on the `attributes` option', () => { diff --git a/packages/govuk-frontend/src/govuk/components/back-link/template.njk b/packages/govuk-frontend/src/govuk/components/back-link/template.njk index d4e9772f7b..7690314765 100644 --- a/packages/govuk-frontend/src/govuk/components/back-link/template.njk +++ b/packages/govuk-frontend/src/govuk/components/back-link/template.njk @@ -1,6 +1,6 @@ {% from "../../macros/attributes.njk" import govukAttributes -%} - - {{- params.html | safe if params.html else (params.text | default("Back")) -}} + {{- params.html | safe if params.html else (params.text | default("Back", true)) -}} From 6d99967f4dda9938727cc01efee447859b97bc73 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Fri, 2 Aug 2024 18:02:13 +0100 Subject: [PATCH 2/2] Add CHANGELOG entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f363a5d9a..a2268e269c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests: - [#5046: Skip ‘empty’ tasks in the task list](https://github.com/alphagov/govuk-frontend/pull/5046) - [#5066: Fix whitespace affecting text alignment in pagination block variant](https://github.com/alphagov/govuk-frontend/pull/5066) - [#5158: Remove ↑ up and ↓ down arrow key bindings from tabs](https://github.com/alphagov/govuk-frontend/pull/5158) +- [#5191: Fix rendering of Back link's `href` and `text` for falsy values](https://github.com/alphagov/govuk-frontend/pull/5191) ## 5.4.1 (Fix release)