From 5188f0a73450e4e2a3d92689d6cc284de9b49a39 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 9 Dec 2019 13:41:29 +0000 Subject: [PATCH] Refactor radios and checkboxes tests fixtures Instead of using a big single fixture for all tests, update the tests so they have the relevant fixtures for each test. This will be used by the snapshot tests which will confirm that the hints render the correct information when it's given to them. --- .../__snapshots__/template.test.js.snap | 11 ++ .../components/checkboxes/checkboxes.yaml | 23 ---- .../components/checkboxes/template.test.js | 129 +++++++++++++++--- .../__snapshots__/template.test.js.snap | 11 ++ src/govuk/components/radios/radios.yaml | 22 --- src/govuk/components/radios/template.test.js | 121 +++++++++++++--- 6 files changed, 238 insertions(+), 79 deletions(-) diff --git a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap index 05d968c651..335be1d806 100644 --- a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap +++ b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap @@ -47,6 +47,17 @@ exports[`Checkboxes when they include a hint renders the hint 1`] = ` > If you have dual nationality, select all options that are relevant to you. + + Hint for british option here + + + Hint for other option here + `; exports[`Checkboxes when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml index aff1facee9..dd3bfe3b99 100644 --- a/src/govuk/components/checkboxes/checkboxes.yaml +++ b/src/govuk/components/checkboxes/checkboxes.yaml @@ -261,29 +261,6 @@ examples: - value: other text: Citizen of another country -- name: with all fieldset attributes - data: - idPrefix: example - name: example - fieldset: - classes: app-fieldset--custom-modifier - attributes: - data-attribute: value - data-second-attribute: second-value - legend: - text: What is your nationality? - hint: - text: If you have dual nationality, select all options that are relevant to you. - errorMessage: - text: Please select an option - items: - - value: british - text: British - - value: irish - text: Irish - - value: other - text: Citizen of another country - - name: with error message data: name: waste diff --git a/src/govuk/components/checkboxes/template.test.js b/src/govuk/components/checkboxes/template.test.js index 43e9155d86..b273908cee 100644 --- a/src/govuk/components/checkboxes/template.test.js +++ b/src/govuk/components/checkboxes/template.test.js @@ -560,7 +560,12 @@ describe('Checkboxes', () => { describe('when they include an error message', () => { it('renders the error message', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + } + }) expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot() }) @@ -667,13 +672,50 @@ describe('Checkboxes', () => { describe('when they include a hint', () => { it('renders the hint', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + }, + items: [ + { + value: 'british', + text: 'British', + hint: { + text: 'Hint for british option here' + } + }, + { + value: 'irish', + text: 'Irish' + }, + { + hint: { + text: 'Hint for other option here', + classes: 'app-checkboxes__hint-other', + attributes: { + 'data-test-attribute': true + } + } + } + ] + }) expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot() }) it('associates the fieldset as "described by" the hint', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + fieldset: { + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -687,11 +729,19 @@ describe('Checkboxes', () => { it('associates the fieldset as "described by" the hint and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('checkboxes', params) + const $ = render('checkboxes', { + name: 'example', + fieldset: { + describedBy: describedById, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -700,13 +750,25 @@ describe('Checkboxes', () => { ) expect($fieldset.attr('aria-describedby')).toMatch(hintId) - delete params.fieldset.describedBy }) }) describe('when they include both a hint and an error message', () => { it('associates the fieldset as described by both the hint and the error message', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -722,11 +784,22 @@ describe('Checkboxes', () => { it('associates the fieldset as described by the hint, error message and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('checkboxes', params) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + describedBy: describedById, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -738,14 +811,18 @@ describe('Checkboxes', () => { expect($fieldset.attr('aria-describedby')) .toMatch(combinedIds) - - delete params.fieldset.describedBy }) }) describe('nested dependant components', () => { it('have correct nesting order', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + fieldset: { + legend: { + text: 'What is your nationality?' + } + } + }) const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-checkboxes') expect($component.length).toBeTruthy() @@ -777,7 +854,25 @@ describe('Checkboxes', () => { }) it('passes through fieldset params without breaking', () => { - const $ = render('checkboxes', examples['with all fieldset attributes']) + const $ = render('checkboxes', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + classes: 'app-fieldset--custom-modifier', + attributes: { + 'data-attribute': 'value', + 'data-second-attribute': 'second-value' + }, + legend: { + text: 'What is your nationality?' + } + }, + hint: { + text: 'If you have dual nationality, select all options that are relevant to you.' + } + }) expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot() }) diff --git a/src/govuk/components/radios/__snapshots__/template.test.js.snap b/src/govuk/components/radios/__snapshots__/template.test.js.snap index 1de2bf559d..95579c11f4 100644 --- a/src/govuk/components/radios/__snapshots__/template.test.js.snap +++ b/src/govuk/components/radios/__snapshots__/template.test.js.snap @@ -47,6 +47,17 @@ exports[`Radios when they include a hint renders the hint 1`] = ` > This includes changing your last name or spelling your name differently. + + Hint for yes option here + + + Hint for no option here + `; exports[`Radios when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml index 79a768a999..cb20166992 100644 --- a/src/govuk/components/radios/radios.yaml +++ b/src/govuk/components/radios/radios.yaml @@ -258,28 +258,6 @@ examples: text: No checked: true -- name: with all fieldset attributes - data: - idPrefix: example - name: example - errorMessage: - text: Please select an option - fieldset: - classes: app-fieldset--custom-modifier - attributes: - data-attribute: value - data-second-attribute: second-value - legend: - text: Have you changed your name? - hint: - text: This includes changing your last name or spelling your name differently. - items: - - value: yes - text: Yes - - value: no - text: No - checked: true - - name: with very long option text data: name: waste diff --git a/src/govuk/components/radios/template.test.js b/src/govuk/components/radios/template.test.js index 31abdac333..5e58a051d1 100644 --- a/src/govuk/components/radios/template.test.js +++ b/src/govuk/components/radios/template.test.js @@ -535,13 +535,44 @@ describe('Radios', () => { describe('when they include a hint', () => { it('renders the hint', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + hint: { + text: 'This includes changing your last name or spelling your name differently.' + }, + items: [ + { + hint: { + text: 'Hint for yes option here' + } + }, + { + hint: { + classes: 'app-radios__hint-no', + text: 'Hint for no option here', + attributes: { + 'data-test-attribute': true + } + } + } + ] + }) expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot() }) it('associates the fieldset as "described by" the hint', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + fieldset: { + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -555,11 +586,19 @@ describe('Radios', () => { it('associates the fieldset as "described by" the hint and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - - params.fieldset.describedBy = describedById - const $ = render('radios', params) + const $ = render('radios', { + name: 'example', + fieldset: { + describedBy: describedById, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const $hint = $('.govuk-hint') @@ -568,13 +607,17 @@ describe('Radios', () => { ) expect($fieldset.attr('aria-describedby')).toMatch(hintId) - delete params.fieldset.describedBy }) }) describe('when they include an error message', () => { it('renders the error message', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + errorMessage: { + text: 'Please select an option' + } + }) expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot() }) @@ -666,7 +709,19 @@ describe('Radios', () => { describe('when they include both a hint and an error message', () => { it('associates the fieldset as described by both the hint and the error message', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -682,11 +737,21 @@ describe('Radios', () => { it('associates the fieldset as described by the hint, error message and parent fieldset', () => { const describedById = 'some-id' - const params = examples['with all fieldset attributes'] - params.fieldset.describedBy = describedById - - const $ = render('radios', params) + const $ = render('radios', { + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + describedBy: describedById, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) const $fieldset = $('.govuk-fieldset') const errorMessageId = $('.govuk-error-message').attr('id') @@ -698,14 +763,18 @@ describe('Radios', () => { expect($fieldset.attr('aria-describedby')) .toMatch(combinedIds) - - delete params.fieldset.describedBy }) }) describe('nested dependant components', () => { it('have correct nesting order', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + fieldset: { + legend: { + text: 'Have you changed your name?' + } + } + }) const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-radios') expect($component.length).toBeTruthy() @@ -737,7 +806,25 @@ describe('Radios', () => { }) it('passes through fieldset params without breaking', () => { - const $ = render('radios', examples['with all fieldset attributes']) + const $ = render('radios', { + name: 'example', + errorMessage: { + text: 'Please select an option' + }, + fieldset: { + classes: 'app-fieldset--custom-modifier', + attributes: { + 'data-attribute': 'value', + 'data-second-attribute': 'second-value' + }, + legend: { + text: 'Have you changed your name?' + } + }, + hint: { + text: 'This includes changing your last name or spelling your name differently.' + } + }) expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot() })