Migrate template tests from Cheerio to jsdom

[36degrees]

What

Update the existing template tests to use jsdom and the matchers provided by @testing-library/jsdom rather than loading the HTML into a Cheerio instance.

Remove the dependency on Cheerio.

Why

We currently render the template to HTML and then load it into a Cheerio instance which we can use to check the state of the HTML by using Cheerio methods like hasClass.

However, if we instead used jsdom (through jest-environment-jsdom) we can make use of the matchers provided by @testing-library/jsdom).

Before:

    it('renders with classes', () => {
      const $ = render('button', examples.classes)

      const $component = $('.govuk-button')
      expect($component.hasClass('app-button--custom-modifier')).toBeTruthy()
    })

After:

    it('renders with classes', () => { 
      document.body.innerHTML = render('button', examples.grey)

      const $component = document.querySelector('.govuk-button')
      expect($component).toHaveClass('app-button--custom-modifier')
    })

It'd also allow us to use other more useful matchers like toHaveAccessibleDescription, toHaveName, toHaveRole which are simpler and better convey intention than checking the association as we currently do:

Before:

    it('associates the input as "described by" the hint', () => {
      const $ = render('input', examples['with hint text'])

      const $input = $('.govuk-input')
      const hintId = $('.govuk-hint').attr('id')

      const describedBy = new RegExp(
        `${WORD_BOUNDARY}${hintId}${WORD_BOUNDARY}`
      )

      expect($input.attr('aria-describedby')).toMatch(describedBy)
    })

After:

    it('associates the input as "described by" the hint', () => {
      document.body.innerHTML = render('input', examples['with hint text'])

      const $input = document.querySelector('.govuk-input')
      expect($input).toHaveAccessibleDescription(
        "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
      )
    })

Finally, given we aren't using jQuery anywhere else in the codebase, this also means that we only need to remember a single syntax, rather than switching between 'vanilla JavaScript' in our JavaScript and the jQuery-esque Cheerio syntax.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

Update the template tests

Preview Give feedback

1. Update accordion template tests to use jsdom #5025
   +0
2. Update back link template tests to use jsdom #5026
   +0
3. Update breadcrumbs template tests to use jsdom #5027
   +0
4. Button template tests updated
5. Character Count template tests updated
6. Checkboxes template tests updated
7. Cookie Banner template tests updated
8. Date Input template tests updated
9. Details template tests updated
10. Error Message template tests updated
11. Error Summary template tests updated
12. Exit this Page template tests updated
13. Fieldset template tests updated
14. File Upload template tests updated
15. Footer template tests updated
16. Header template tests updated
17. Update hint template tests to use jsdom #5050
    +0
18. Update input template tests to use jsdom #5017
    +0
19. Inset Text template tests updated
20. Label template tests updated
21. Notification Banner template tests updated
22. Pagination template tests updated
23. Panel template tests updated
24. Password Input template tests updated
25. Phase Banner template tests updated
26. Radios template tests updated
27. Select template tests updated
28. Skip Link template tests updated
29. Summary List template tests updated
30. Table template tests updated
31. Tabs template tests updated
32. Update tag template tests to use jsdom #5049
    +0
33. Update task list template tests to use jsdom #5045
    +0
34. Textarea template tests updated
35. Update warning text template tests to use jsdom #5065
    +0
36. Update page template tests to use jsdom #5062
    +0

Tidy up

Preview Give feedback

1. shared/helpers/nunjucks.js has been updated to remove unused helpers
2. Cheerio has been removed from our dependencies