Merge pull request #1638 from dorightdigital/identify-empty-arrays

Check component item arrays are not empty before outputting markup
alphagov · Nov 20, 2019 · 6646ddc · 6646ddc
2 parents f26c242 + 8b2cbef
commit 6646ddc
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### Fixes
 
 - [Pull request #1655: Ensure components use public `govuk-media-query` mixin](https://github.com/alphagov/govuk-frontend/pull/1655).
+- [Pull request #1638: Check component item arrays are not empty before outputting markup](https://github.com/alphagov/govuk-frontend/pull/1638).
 
 ## 3.4.0 (Feature release)
 
@@ -58,7 +59,6 @@ You can now add attributes to the `<body>` element of a page, by using the [`bod
 - [Pull request #1620: Only add underline to back link when href exists ](https://github.com/alphagov/govuk-frontend/pull/1620).
 - [Pull request #1631: Fix classes on character count when in error state](https://github.com/alphagov/govuk-frontend/pull/1631).
 
-
 ## 3.3.0 (Feature release)
 
 ### New features

diff --git a/src/govuk/components/date-input/template.njk b/src/govuk/components/date-input/template.njk
@@ -7,7 +7,7 @@
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
 
-{% if params.items %}
+{% if params.items | length %}
   {% set dateInputItems = params.items %}
 {% else %}
   {% set dateInputItems = [

diff --git a/src/govuk/components/date-input/template.test.js b/src/govuk/components/date-input/template.test.js
@@ -69,6 +69,15 @@ describe('Date input', () => {
       expect($items.length).toEqual(3)
     })
 
+    it('renders defaults when an empty item array is provided', () => {
+      const $ = render('date-input', {
+        items: []
+      })
+
+      const $items = $('.govuk-date-input__item')
+      expect($items.length).toEqual(3)
+    })
+
     it('renders with default items', () => {
       const $ = render('date-input', {})
 

diff --git a/src/govuk/components/footer/template.njk b/src/govuk/components/footer/template.njk
@@ -1,12 +1,12 @@
 <footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
-    {% if params.navigation %}
+    {% if params.navigation | length %}
       <div class="govuk-footer__navigation">
         {% for nav in params.navigation %}
           <div class="govuk-footer__section">
             <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
-            {% if nav.items %}
+            {% if nav.items | length %}
               {% set listClasses %}
                 {% if nav.columns %}
                   govuk-footer__list--columns-{{ nav.columns }}
@@ -33,7 +33,7 @@
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
         {% if params.meta %}
           <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
-          {% if params.meta.items %}
+          {% if params.meta.items | length %}
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">

diff --git a/src/govuk/components/footer/template.test.js b/src/govuk/components/footer/template.test.js
@@ -24,6 +24,15 @@ describe('footer', () => {
     expect($component.attr('role')).toEqual('contentinfo')
   })
 
+  it('no items displayed when no item array is provided', () => {
+    const $ = render('footer', {
+      navigation: []
+    })
+
+    const $component = $('.govuk-footer')
+    expect($component.find('.govuk-footer__navigation').length).toEqual(0)
+  })
+
   it('renders attributes correctly', () => {
     const $ = render('footer', {
       attributes: {
@@ -83,6 +92,15 @@ describe('footer', () => {
       expect($heading.text()).toEqual('Support links')
     })
 
+    it('doesn\'t render footer link list when no items are provided', () => {
+      const $ = render('footer', {
+        meta: { items: [] }
+      })
+
+      const $component = $('.govuk-footer')
+      expect($component.find('.govuk-footer__inline-list').length).toEqual(0)
+    })
+
     it('renders links', () => {
       const $ = render('footer', examples['with meta'])
 

diff --git a/src/govuk/components/summary-list/template.njk b/src/govuk/components/summary-list/template.njk
@@ -10,7 +10,7 @@
 {# Determine if we need 2 or 3 columns #}
 {% set anyRowHasActions = false %}
 {% for row in params.rows %}
-  {% set anyRowHasActions = true if row.actions.items else anyRowHasActions %}
+  {% set anyRowHasActions = true if row.actions.items | length else anyRowHasActions %}
 {% endfor -%}
 
 <dl class="govuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>

diff --git a/src/govuk/components/summary-list/template.test.js b/src/govuk/components/summary-list/template.test.js
@@ -383,7 +383,7 @@ describe('Data list', () => {
 
         expect($action.hasClass('govuk-link--no-visited-state')).toBeTruthy()
       })
-      it('skips the action column when none are provided', async () => {
+      it('skips the action column when no array is provided', async () => {
         const $ = render('summary-list', {
           rows: [
             {
@@ -402,6 +402,28 @@ describe('Data list', () => {
 
         expect($action.length).toEqual(0)
       })
+      it('skips the action column when no items are in the array provided', async () => {
+        const $ = render('summary-list', {
+          rows: [
+            {
+              key: {
+                text: 'Name'
+              },
+              value: {
+                text: 'Firstname Lastname'
+              },
+              actions: {
+                items: []
+              }
+            }
+          ]
+        })
+
+        const $component = $('.govuk-summary-list')
+        const $action = $component.find('.govuk-summary-list__actions')
+
+        expect($action.length).toEqual(0)
+      })
       it('adds dummy action columns when only some rows have actions', async () => {
         const $ = render('summary-list', {
           rows: [

diff --git a/src/govuk/components/tabs/template.njk b/src/govuk/components/tabs/template.njk
@@ -6,7 +6,7 @@
   <h2 class="govuk-tabs__title">
     {{ params.title | default ("Contents") }}
   </h2>
-  {% if(params.items) %}
+  {% if(params.items | length) %}
   <ul class="govuk-tabs__list">
     {% for item in params.items %}
       {% if item %}

diff --git a/src/govuk/components/tabs/template.test.js b/src/govuk/components/tabs/template.test.js
@@ -57,6 +57,20 @@ describe('Tabs', () => {
     })
 
     describe('items', () => {
+      it('doesn\'t render a list if items is not defined', () => {
+        const $ = render('tabs', {})
+
+        const $component = $('.govuk-tabs')
+        expect($component.find('.govuk-tabs__list').length).toEqual(0)
+      })
+
+      it('doesn\'t render a list if items is empty', () => {
+        const $ = render('tabs', { items: [] })
+
+        const $component = $('.govuk-tabs')
+        expect($component.find('.govuk-tabs__list').length).toEqual(0)
+      })
+
       it('render a matching tab and panel using item id', () => {
         const $ = render('tabs', {
           items: [