Remove dom-helpers

Waiting for further discussion about abstraction in #2894
alphagov · Oct 10, 2022 · 82bdf28 · 82bdf28
1 parent 747a8ff
commit 82bdf28
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/lib/dom-helpers.mjs b/lib/dom-helpers.mjs
diff --git a/src/govuk/common.unit.test.mjs b/src/govuk/common.unit.test.mjs
@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 
-import { createElement, createFragmentFromHTML } from '../../lib/dom-helpers.mjs'
 import { mergeConfigs, extractConfigByNamespace, normaliseString, normaliseDataset, closestAttributeValue } from './common.mjs'
 
 // TODO: Write unit tests for `nodeListForEach` and `generateUniqueID`
@@ -220,29 +219,32 @@ describe('Common JS utilities', () => {
 
   describe('closestAttributeValue', () => {
     it('returns the value of the attribute if on the element', () => {
-      const $element = createElement('div', { lang: 'en-GB' })
+      const $element = document.createElement('div')
+      $element.setAttribute('lang', 'en-GB')
 
       expect(closestAttributeValue($element, 'lang')).toEqual('en-GB')
     })
 
     it('returns the value of the closest parent with the attribute if it exists', () => {
-      const dom = createFragmentFromHTML(`
+      const template = document.createElement('template')
+      template.innerHTML = `
         <div lang="cy-GB"><!-- To check that we take the first value up -->
           <div lang="en-GB"><!-- The value we should get -->
             <div><!-- To check that we walk up the tree -->
               <div class="target"></div>
             </div>
           </div>
         </div>
-      `)
+      `
+      const dom = template.content.cloneNode(true)
       const $element = dom.querySelector('.target')
 
       expect(closestAttributeValue($element, 'lang')).toEqual('en-GB')
     })
 
     it('returns undefined if neither the element or a parent have the attribute', () => {
-      const $parent = createElement('div')
-      const $element = createElement('div')
+      const $parent = document.createElement('div')
+      const $element = document.createElement('div')
       $parent.appendChild($element)
 
       expect(closestAttributeValue($element, 'lang')).toBeUndefined()

diff --git a/src/govuk/components/character-count/character-count.unit.test.mjs b/src/govuk/components/character-count/character-count.unit.test.mjs
@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 
-import { createElement } from '../../../../lib/dom-helpers.mjs'
 import CharacterCount from './character-count.mjs'
 
 describe('CharacterCount', () => {
@@ -11,7 +10,7 @@ describe('CharacterCount', () => {
       let component
       beforeAll(() => {
         // The component won't initialise if we don't pass it an element
-        component = new CharacterCount(createElement('div'))
+        component = new CharacterCount(document.createElement('div'))
       })
 
       const cases = [
@@ -42,40 +41,44 @@ describe('CharacterCount', () => {
     describe('i18n', () => {
       describe('JavaScript configuration', () => {
         it('overrides the default translation keys', () => {
-          const component = new CharacterCount(createElement('div'), {
+          const component = new CharacterCount(document.createElement('div'), {
             i18n: { charactersUnderLimitOne: 'Custom text. Count: %{count}' },
             'i18n.charactersOverLimitOther': 'Different custom text. Count: %{count}'
           })
+
           expect(component.formatCountMessage(1, 'characters')).toEqual('Custom text. Count: 1')
           expect(component.formatCountMessage(-10, 'characters')).toEqual('Different custom text. Count: 10')
           // Other keys remain untouched
           expect(component.formatCountMessage(10, 'characters')).toEqual('You have 10 characters remaining')
         })
 
         it('uses specific keys for when limit is reached', () => {
-          const component = new CharacterCount(createElement('div'), {
+          const component = new CharacterCount(document.createElement('div'), {
             i18n: { charactersAtLimit: 'Custom text.' },
             'i18n.wordsAtLimit': 'Different custom text.'
           })
+
           expect(component.formatCountMessage(0, 'characters')).toEqual('Custom text.')
           expect(component.formatCountMessage(0, 'words')).toEqual('Different custom text.')
         })
       })
 
       describe('lang attribute configuration', () => {
         it('overrides the locale when set on the element', () => {
-          const $div = createElement('div', {
-            lang: 'de'
-          })
+          const $div = document.createElement('div')
+          $div.setAttribute('lang', 'de')
+
           const component = new CharacterCount($div)
 
           expect(component.formatCountMessage(10000, 'words')).toEqual('You have 10.000 words remaining')
         })
 
         it('overrides the locale when set on an ancestor', () => {
-          const $parent = createElement('div', { lang: 'de' })
-          const $div = createElement('div')
+          const $parent = document.createElement('div')
+          $parent.setAttribute('lang', 'de')
+          const $div = document.createElement('div')
           $parent.appendChild($div)
+
           const component = new CharacterCount($div)
 
           expect(component.formatCountMessage(10000, 'words')).toEqual('You have 10.000 words remaining')
@@ -84,16 +87,21 @@ describe('CharacterCount', () => {
 
       describe('Data attribute configuration', () => {
         it('overrides the default translation keys', () => {
-          const $div = createElement('div', { 'data-i18n.characters-under-limit-one': 'Custom text. Count: %{count}' })
+          const $div = document.createElement('div')
+          $div.setAttribute('data-i18n.characters-under-limit-one', 'Custom text. Count: %{count}')
+
           const component = new CharacterCount($div)
+
           expect(component.formatCountMessage(1, 'characters')).toEqual('Custom text. Count: 1')
           // Other keys remain untouched
           expect(component.formatCountMessage(10, 'characters')).toEqual('You have 10 characters remaining')
         })
 
         describe('precedence over JavaScript configuration', () => {
           it('overrides translation keys', () => {
-            const $div = createElement('div', { 'data-i18n.characters-under-limit-one': 'Custom text. Count: %{count}' })
+            const $div = document.createElement('div')
+            $div.setAttribute('data-i18n.characters-under-limit-one', 'Custom text. Count: %{count}')
+
             const component = new CharacterCount($div, {
               i18n: {
                 charactersUnderLimitOne: 'Different custom text. Count: %{count}'