Merge pull request #1766 from nhsuk/nested-attribute-tests

Align attributes macro JSON escaping with Jinja2

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/macros/attributes.njk

@@ -117,8 +117,15 @@
         {% set valueEscaped = options.value %}
 
       {#- Use escaped JSON for iterable values -#}
+      {#- https://jinja.palletsprojects.com/en/stable/templates/#jinja-filters.tojson -#}
       {%- elif options.type === "array" and options.value is iterable %}
-        {% set valueEscaped = options.value | dump %}
+        {% set valueEscaped = options.value
+          | dump
+          | replace("<", "\\u003c")
+          | replace(">", "\\u003e")
+          | replace("&", "\\u0026")
+          | replace("'", "\\u0027")
+        %}
 
       {#- Otherwise assume escaping is necessary -#}
       {#- https://github.com/alphagov/govuk-frontend/issues/4940 -#}

packages/nhsuk-frontend/src/nhsuk/macros/attributes.unit.test.mjs

@@ -54,6 +54,53 @@ describe('attributes.njk', () => {
       expect(attributes).toBe(' data-attributes=\'["value1","value2"]\'')
     })
 
+    it('renders array attributes values with escaping', () => {
+      const attributes = nunjucks.renderMacro(
+        'nhsukAttributes',
+        'nhsuk/macros/attributes.njk',
+        {
+          context: {
+            'data-quotes-double': {
+              type: 'array',
+              value: ['value "1"']
+            },
+            'data-quotes-single': {
+              type: 'array',
+              value: ["value '2'"]
+            },
+            'data-quotes-mixed': {
+              type: 'array',
+              value: ['value "\'3\'"']
+            },
+            'data-html-elements': {
+              type: 'array',
+              value: ['value <strong>4</strong>']
+            },
+            'data-html-entities': {
+              type: 'array',
+              value: ['value & 5']
+            },
+            'data-html-entities-double': {
+              type: 'array',
+              value: ['value &amp; 6']
+            }
+          }
+        }
+      )
+
+      // Note that single quotes are only used when rendering arrays that contain double quotes
+      expect(attributes).toBe(
+        [
+          ' data-quotes-double=\'["value \\"1\\""]\'',
+          ' data-quotes-single=\'["value \\u00272\\u0027"]\'',
+          ' data-quotes-mixed=\'["value \\"\\u00273\\u0027\\""]\'',
+          ' data-html-elements=\'["value \\u003cstrong\\u003e4\\u003c/strong\\u003e"]\'',
+          ' data-html-entities=\'["value \\u0026 5"]\'',
+          ' data-html-entities-double=\'["value \\u0026amp; 6"]\''
+        ].join('')
+      )
+    })
+
     it('renders multiple attributes', () => {
       const attributes = nunjucks.renderMacro(
         'nhsukAttributes',
@@ -84,7 +131,14 @@ describe('attributes.njk', () => {
 
       // Note that single quotes are only used when rendering arrays that contain double quotes
       expect(attributes).toBe(
-        ' data-attribute="value" data-second-attribute="second-value" data-third-attribute="third-value" data-fourth-attribute=\'["fourth-value"]\' data-fifth-attribute="[true]" data-sixth-attribute="[]"'
+        [
+          ' data-attribute="value"',
+          ' data-second-attribute="second-value"',
+          ' data-third-attribute="third-value"',
+          ' data-fourth-attribute=\'["fourth-value"]\'',
+          ' data-fifth-attribute="[true]"',
+          ' data-sixth-attribute="[]"'
+        ].join('')
       )
     })