Merge pull request #6447 from alphagov/fix-pagination-empty-items-v6

Author: querkmachine

CHANGELOG.md

@@ -267,6 +267,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#5311: Remove non-operational value parameter from file upload component](https://github.com/alphagov/govuk-frontend/pull/5311)
 - [#6434: Fix rebranded header background being visible when printed](https://github.com/alphagov/govuk-frontend/pull/6434) - thanks to @lewis-softwire for reporting this issue
+- [#6447: Fix pagination outputting empty links when provided a null or empty value](https://github.com/alphagov/govuk-frontend/pull/6447) – thanks to @NikhilNanjappa for reporting this issue
 
 ## v6.0.0-beta.0 (Beta breaking release)
 

packages/govuk-frontend/src/govuk/components/pagination/pagination.yaml

@@ -206,6 +206,7 @@ examples:
     options:
       next:
         href: '/next'
+
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: with custom classes
     hidden: true
@@ -275,3 +276,13 @@ examples:
         - number: 3
           href: '/page/3'
           visuallyHiddenText: '3rd page'
+  - name: with empty items
+    hidden: true
+    options:
+      items:
+        - number: 1
+          href: '/page/1'
+        - null
+        - {}
+        - number: 4
+          href: '/page/4'

packages/govuk-frontend/src/govuk/components/pagination/template.njk

@@ -68,7 +68,9 @@
   {%- if params.items %}
   <ul class="govuk-pagination__list">
   {% for item in params.items %}
-    {{ _pageItem(item) | indent(2) }}
+    {% if item is not null and (item | length) > 0 %}
+      {{ _pageItem(item) | indent(2) }}
+    {% endif %}
   {% endfor %}
   </ul>
   {% endif %}

packages/govuk-frontend/src/govuk/components/pagination/template.test.js

@@ -62,6 +62,13 @@ describe('Pagination', () => {
       // Test for the unicode character of ⋯
       expect($firstEllipsis.text().trim()).toBe('\u22ef')
     })
+
+    it('does not output empty list items', () => {
+      const $ = render('pagination', examples['with empty items'])
+      const $listItems = $('.govuk-pagination__item')
+
+      expect($listItems).toHaveLength(2)
+    })
   })
 
   describe('with custom text, labels and landmarks', () => {