Fix rendering of Back link's href and text for falsy values

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)
 

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('<b>Home</b>')
+ const $component = document.querySelector('.govuk-back-link')
+ expect($component).toHaveTextContent('<b>Home</b>')
+ })
+
+ 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('<b>Back</b>')
+ const $component = document.querySelector('.govuk-back-link')
+ expect($component).toContainHTML('<b>Back</b>')
+ })
+
+ 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', () => {

packages/govuk-frontend/src/govuk/components/back-link/template.njk

@@ -1,6 +1,6 @@
 {% from "../../macros/attributes.njk" import govukAttributes -%}
 
-<a href="{{ params.href | default('#') }}" class="govuk-back-link {%- if params.classes %} {{ params.classes }}{% endif %}"
+<a href="{{ params.href | default('#', true) }}" class="govuk-back-link {%- if params.classes %} {{ params.classes }}{% endif %}"
  {{- govukAttributes(params.attributes) }}>
- {{- params.html | safe if params.html else (params.text | default("Back")) -}}
+ {{- params.html | safe if params.html else (params.text | default("Back", true)) -}}
 </a>