Increase component test coverage

Author: colinrotherham

.eslintrc.js

@@ -150,7 +150,11 @@ module.exports = {
     },
     {
       // Configure ESLint in test files
-      files: ['**/*.test.{cjs,js,mjs}', 'jest.config.*', 'jest.setup.*'],
+      files: [
+        '**/*.test.{cjs,js,mjs}',
+        'jest?(.*).config.*',
+        'jest?(.*).setup.*'
+      ],
       extends: ['plugin:jest/recommended', 'plugin:jest/style'],
       env: {
         browser: true,

jest.config.js

@@ -41,14 +41,18 @@ module.exports = {
     {
       ...config,
       displayName: 'JavaScript behaviour tests',
-      setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+      setupFilesAfterEnv: [
+        '<rootDir>/shared/helpers/jest/environment/jest.jsdom.setup.js'
+      ],
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/**/*.jsdom.test.{js,mjs}']
     },
     {
       ...config,
       displayName: 'JavaScript component tests',
-      setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+      setupFilesAfterEnv: [
+        '<rootDir>/shared/helpers/jest/environment/jest.puppeteer.setup.js'
+      ],
       testEnvironment: 'jest-environment-puppeteer',
       testMatch: ['<rootDir>/**/*.puppeteer.test.{js,mjs}'],
 

packages/components/button/button.jsdom.test.mjs

@@ -1,11 +1,59 @@
+import { getByRole } from '@testing-library/dom'
+
 import initButton from './button.js'
 
-describe('mis-instantiation', () => {
-  it('does not prevent further JavaScript from running', () => {
-    expect(() => {
-      // `undefined` simulates the element being missing,
-      // from an unchecked `document.querySelector` for example
-      initButton(undefined)
-    }).not.toThrow()
+describe('Button', () => {
+  /** @type {HTMLButtonElement} */
+  let button
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
+        Save and continue
+      </button>
+    `
+
+    button = getByRole(document.body, 'button')
+
+    jest.spyOn(button, 'addEventListener')
+  })
+
+  describe('Exports', () => {
+    it('should export init function', () => {
+      expect(initButton).toBeInstanceOf(Function)
+    })
+  })
+
+  describe('Initialisation', () => {
+    it('should add event listeners', () => {
+      initButton()
+
+      expect(button.addEventListener).toHaveBeenNthCalledWith(
+        1,
+        'keydown',
+        expect.any(Function)
+      )
+
+      expect(button.addEventListener).toHaveBeenNthCalledWith(
+        2,
+        'click',
+        expect.any(Function)
+      )
+    })
+
+    it('should not throw with missing button', () => {
+      button.remove()
+      expect(() => initButton()).not.toThrow()
+    })
+
+    it('should not throw with empty body', () => {
+      document.body.innerHTML = ''
+      expect(() => initButton()).not.toThrow()
+    })
+
+    it('should not throw with empty scope', () => {
+      const scope = document.createElement('div')
+      expect(() => initButton({ scope })).not.toThrow()
+    })
   })
 })

packages/components/character-count/character-count.jsdom.test.mjs

@@ -0,0 +1,77 @@
+import { getByRole } from '@testing-library/dom'
+
+import initCharacterCount from './character-count.js'
+
+describe('Character count', () => {
+  /** @type {HTMLTextAreaElement} */
+  let textarea
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div class="nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="10">
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="more-detail">
+            Can you provide more detail?
+          </label>
+          <div class="nhsuk-hint" id="more-detail-hint">
+            Don't include personal or financial information, eg your National Insurance number or credit card details.
+          </div>
+          <textarea class="nhsuk-textarea nhsuk-js-character-count" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
+        </div>
+        <div class="nhsuk-hint nhsuk-character-count__message" id="more-detail-info">
+          You can enter up to 10 characters
+        </div>
+      </div>
+    `
+
+    const container = document.querySelector('.nhsuk-character-count')
+
+    textarea = getByRole(container, 'textbox', {
+      name: 'Can you provide more detail?'
+    })
+
+    jest.spyOn(textarea, 'addEventListener')
+  })
+
+  describe('Exports', () => {
+    it('should export init function', () => {
+      expect(initCharacterCount).toBeInstanceOf(Function)
+    })
+  })
+
+  describe('Initialisation', () => {
+    it('should add event listeners', () => {
+      initCharacterCount()
+
+      expect(textarea.addEventListener).toHaveBeenCalledWith(
+        'keyup',
+        expect.any(Function)
+      )
+
+      expect(textarea.addEventListener).toHaveBeenCalledWith(
+        'focus',
+        expect.any(Function)
+      )
+
+      expect(textarea.addEventListener).toHaveBeenCalledWith(
+        'blur',
+        expect.any(Function)
+      )
+    })
+
+    it('should not throw with missing textarea', () => {
+      textarea.remove()
+      expect(() => initCharacterCount()).not.toThrow()
+    })
+
+    it('should not throw with empty body', () => {
+      document.body.innerHTML = ''
+      expect(() => initCharacterCount()).not.toThrow()
+    })
+
+    it('should not throw with empty scope', () => {
+      const scope = document.createElement('div')
+      expect(() => initCharacterCount({ scope })).not.toThrow()
+    })
+  })
+})