Add tests for govuk-c-radios component
#476
Conversation
| expect($component.find('.govuk-c-error-message').text()).toContain('Please select an option') | ||
|
|
||
| const $fieldset = $('.govuk-c-fieldset') | ||
| expect($fieldset.hasClass('app-c-fieldset--custom-modifier')).toBeTruthy() |
There was a problem hiding this comment.
Lots of assertions here since we just want to know that the fieldset plays nice inside this component. Feels over the top to do individual test blocks (which should be done in the fieldset component tests), maybe a snapshot test would be better here?
There was a problem hiding this comment.
See the same for label and error message.
0c387c0 to
960238a
Compare
960238a to
d14bafb
Compare
d14bafb to
220246f
Compare
govuk-c-radios component
| const $firstInput = $component.find('.govuk-c-radios__item:first-child input') | ||
| const $firstLabel = $component.find('.govuk-c-radios__item:first-child label') | ||
| expect($firstInput.attr('name')).toEqual('example-name') | ||
| expect($firstLabel.text()).toEqual('example-name') |
There was a problem hiding this comment.
Fails here. I think you meant:
expect($firstLabel.text().trim()).toEqual('Yes')
There was a problem hiding this comment.
Might be able to use toContain, will update
| const $lastInput = $component.find('.govuk-c-radios__item:last-child input') | ||
| const $lastLabel = $component.find('.govuk-c-radios__item:last-child label') | ||
| expect($lastInput.attr('name')).toEqual('example-name') | ||
| expect($lastLabel.text()).toEqual('example-name') |
There was a problem hiding this comment.
expect($lastLabel.text().trim()).toEqual('No')
6324659 to
7b48994
Compare
7b48994 to
391a18d
Compare
391a18d to
56acbbb
Compare
govuk-c-radios componentgovuk-c-radios component
|
Just setting this to WIP, need to update based on Alex's feedback |
56acbbb to
da536da
Compare
govuk-c-radios componentgovuk-c-radios component
Includes new example disabled radios
Uses shapshots tests against label, fieldset components. Adds an extreme fieldset example to test all params that can be passed through.
da536da to
35d2c99
Compare
|
Updated, I've added a new jest helper method that will allow us to only snapshot parts of the HTML we care about. Would appreciate your thoughts, does it make sense? |
|
Talked to Alex, going to add some comments to document the jest-helpers |
ec1f522 to
0b1b11f
Compare
lib/jest-helpers.js
Outdated
| * @param {string} params parameters that are used in the component template | ||
| * @returns {object} returns object that includes raw HTML (output) and | ||
| * also a cheerio (jQuery) instance of the template for easy DOM querying | ||
| */ | ||
| function render (componentName, params) { | ||
| const output = nunjucks.render(componentName + '/template.njk', { params }) |
There was a problem hiding this comment.
Wonder if we need this output anymore since it was originally used for snapshot testing...
If we're using the htmlWithClassName function, the output returned value from render is now not useful.
There was a problem hiding this comment.
Thanks for the updates @NickColley!
I think it's worth saying that the snapshots are ensuring us that if the component changes, the way it's rendered within or in connection with other components doesn't change.
I can approve this again, but would be good to have a second pair of eyes on this, maybe from @hannalaakso too as she will be working o the govuk-c-checkboxes in a similar way.
Update: talked to Hanna about it.
|
Will write up this approach for the docs |
|
@NickColley, @hannalaakso also wants to update the docs on how to write tests, would be good to catch up or split the work |
|
Sounds good to me. @NickColley go ahead and write up your approach and I can contribute to the docs 🙂 |
Uses snapshot testing to test the dependant components - Label and Fieldset.
This ensures that all values that can be passed through the Radio components params through to
either component is tested, and if we change the behavour in either the Label or Fieldset component
we will see a change to confirm in this component.
Snapshot testing makes use of a custom serializer to make the diffs easy to read
As part of https://trello.com/c/G8rFbXWB/641-automated-tests-for-radios-component