diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index 9c2636d988..42f8e0c9d6 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -189,7 +189,7 @@ describe('script: address-input', () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await setTimeout(50); - expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); }); describe('when api status is okay', () => { @@ -257,8 +257,9 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); await page.type('.ons-js-autosuggest-input', 'e'); + await setTimeout(50); - expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1); }); describe('when the value is a full postcode', () => { @@ -267,14 +268,15 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 2N')); await page.type('.ons-js-autosuggest-input', 'T'); + + await setTimeout(100); }); it('provides expected parameters to the address API where `limit` is 100', async () => { - expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1); }); it('has expected suggestion entries', async () => { - await setTimeout(100); const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']); }); @@ -314,7 +316,7 @@ describe('script: address-input', () => { it('provides expected parameters to the address API', async () => { expect( - apiFaker.getRequestCount( + await apiFaker.getRequestCount( '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo', ), ).toBe(1); @@ -336,7 +338,7 @@ describe('script: address-input', () => { }); it('makes expected request when a suggestion is selected', async () => { - expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); it('populates manual input fields with address from selection', async () => { @@ -360,7 +362,7 @@ describe('script: address-input', () => { }); it('provides expected parameters to the address API', async () => { - expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1); }); it('has expected suggestion entries', async () => { @@ -380,7 +382,7 @@ describe('script: address-input', () => { it('makes expected request', async () => { expect( - apiFaker.getRequestCount( + await apiFaker.getRequestCount( '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo', ), ).toBe(1); @@ -611,7 +613,9 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); await page.type('.ons-js-autosuggest-input', 'e'); - expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1); + await setTimeout(50); + + expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1); }); }); @@ -629,7 +633,7 @@ describe('script: address-input', () => { }); it('then the retrieveAddress function will be called', async () => { - expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); + expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); }); @@ -735,10 +739,9 @@ describe('script: address-input', () => { it('provides expected parameters to the address API', async () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); await page.type('.ons-js-autosuggest-input', 'e'); - await setTimeout(50); - expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1); + expect(await apiFaker.getRequestCount(searchEndpoint)).toBe(1); }); it('requests further information for the selected address from the API with the expected parameters', async () => { @@ -746,10 +749,9 @@ describe('script: address-input', () => { await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 }); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await setTimeout(50); - expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1); + expect(await apiFaker.getRequestCount(uprnEndpoint)).toBe(1); }); }); }); diff --git a/src/components/address-output/_macro.spec.js b/src/components/address-output/_macro.spec.js index d94484c316..692cf12432 100644 --- a/src/components/address-output/_macro.spec.js +++ b/src/components/address-output/_macro.spec.js @@ -5,94 +5,141 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -const EXAMPLE_ADDRESS_OUTPUT_FULL = { - unit: 'Unit 5', - organisation: 'Trescos', - line1: 'Abingdon Road', - line2: 'Goathill', - town: 'Barry', - postcode: 'AB12 6UH', -}; - -const EXAMPLE_ADDRESS_OUTPUT_NONE = {}; - -describe('macro: address-output', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); +import { EXAMPLE_ADDRESS_OUTPUT_FULL } from './_test_examples'; - it('has additionally provided container style classes', () => { - const $ = cheerio.load( - renderComponent('address-output', { - ...EXAMPLE_ADDRESS_OUTPUT_FULL, - classes: 'extra-class another-extra-class', - }), - ); +describe('FOR: Macro: Address-output', () => { + describe('GIVEN: Params: none', () => { + describe('WHEN: no parameters are provided', () => { + const $ = cheerio.load(renderComponent('address-output', {})); - expect($('.ons-address-output').hasClass('extra-class')).toBe(true); - expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true); + test('THEN: renders no lines', () => { + expect($('.ons-address-output__lines *').length).toBe(0); + }); + }); }); - it('renders no lines when no parameters are provided', () => { - const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE)); - - expect($('.ons-address-output__lines *').length).toBe(0); + describe('GIVEN: Params: classes', () => { + describe('WHEN: classes are provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + ...EXAMPLE_ADDRESS_OUTPUT_FULL, + classes: 'extra-class another-extra-class', + }), + ); + + test('THEN: renders with additional classes provided', async () => { + expect($('.ons-address-output').hasClass('extra-class')).toBe(true); + expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true); + }); + }); }); - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { unit: 'Unit 5' }], - ])('renders `unit` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); + describe('GIVEN: Params: All params', () => { + describe('WHEN: all address line params are provided', () => { + const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL)); - expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5'); - }); + test('THEN: jest-axe tests pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { organisation: 'Trescos' }], - ])('renders `organisation` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); + test('THEN: renders unit with provided text', () => { + expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5'); + }); - expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos'); - }); + test('THEN: renders organisation line with correct text', () => { + expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos'); + }); - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { line1: 'Abingdon Road' }], - ])('renders `line1` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); + test('THEN: renders line1 line with correct text', () => { + expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road'); + }); - expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road'); - }); + test('THEN: renders line2 line with correct text', () => { + expect($('.ons-address-output__line2').text().trim()).toBe('Goathill'); + }); - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { line2: 'Goathill' }], - ])('renders `line2` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); + test('THEN: renders the town line with correct text', () => { + expect($('.ons-address-output__town').text().trim()).toBe('Barry'); + }); - expect($('.ons-address-output__line2').text().trim()).toBe('Goathill'); + test('THEN: renders the postcode line with correct text', () => { + expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH'); + }); + }); }); - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { town: 'Barry' }], - ])('renders `town` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); - - expect($('.ons-address-output__town').text().trim()).toBe('Barry'); - }); - - it.each([ - ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL], - ['single line', { postcode: 'AB12 6UH' }], - ])('renders `postcode` with %s', (_, params) => { - const $ = cheerio.load(renderComponent('address-output', params)); - - expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH'); + describe('GIVEN: Params: single param', () => { + describe('WHEN: the unit address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + unit: 'Unit 5', + }), + ); + + test('THEN: renders unit line with correct text', () => { + expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5'); + }); + }); + + describe('WHEN: the organisation address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + organisation: 'Trescos', + }), + ); + + test('THEN: renders organisation line with correct text', () => { + expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos'); + }); + }); + + describe('WHEN: the line1 address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + line1: 'Abingdon Road', + }), + ); + + test('THEN: renders line1 line with correct text', () => { + expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road'); + }); + }); + + describe('WHEN: the line2 address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + line2: 'Goathill', + }), + ); + + test('THEN: renders line2 line with correct text', () => { + expect($('.ons-address-output__line2').text().trim()).toBe('Goathill'); + }); + }); + + describe('WHEN: the town address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + town: 'Barry', + }), + ); + + test('THEN: renders town line with correct text', () => { + expect($('.ons-address-output__town').text().trim()).toBe('Barry'); + }); + }); + + describe('WHEN: the postcode address line is the only parameter provided', () => { + const $ = cheerio.load( + renderComponent('address-output', { + postcode: 'AB12 6UH', + }), + ); + + test('THEN: renders postcode line with correct text', () => { + expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH'); + }); + }); }); }); diff --git a/src/components/address-output/_test_examples.js b/src/components/address-output/_test_examples.js new file mode 100644 index 0000000000..08bb96889f --- /dev/null +++ b/src/components/address-output/_test_examples.js @@ -0,0 +1,8 @@ +export const EXAMPLE_ADDRESS_OUTPUT_FULL = { + unit: 'Unit 5', + organisation: 'Trescos', + line1: 'Abingdon Road', + line2: 'Goathill', + town: 'Barry', + postcode: 'AB12 6UH', +}; diff --git a/src/components/timeout-modal/timeout-modal.spec.js b/src/components/timeout-modal/timeout-modal.spec.js index fa2538ff96..b5b59e070d 100644 --- a/src/components/timeout-modal/timeout-modal.spec.js +++ b/src/components/timeout-modal/timeout-modal.spec.js @@ -216,7 +216,7 @@ describe('script: timeout modal', () => { it('closes the modal', async () => { const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db')); - await setTimeout(50); + await setTimeout(100); expect(modalIsVisible).toBe(false); });