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.
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.
What
Update the existing template tests to use jsdom and the matchers provided by
@testing-library/jsdomrather 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:
After:
It'd also allow us to use other more useful matchers like
toHaveAccessibleDescription,toHaveName,toHaveRolewhich are simpler and better convey intention than checking the association as we currently do:Before:
After:
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