From 8ad4fa671c33c6a2aee1a3f931fddf44ea38ca4c Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 7 Jun 2024 17:44:26 +0100
Subject: [PATCH 1/2] Rename tag template tests to .jsdom.test.js

The next commit will refactor the tests to make use of jsdom which requires us to update the filename so that we get the jsdom test environment.

Doing this in two commits so that git shows the changes to the file rather than treating it as an addition and a deletion.
---
 .../components/tag/{template.test.js => template.jsdom.test.js}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/govuk-frontend/src/govuk/components/tag/{template.test.js => template.jsdom.test.js} (100%)

diff --git a/packages/govuk-frontend/src/govuk/components/tag/template.test.js b/packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js
similarity index 100%
rename from packages/govuk-frontend/src/govuk/components/tag/template.test.js
rename to packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js

From 06e18930f4a1ec4bba2090aa5322733bc4810ec0 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 7 Jun 2024 17:46:14 +0100
Subject: [PATCH 2/2] Update tag template tests to use jsdom

---
 .../components/tag/template.jsdom.test.js     | 66 ++++++++-----------
 1 file changed, 29 insertions(+), 37 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js
index aeec33ad19..015e989b5b 100644
--- a/packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js
+++ b/packages/govuk-frontend/src/govuk/components/tag/template.jsdom.test.js
@@ -1,5 +1,4 @@
-const { render } = require('@govuk-frontend/helpers/nunjucks')
-const { getExamples } = require('@govuk-frontend/lib/components')
+const { getExamples, render } = require('@govuk-frontend/lib/components')
 
 describe('Tag', () => {
   let examples
@@ -8,53 +7,46 @@ describe('Tag', () => {
     examples = await getExamples('tag')
   })
 
-  describe('default example', () => {
-    it('renders the default example with strong element and text', () => {
-      const $ = render('tag', examples.default)
+  it('outputs a <strong> element', () => {
+    document.body.innerHTML = render('tag', examples.default)
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.get(0).tagName).toBe('strong')
-      expect($component.text()).toContain('Alpha')
-    })
+    expect($component.tagName).toBe('STRONG')
+  })
 
-    it('renders classes', () => {
-      const $ = render('tag', examples.grey)
+  it('contains the content from the `text` option', () => {
+    document.body.innerHTML = render('tag', examples.default)
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.hasClass('govuk-tag--grey')).toBeTruthy()
-    })
+    expect($component).toHaveTextContent('Alpha')
   })
 
-  describe('custom options', () => {
-    it('renders custom text', () => {
-      const $ = render('tag', examples.grey)
+  it('includes additional classes from the `classes` option', () => {
+    document.body.innerHTML = render('tag', examples.grey)
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.html()).toContain('Grey')
-    })
+    expect($component).toHaveClass('govuk-tag--grey')
+  })
 
-    it('renders attributes', () => {
-      const $ = render('tag', examples.attributes)
+  it('escapes HTML when using the `text` option', () => {
+    document.body.innerHTML = render('tag', examples['html as text'])
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.attr('data-test')).toBe('attribute')
-      expect($component.attr('id')).toBe('my-tag')
-    })
+    expect($component).toHaveTextContent('<span>Alpha</span>')
   })
 
-  describe('html', () => {
-    it('renders escaped html when passed to text', () => {
-      const $ = render('tag', examples['html as text'])
+  it('does not escape HTML when using the `html` option', () => {
+    document.body.innerHTML = render('tag', examples.html)
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.html()).toContain('&lt;span&gt;Alpha&lt;/span&gt;')
-    })
+    expect($component).toContainHTML('<span>Alpha</span>')
+  })
 
-    it('renders html', () => {
-      const $ = render('tag', examples.html)
+  it('sets any additional attributes based on the `attributes` option', () => {
+    document.body.innerHTML = render('tag', examples.attributes)
+    const $component = document.querySelector('.govuk-tag')
 
-      const $component = $('.govuk-tag')
-      expect($component.html()).toContain('<span>Alpha</span>')
-    })
+    expect($component).toHaveAttribute('data-test', 'attribute')
+    expect($component).toHaveAttribute('id', 'my-tag')
   })
 })