Add tests for `govuk-c-radios` component #476

NickColley · 2018-01-29T14:38:25Z

includes new example disabled radios
includes new example with all fieldset params set

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

NickColley · 2018-01-29T15:23:02Z

src/components/radios/template.test.js

+    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()


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?

See the same for label and error message.

alex-ju · 2018-01-29T18:15:10Z

src/components/radios/template.test.js

+    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')


Fails here. I think you meant:
expect($firstLabel.text().trim()).toEqual('Yes')

Might be able to use toContain, will update

alex-ju · 2018-01-29T18:15:33Z

src/components/radios/template.test.js

+    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')


expect($lastLabel.text().trim()).toEqual('No')

alex-ju

Overall looks good to me, but if we're aiming for single expects per test should probably need a lot of splitting.

Update: had a chat with Nick and decided to use snapshots for interconnected components.

NickColley · 2018-02-01T10:20:42Z

Just setting this to WIP, need to update based on Alex's feedback

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.

NickColley · 2018-02-01T11:42:53Z

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?

New changes have been made

NickColley · 2018-02-01T12:32:20Z

Talked to Alex, going to add some comments to document the jest-helpers

NickColley · 2018-02-01T12:56:26Z

lib/jest-helpers.js

+ * @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 })


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.

alex-ju

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.

NickColley · 2018-02-01T17:54:03Z

Will write up this approach for the docs

alex-ju · 2018-02-01T17:57:30Z

@NickColley, @hannalaakso also wants to update the docs on how to write tests, would be good to catch up or split the work

hannalaakso · 2018-02-02T13:09:44Z

Sounds good to me. @NickColley go ahead and write up your approach and I can contribute to the docs 🙂

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 29, 2018 14:38 Inactive

NickColley commented Jan 29, 2018

View reviewed changes

NickColley force-pushed the add-tests-for-radios-component branch from 0c387c0 to 960238a Compare January 29, 2018 15:25

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 29, 2018 15:25 Inactive

NickColley force-pushed the add-tests-for-radios-component branch from 960238a to d14bafb Compare January 29, 2018 15:29

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 29, 2018 15:29 Inactive

NickColley force-pushed the add-tests-for-radios-component branch from d14bafb to 220246f Compare January 29, 2018 15:30

NickColley changed the title ~~WIP: Add tests for radios component~~ Add tests for govuk-c-radios component Jan 29, 2018

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 29, 2018 15:30 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 29, 2018 15:31 Inactive

alex-ju reviewed Jan 29, 2018

View reviewed changes

NickColley force-pushed the add-tests-for-radios-component branch from 6324659 to 7b48994 Compare January 30, 2018 10:22

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 30, 2018 10:22 Inactive

NickColley force-pushed the add-tests-for-radios-component branch from 7b48994 to 391a18d Compare January 30, 2018 10:28

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 30, 2018 10:28 Inactive

alex-ju reviewed Jan 30, 2018

View reviewed changes

alex-ju previously approved these changes Jan 31, 2018

View reviewed changes

NickColley force-pushed the add-tests-for-radios-component branch from 391a18d to 56acbbb Compare January 31, 2018 17:58

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 January 31, 2018 17:58 Inactive

NickColley changed the title ~~Add tests for govuk-c-radios component~~ WIP: Add tests for govuk-c-radios component Feb 1, 2018

NickColley force-pushed the add-tests-for-radios-component branch from 56acbbb to da536da Compare February 1, 2018 11:38

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 February 1, 2018 11:38 Inactive

NickColley changed the title ~~WIP: Add tests for govuk-c-radios component~~ Add tests for govuk-c-radios component Feb 1, 2018

NickColley and others added 3 commits February 1, 2018 11:40

Add tests for radios component

6951b9d

Includes new example disabled radios

Add snapshot tests for dependant components

30e594f

Uses shapshots tests against label, fieldset components. Adds an extreme fieldset example to test all params that can be passed through.

Update changelog to include radios updates

35d2c99

NickColley force-pushed the add-tests-for-radios-component branch from da536da to 35d2c99 Compare February 1, 2018 11:42

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 February 1, 2018 11:42 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 February 1, 2018 12:49 Inactive

Add jsdoc comments to jest helper functions

0b1b11f

NickColley force-pushed the add-tests-for-radios-component branch from ec1f522 to 0b1b11f Compare February 1, 2018 12:51

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-476 February 1, 2018 12:51 Inactive

NickColley commented Feb 1, 2018

View reviewed changes

Simplify render helper, only return $ instance

ba3f737

If we're using the htmlWithClassName function, the output returned value from render is now not useful.

govuk-design-system-ci deployed to govuk-frontend-review-pr-476 February 1, 2018 13:02 View deployment

alex-ju reviewed Feb 1, 2018

View reviewed changes

alex-ju approved these changes Feb 1, 2018

View reviewed changes

NickColley merged commit 2b8b4da into master Feb 1, 2018

NickColley deleted the add-tests-for-radios-component branch February 1, 2018 17:53

alex-ju mentioned this pull request Feb 20, 2018

Frontend release 0.0.23 #537

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tests for `govuk-c-radios` component #476

Add tests for `govuk-c-radios` component #476

NickColley commented Jan 29, 2018 •

edited

Loading

NickColley Jan 29, 2018

NickColley Jan 29, 2018

alex-ju Jan 29, 2018

NickColley Jan 30, 2018

alex-ju Jan 29, 2018

alex-ju left a comment •

edited

Loading

NickColley commented Feb 1, 2018

NickColley commented Feb 1, 2018

NickColley commented Feb 1, 2018

NickColley Feb 1, 2018

alex-ju left a comment •

edited

Loading

NickColley commented Feb 1, 2018

alex-ju commented Feb 1, 2018

hannalaakso commented Feb 2, 2018

Add tests for govuk-c-radios component #476

Add tests for govuk-c-radios component #476

Conversation

NickColley commented Jan 29, 2018 • edited Loading

NickColley Jan 29, 2018

Choose a reason for hiding this comment

NickColley Jan 29, 2018

Choose a reason for hiding this comment

alex-ju Jan 29, 2018

Choose a reason for hiding this comment

NickColley Jan 30, 2018

Choose a reason for hiding this comment

alex-ju Jan 29, 2018

Choose a reason for hiding this comment

alex-ju left a comment • edited Loading

Choose a reason for hiding this comment

NickColley commented Feb 1, 2018

NickColley commented Feb 1, 2018

NickColley commented Feb 1, 2018

NickColley Feb 1, 2018

Choose a reason for hiding this comment

alex-ju left a comment • edited Loading

Choose a reason for hiding this comment

NickColley commented Feb 1, 2018

alex-ju commented Feb 1, 2018

hannalaakso commented Feb 2, 2018

Add tests for `govuk-c-radios` component #476

Add tests for `govuk-c-radios` component #476

NickColley commented Jan 29, 2018 •

edited

Loading

alex-ju left a comment •

edited

Loading

alex-ju left a comment •

edited

Loading