Merge pull request #5191 from alphagov/fix-back-link-falsy-values

Fix rendering of Back link's `href` and `text` for falsy values
alphagov · Aug 6, 2024 · 85f5de1 · 85f5de1
2 parents 15a586c + 6d99967
commit 85f5de1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 19 deletions.
diff --git 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)
 

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
@@ -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', () => {

diff --git 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 -%}
 
-<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>