From 76fa362ef9a68fd33a5324ad5dcae99ac3e60ec5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 23 Aug 2024 07:55:01 +0100 Subject: [PATCH 01/18] refactor address input test --- src/components/address-input/_macro.spec.js | 387 ++++++++-------- .../address-input/autosuggest.address.spec.js | 425 +++++++++--------- 2 files changed, 405 insertions(+), 407 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 6498f09fb5..e1c5c49818 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -57,16 +57,20 @@ const EXAMPLE_MANUAL_INPUT_FIELDS = { }, }; -describe('macro: address-input', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); +describe('FOR: address-input', () => { + describe('GIVEN: Params: none', () => { + describe('WHEN: All params are at default state', () => { + const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); + + test('THEN: jest-axe tests pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - describe('manual entry of address', () => { - it('has class to hide input fields when automatic search is enabled', () => { + describe('GIVEN: manual entry of address', () => { + describe('WHEN: automatic search is enabled', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -75,10 +79,12 @@ describe('macro: address-input', () => { }), ); - expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(true); + test('THEN: it has class to hide input fields', () => { + expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(true); + }); }); - it('does not have class to hide input fields when automatic search is disabled', () => { + describe('WHEN: automatic search is disabled', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -87,56 +93,12 @@ describe('macro: address-input', () => { }), ); - expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(false); - }); - - it('renders "organisation" input field with expected parameters', () => { - const faker = templateFaker(); - const inputSpy = faker.spy('input', { suppressOutput: true }); - - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - ...EXAMPLE_MANUAL_INPUT_FIELDS, - isEditable: true, - }); - - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-organisation', - name: 'address-input-example-id-organisation', - classes: 'ons-js-address-organisation', - label: { - text: 'Organisation name', - }, - value: 'Example Organisation', - width: '20@m', - error: { text: 'Server error: organisation name' }, - }); - }); - - it('renders "address line 1" input field with expected parameters', () => { - const faker = templateFaker(); - const inputSpy = faker.spy('input', { suppressOutput: true }); - - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - ...EXAMPLE_MANUAL_INPUT_FIELDS, - isEditable: true, - }); - - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-line1', - name: 'address-input-example-id-line1', - classes: 'ons-js-address-line1', - label: { - text: 'Address line 1', - }, - value: 'Flat 12345', - width: '20@m', - error: { text: 'Server error: address line 1' }, + test('THEN: does not have class to hide input fields', () => { + expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(false); }); }); - it('renders "address line 2" input field with expected parameters', () => { + describe('WHEN: manual fields are provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); @@ -146,67 +108,79 @@ describe('macro: address-input', () => { isEditable: true, }); - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-line2', - name: 'address-input-example-id-line2', - classes: 'ons-js-address-line2', - label: { - text: 'Address line 2', - }, - value: '12345 The Road', - width: '20@m', - error: { text: 'Server error: address line 2' }, + test('THEN: it renders "organisation" input field with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-organisation', + name: 'address-input-example-id-organisation', + classes: 'ons-js-address-organisation', + label: { + text: 'Organisation name', + }, + value: 'Example Organisation', + width: '20@m', + error: { text: 'Server error: organisation name' }, + }); }); - }); - it('renders "town or city" input field with expected parameters', () => { - const faker = templateFaker(); - const inputSpy = faker.spy('input', { suppressOutput: true }); - - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - ...EXAMPLE_MANUAL_INPUT_FIELDS, - isEditable: true, + test('THEN: it renders "address line 1" input field with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-line1', + name: 'address-input-example-id-line1', + classes: 'ons-js-address-line1', + label: { + text: 'Address line 1', + }, + value: 'Flat 12345', + width: '20@m', + error: { text: 'Server error: address line 1' }, + }); }); - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-town', - name: 'address-input-example-id-town', - classes: 'ons-js-address-town', - label: { - text: 'Town or city', - }, - value: 'The Town', - error: { text: 'Server error: town or city' }, + test('THEN: it renders "address line 2" input field with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-line2', + name: 'address-input-example-id-line2', + classes: 'ons-js-address-line2', + label: { + text: 'Address line 2', + }, + value: '12345 The Road', + width: '20@m', + error: { text: 'Server error: address line 2' }, + }); }); - }); - - it('renders "postcode" input field with expected parameters', () => { - const faker = templateFaker(); - const inputSpy = faker.spy('input', { suppressOutput: true }); - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - ...EXAMPLE_MANUAL_INPUT_FIELDS, - isEditable: true, + test('THEN: it renders "town or city" input field with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-town', + name: 'address-input-example-id-town', + classes: 'ons-js-address-town', + label: { + text: 'Town or city', + }, + value: 'The Town', + error: { text: 'Server error: town or city' }, + }); }); - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-postcode', - name: 'address-input-example-id-postcode', - classes: 'ons-js-address-postcode', - label: { - text: 'Postcode', - }, - value: 'PO57 6ODE', - width: '7', - error: { text: 'Server error: postcode' }, + test('THEN: it renders "postcode" input field with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-postcode', + name: 'address-input-example-id-postcode', + classes: 'ons-js-address-postcode', + label: { + text: 'Postcode', + }, + value: 'PO57 6ODE', + width: '7', + error: { text: 'Server error: postcode' }, + }); }); }); }); - describe('search button for no-js', () => { - it('is not rendered when automatic search is disabled', () => { + describe('GIVEN: search button for no-js', () => { + describe('WHEN: automatic search is disabled', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -215,11 +189,12 @@ describe('macro: address-input', () => { searchButton: 'Search for address', }), ); - - expect($('.ons-js-address-search-btn').length).toBe(0); + test('THEN: it does not render', () => { + expect($('.ons-js-address-search-btn').length).toBe(0); + }); }); - it('marks field so that it is displayed only when there is no javascript', () => { + describe('WHEN: there is no javascript', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -228,39 +203,35 @@ describe('macro: address-input', () => { }), ); - expect($('.ons-js-address-search-btn').hasClass('ons-u-db-no-js_disabled')).toBe(true); - }); - - it('renders provided text for search button', () => { - const $ = cheerio.load( - renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - isEditable: true, - searchButton: 'Search for address', - }), - ); + test('THEN: it marks field so that it is displayed', () => { + expect($('.ons-js-address-search-btn').hasClass('ons-u-db-no-js_disabled')).toBe(true); + }); - expect($('.ons-js-address-search-btn').text().trim()).toBe('Search for address'); + test('THEN: it renders provided text for search button', () => { + expect($('.ons-js-address-search-btn').text().trim()).toBe('Search for address'); + }); }); }); - describe('hidden field for uprn', () => { - it('renders hidden `input` component with expected parameters when `uprn.value` is not provided', () => { + describe('GIVEN: hidden field for uprn', () => { + describe('WHEN: `uprn.value` is not provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); faker.renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL); - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-uprn', - classes: 'ons-js-hidden-uprn ons-u-d-no', - type: 'hidden', - name: 'address-input-example-id-uprn', - value: '', + test('THEN: it renders hidden `input` component with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-uprn', + classes: 'ons-js-hidden-uprn ons-u-d-no', + type: 'hidden', + name: 'address-input-example-id-uprn', + value: '', + }); }); }); - it('renders hidden `input` component with expected parameters when `uprn.value` is provided', () => { + describe('WHEN: `uprn.value` is provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); @@ -271,18 +242,20 @@ describe('macro: address-input', () => { }, }); - expect(inputSpy.occurrences).toContainEqual({ - id: 'address-input-example-id-uprn', - classes: 'ons-js-hidden-uprn ons-u-d-no', - type: 'hidden', - name: 'address-input-example-id-uprn', - value: '[params.uprn.value]', + test('THEN: it renders hidden `input` component with expected parameters', () => { + expect(inputSpy.occurrences).toContainEqual({ + id: 'address-input-example-id-uprn', + classes: 'ons-js-hidden-uprn ons-u-d-no', + type: 'hidden', + name: 'address-input-example-id-uprn', + value: '[params.uprn.value]', + }); }); }); }); - describe('autosuggest search field', () => { - it('is not shown when `manualEntry` is `true`', () => { + describe('GIVEN: autosuggest search field', () => { + describe('WHEN: `manualEntry` is `true`', () => { const faker = templateFaker(); const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); @@ -291,10 +264,12 @@ describe('macro: address-input', () => { manualEntry: true, }); - expect(autosuggestSpy.occurrences.length).toBe(0); + test('THEN: it is not shown', () => { + expect(autosuggestSpy.occurrences.length).toBe(0); + }); }); - it('renders `autosuggest` component with expected parameters', () => { + describe('WHEN: `manualEntry` is not set', () => { const faker = templateFaker(); const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); @@ -345,57 +320,59 @@ describe('macro: address-input', () => { manualLinkText: '[params.manualLinkText]', }); - expect(autosuggestSpy.occurrences[0]).toEqual({ - id: 'address-input-example-id-autosuggest', - classes: 'ons-address-input__autosuggest ons-u-mb-no', - input: { - width: '50', - label: { - text: '[params.label.text]', - id: '[params.label.id]', - classes: 'ons-js-autosuggest-label', + test('THEN: it renders `autosuggest` component with expected parameters', () => { + expect(autosuggestSpy.occurrences[0]).toEqual({ + id: 'address-input-example-id-autosuggest', + classes: 'ons-address-input__autosuggest ons-u-mb-no', + input: { + width: '50', + label: { + text: '[params.label.text]', + id: '[params.label.id]', + classes: 'ons-js-autosuggest-label', + }, + value: '[params.value]', + attributes: '[params.attributes]', + error: '[params.error]', + name: '[params.name]', + mutuallyExclusive: '[params.mutuallyExclusive]', }, - value: '[params.value]', - attributes: '[params.attributes]', - error: '[params.error]', - name: '[params.name]', - mutuallyExclusive: '[params.mutuallyExclusive]', - }, - externalInitialiser: true, - APIDomain: '[params.APIDomain]', - APIDomainBearerToken: '[params.APIDomainBearerToken]', - APIManualQueryParams: '[params.APIManualQueryParams]', - allowMultiple: '[params.allowMultiple]', - mandatory: '[params.mandatory]', - instructions: '[params.instructions]', - autocomplete: '[params.autocomplete]', - isEditable: '[params.isEditable]', - ariaYouHaveSelected: '[params.ariaYouHaveSelected]', - ariaMinChars: '[params.ariaMinChars]', - minChars: '[params.minChars]', - ariaOneResult: '[params.ariaOneResult]', - ariaNResults: '[params.ariaNResults]', - ariaLimitedResults: '[params.ariaLimitedResults]', - ariaGroupedResults: '[params.ariaGroupedResults]', - groupCount: '[params.groupCount]', - moreResults: '[params.moreResults]', - tooManyResults: '[params.tooManyResults]', - resultsTitle: '[params.resultsTitle]', - resultsTitleId: '[params.resultsTitleId]', - noResults: '[params.noResults]', - typeMore: '[params.typeMore]', - errorTitle: '[params.errorTitle]', - errorMessageEnter: '[params.errorMessageEnter]', - errorMessageSelect: '[params.errorMessageSelect]', - errorMessageAPI: '[params.errorMessageAPI]', - errorMessageAPILinkText: '[params.errorMessageAPILinkText]', - options: '[params.options]', - manualLink: '[params.manualLink]', - manualLinkText: '[params.manualLinkText]', + externalInitialiser: true, + APIDomain: '[params.APIDomain]', + APIDomainBearerToken: '[params.APIDomainBearerToken]', + APIManualQueryParams: '[params.APIManualQueryParams]', + allowMultiple: '[params.allowMultiple]', + mandatory: '[params.mandatory]', + instructions: '[params.instructions]', + autocomplete: '[params.autocomplete]', + isEditable: '[params.isEditable]', + ariaYouHaveSelected: '[params.ariaYouHaveSelected]', + ariaMinChars: '[params.ariaMinChars]', + minChars: '[params.minChars]', + ariaOneResult: '[params.ariaOneResult]', + ariaNResults: '[params.ariaNResults]', + ariaLimitedResults: '[params.ariaLimitedResults]', + ariaGroupedResults: '[params.ariaGroupedResults]', + groupCount: '[params.groupCount]', + moreResults: '[params.moreResults]', + tooManyResults: '[params.tooManyResults]', + resultsTitle: '[params.resultsTitle]', + resultsTitleId: '[params.resultsTitleId]', + noResults: '[params.noResults]', + typeMore: '[params.typeMore]', + errorTitle: '[params.errorTitle]', + errorMessageEnter: '[params.errorMessageEnter]', + errorMessageSelect: '[params.errorMessageSelect]', + errorMessageAPI: '[params.errorMessageAPI]', + errorMessageAPILinkText: '[params.errorMessageAPILinkText]', + options: '[params.options]', + manualLink: '[params.manualLink]', + manualLinkText: '[params.manualLinkText]', + }); }); }); - it('renders manualLinkText` when provided with a default value for `manualLink`', () => { + describe('WHEN: provided with a default value for `manualLink`', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -403,11 +380,13 @@ describe('macro: address-input', () => { }), ); - expect($('.ons-js-address-manual-btn').attr('href')).toBe('#0'); - expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); + test('THEN: it renders manualLinkText', () => { + expect($('.ons-js-address-manual-btn').attr('href')).toBe('#0'); + expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); + }); }); - it('renders `manualLinkText` with `manualLink` when provided', () => { + describe('WHEN: a value for `manualLink` is provided', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -416,13 +395,15 @@ describe('macro: address-input', () => { }), ); - expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); - expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); + test('THEN: renders `manualLinkText` with `manualLink`', () => { + expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); + expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); + }); }); }); - describe('fieldset', () => { - it('does not render `fieldset` component when `dontWrap` is `true`', () => { + describe('GIVEN: fieldset', () => { + describe('WHEN: `dontWrap` is `true`', () => { const faker = templateFaker(); const fieldsetSpy = faker.spy('fieldset', { suppressOutput: true }); @@ -431,10 +412,12 @@ describe('macro: address-input', () => { dontWrap: true, }); - expect(fieldsetSpy.occurrences.length).toBe(0); + test('THEN: it does not render `fieldset` component`', () => { + expect(fieldsetSpy.occurrences.length).toBe(0); + }); }); - it('renders `fieldset` component with expected parameters', () => { + describe('WHEN: `dontWrap` is not set', () => { const faker = templateFaker(); const fieldsetSpy = faker.spy('fieldset', { suppressOutput: true }); @@ -444,11 +427,13 @@ describe('macro: address-input', () => { legendClasses: 'extra-legend-class', }); - expect(fieldsetSpy.occurrences[0]).toEqual({ - id: 'address-input-example-id', - classes: 'extra-field-class', - legend: 'What is the address?', - legendClasses: 'extra-legend-class', + test('THEN: it renders `fieldset` component with expected parameters', () => { + expect(fieldsetSpy.occurrences[0]).toEqual({ + id: 'address-input-example-id', + classes: 'extra-field-class', + legend: 'What is the address?', + legendClasses: 'extra-legend-class', + }); }); }); }); diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index 065f3f273f..a7e738066f 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -62,7 +62,7 @@ const EXAMPLE_ADDRESS_INPUT_WITH_API = { externalInitialiser: true, }; -describe('script: address-input', () => { +describe('FOR: address-input', () => { const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain); apiFaker.setOverrides( @@ -180,85 +180,200 @@ describe('script: address-input', () => { beforeEach(async () => { await apiFaker.reset(); }); + describe('GIVEN: the component initializes', () => { + describe('WHEN: the component initializes without options', () => { + test('THEN: it checks api status by trying a request', async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await page.waitForTimeout(50); - describe('When the component initializes', () => { - it('checks api status by trying a request', async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); + }); - expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); - }); + describe('WHEN: api status is okay', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await page.waitForTimeout(50); + }); - describe('when api status is okay', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + test('THEN: it does not switch to manual input', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(true); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(false); + }); }); - it('does not switch to manual input', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(true); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(false); + describe('WHEN: api status is not okay', () => { + beforeEach(async () => { + apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { + data: { + status: { code: 401 }, + }, + }); + + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await page.waitForTimeout(50); + }); + + test('THEN: it switches to manual input', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(false); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(true); + }); + + test('THEN: it hides the search button', async () => { + const hassClass = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no')); + expect(hassClass).toBe(true); + }); }); }); - describe('when api status is not okay', () => { + describe.each([ + [ + 'english, epoch, workplace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&eboost=10&epoch=75', + '/addresses/eq/uprn/100070332099?addresstype=paf&epoch=75', + 'en', + { + regionCode: 'gb-eng', + oneYearAgo: true, + addressType: 'workplace', + }, + ], + [ + 'ni, educational', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=educational&eboost=0&sboost=0&wboost=0', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'en', + { + regionCode: 'gb-nir', + addressType: 'educational', + }, + ], + [ + 'ni, workplace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&nboost=10', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'en', + { + regionCode: 'gb-nir', + addressType: 'workplace', + }, + ], + [ + 'wales, workspace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&wboost=10&favourwelsh=true', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'cy', + { + regionCode: 'gb-wls', + addressType: 'workplace', + }, + ], + ])('WHEN: the component initialises with options - %s', (_, searchEndpoint, uprnEndpoint, lang, options) => { beforeEach(async () => { - apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { + apiFaker.setTemporaryOverride(searchEndpoint, { data: { - status: { code: 401 }, + status: { code: 200 }, + response: { + input: '196 colle', + limit: 10, + addresses: [ + { + uprn: '100070332099', + formattedAddress: '196 College Road, Birmingham, B44 8HF', + addressType: 'PAF', + }, + ], + }, }, }); - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + await setTestPage( + '/test', + renderComponent('address-input', { + ...EXAMPLE_ADDRESS_INPUT_WITH_API, + options, + }), + ); + + const setLangAttribute = (lang) => document.documentElement.setAttribute('lang', lang); + await page.evaluate(setLangAttribute, lang); }); - it('switches to manual input', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(false); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(true); + test('THEN: 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'); + + expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1); }); - it('hides the search button', async () => { - const hassClass = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no')); - expect(hassClass).toBe(true); + test('THEN: it requests further information for the selected address from the API with the expected parameters', async () => { + await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); + await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); + + await page.waitForTimeout(50); + + expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1); }); }); }); - describe('When the user inputs', () => { - it('navigates to the first suggestion with the "Down" arrow key', async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + describe('GIVEN: the user inputs', () => { + describe('WHEN: the "Down" arrow key is pressed', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14')); - await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); - await page.keyboard.press('ArrowDown'); + await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14')); + await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + }); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF'); + test('THEN: it navigates to the first suggestion', async () => { + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF'); + }); }); - it('provides expected parameters to the address API', async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + describe('WHEN: a character is typed', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + + await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); + await page.type('.ons-js-autosuggest-input', 'e'); + }); + + test('THEN: it provides expected parameters to the address API', async () => { + expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1); + }); + }); + + describe('WHEN: the language is Welsh', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy')); + }); - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); - await page.type('.ons-js-autosuggest-input', 'e'); + test('THEN: the fetch url should contain the favour Welsh parameter', async () => { + 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')).toBe(1); + expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1); + }); }); - describe('when the value is a full postcode', () => { + describe('WHEN: the value is a full postcode', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); @@ -266,17 +381,17 @@ describe('script: address-input', () => { await page.type('.ons-js-autosuggest-input', 'T'); }); - it('provides expected parameters to the address API where `limit` is 100', async () => { + test('THEN: 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); }); - it('has expected suggestion entries', async () => { + test('THEN: it has expected suggestion entries', async () => { 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']); }); }); - describe('when the query not a partial postcode', () => { + describe('WHEN: the query not a partial postcode', () => { beforeEach(async () => { apiFaker.setTemporaryOverride( '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo', @@ -308,7 +423,7 @@ describe('script: address-input', () => { await page.waitForTimeout(100); }); - it('provides expected parameters to the address API', async () => { + test('THEN: itprovides expected parameters to the address API', async () => { expect( apiFaker.getRequestCount( '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo', @@ -316,7 +431,7 @@ describe('script: address-input', () => { ).toBe(1); }); - it('has expected suggestion entries', async () => { + test('THEN: it has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual([ '1 Penlline Road, Whitchurch, Cardiff, CF14 2NZ', @@ -324,18 +439,18 @@ describe('script: address-input', () => { ]); }); - describe('when a suggestion is selected', () => { + describe('WHEN: a suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); await page.waitForTimeout(100); }); - it('makes expected request when a suggestion is selected', async () => { + test('THEN: it makes expected request when a suggestion is selected', async () => { expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); - it('populates manual input fields with address from selection', async () => { + test('THEN: it populates manual input fields with address from selection', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('196 College Road'); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch'); @@ -346,7 +461,7 @@ describe('script: address-input', () => { }); }); - describe('when the query is a partial postcode', () => { + describe('WHEN: the query is a partial postcode', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); @@ -355,11 +470,11 @@ describe('script: address-input', () => { await page.waitForTimeout(200); }); - it('provides expected parameters to the address API', async () => { + test('THEN it provides expected parameters to the address API', async () => { expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1); }); - it('has expected suggestion entries', async () => { + test('THEN: it has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual([ 'Penlline Road, Whitchurch, Cardiff, CF14 2AA (41 addresses)', @@ -367,14 +482,14 @@ describe('script: address-input', () => { ]); }); - describe('when a suggestion is selected', () => { + describe('WHEN: a suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); await page.waitForTimeout(200); }); - it('makes expected request', async () => { + test('THEN: it makes expected request', async () => { expect( apiFaker.getRequestCount( '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo', @@ -382,21 +497,21 @@ describe('script: address-input', () => { ).toBe(1); }); - it('has expected suggestion entries', async () => { + test('THEN: it has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()), ); expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']); }); - describe('when an inner suggestion is selected', () => { + describe('WHEN: an inner suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); await page.waitForTimeout(200); }); - it('populates manual input fields with address from selection', async () => { + test('THEN: it populates manual input fields with address from selection', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('197 College Road'); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch'); @@ -408,8 +523,8 @@ describe('script: address-input', () => { }); }); - describe('when there is an error retrieving the address', () => { - it('switches to manual mode and hides search button', async () => { + describe('WHEN: there is an error retrieving the address', () => { + beforeEach(async () => { apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { data: { status: { code: 200 }, @@ -438,7 +553,9 @@ describe('script: address-input', () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); await page.waitForTimeout(100); + }); + test('THEN: it switches to manual mode and hides search button', async () => { const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => node.classList.contains('ons-u-db-no-js_enabled'), ); @@ -456,9 +573,9 @@ describe('script: address-input', () => { }); }); - describe('when the form is submitted', () => { - describe('when the selected address is manually changed', () => { - it('clears the urpn field', async () => { + describe('WHEN: the form is submitted', () => { + describe('WHEN: the selected address is manually changed', () => { + test('THEN: clears the urpn field', async () => { await setTestPage( '/test', ` @@ -493,7 +610,7 @@ describe('script: address-input', () => { }); }); - describe('when the submit is invalid', () => { + describe('WHEN: the submit is invalid', () => { beforeEach(async () => { await setTestPage( '/test', @@ -517,18 +634,18 @@ describe('script: address-input', () => { await page.click('button[type=submit]'); }); - it('then an error summary panel should be added to the DOM', async () => { + test('THEN: an error summary panel should be added to the DOM', async () => { const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1); expect(panelExists).toBe(true); }); - it('then input should be wrapped in an error', async () => { + test('THEN: input should be wrapped in an error', async () => { const inputIsError = await page.$$eval('#autosuggest-input-error', (nodes) => nodes.length === 1); expect(inputIsError).toBe(true); }); - describe('when the mode is set to manual', () => { - it('then the error summary should be removed', async () => { + describe('WHEN: the mode is set to manual', () => { + test('THEN: the error summary should be removed', async () => { await page.click('.ons-js-address-manual-btn'); const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1); @@ -539,29 +656,31 @@ describe('script: address-input', () => { }); }); - describe('When the manual link is clicked', () => { + describe('GIVEN: When the manual link is clicked', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await page.click('.ons-js-address-manual-btn'); }); - it('shows manual input fields', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(false); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(true); - }); + describe('WHEN: the search link is not clicked', () => { + test('THEN: it shows manual input fields', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(false); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(true); + }); - it('clears autosuggest input', async () => { - const value = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(value).toBe(''); + test('THEN: it clears autosuggest input', async () => { + const value = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(value).toBe(''); + }); }); - describe('and then the search link is clicked', () => { + describe('WHEN: the search link is clicked', () => { beforeEach(async () => { await page.$eval('.ons-js-address-organisation', (node) => (node.value = 'Test organisation')); await page.$eval('.ons-js-address-line1', (node) => (node.value = 'Test address line 1')); @@ -573,7 +692,7 @@ describe('script: address-input', () => { await page.click('.ons-js-address-search-btn'); }); - it('hides manual input fields', async () => { + test('THEN: it hides manual input fields', async () => { const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => node.classList.contains('ons-u-db-no-js_enabled'), ); @@ -584,7 +703,7 @@ describe('script: address-input', () => { expect(isSearchElementHidden).toBe(false); }); - it('clears manual input fields', async () => { + test('THEN: it clears manual input fields', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe(''); @@ -595,22 +714,8 @@ describe('script: address-input', () => { }); }); - describe('When the language is Welsh', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy')); - }); - - it('then the fetch url should contain the favour Welsh parameter', async () => { - 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); - }); - }); - - describe('When the component initialises a non-editable address lookup', () => { - describe('when a query is sent and address selected', () => { + describe('GIVEN: the component initialises a non-editable address lookup', () => { + describe('WHEN: a query is sent and address selected', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); @@ -622,13 +727,13 @@ describe('script: address-input', () => { await page.waitForTimeout(50); }); - it('then the retrieveAddress function will be called', async () => { + test('THEN: the retrieveAddress function will be called', () => { expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); }); - describe('when the form is submitted', () => { - describe('when the input is empty', () => { + describe('WHEN: the form is submitted', () => { + describe('WHEN: the input is empty', () => { beforeEach(async () => { await setTestPage( '/test', @@ -645,103 +750,11 @@ describe('script: address-input', () => { await page.click('button[type=submit]'); }); - it('sets aria status message', async () => { + test('THEN: it sets aria status message', async () => { const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); expect(statusMessage).toBe('Enter 3 or more characters for suggestions.'); }); }); }); }); - - describe.each([ - [ - 'english, epoch, workplace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&eboost=10&epoch=75', - '/addresses/eq/uprn/100070332099?addresstype=paf&epoch=75', - 'en', - { - regionCode: 'gb-eng', - oneYearAgo: true, - addressType: 'workplace', - }, - ], - [ - 'ni, educational', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=educational&eboost=0&sboost=0&wboost=0', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'en', - { - regionCode: 'gb-nir', - addressType: 'educational', - }, - ], - [ - 'ni, workplace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&nboost=10', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'en', - { - regionCode: 'gb-nir', - addressType: 'workplace', - }, - ], - [ - 'wales, workspace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&wboost=10&favourwelsh=true', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'cy', - { - regionCode: 'gb-wls', - addressType: 'workplace', - }, - ], - ])('When the component initialises with options - %s', (_, searchEndpoint, uprnEndpoint, lang, options) => { - beforeEach(async () => { - apiFaker.setTemporaryOverride(searchEndpoint, { - data: { - status: { code: 200 }, - response: { - input: '196 colle', - limit: 10, - addresses: [ - { - uprn: '100070332099', - formattedAddress: '196 College Road, Birmingham, B44 8HF', - addressType: 'PAF', - }, - ], - }, - }, - }); - - await setTestPage( - '/test', - renderComponent('address-input', { - ...EXAMPLE_ADDRESS_INPUT_WITH_API, - options, - }), - ); - - const setLangAttribute = (lang) => document.documentElement.setAttribute('lang', lang); - await page.evaluate(setLangAttribute, lang); - }); - - 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'); - - expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1); - }); - - it('requests further information for the selected address from the API with the expected parameters', async () => { - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); - await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Enter'); - - await page.waitForTimeout(50); - - expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1); - }); - }); }); From 32606bf98b86f6a401e43550368f78d684560475 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 4 Sep 2024 12:59:31 +0100 Subject: [PATCH 02/18] move test examples to new file --- src/components/address-input/_macro.spec.js | 53 +-------- .../address-input/_test-examples.js | 112 ++++++++++++++++++ .../address-input/autosuggest.address.spec.js | 62 +--------- 3 files changed, 114 insertions(+), 113 deletions(-) create mode 100644 src/components/address-input/_test-examples.js diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index e1c5c49818..e1a894f32b 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -4,58 +4,7 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; - -const EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL = { - id: 'address-input-example-id', - legend: 'What is the address?', - label: { - text: 'Enter address or postcode and select from results', - id: 'address-input-example-label-id', - }, - isEditable: false, - instructions: 'Use up and down keys to navigate suggestions.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Results have been limited to 10 suggestions. Type more characters to improve your search', - ariaGroupedResults: 'There are {n} for {x}', - groupCount: '{n} addresses', - moreResults: 'Enter more of the address to improve results', - noResults: 'No results found. Try entering a different part of the address', - tooManyResults: '{n} results found. Enter more of the address to improve results', - typeMore: 'Enter more of the address to get results', - resultsTitle: 'Select an address', - resultsTitleId: 'address-suggestions', -}; - -const EXAMPLE_MANUAL_INPUT_FIELDS = { - organisation: { - label: 'Organisation name', - value: 'Example Organisation', - error: { text: 'Server error: organisation name' }, - }, - line1: { - label: 'Address line 1', - value: 'Flat 12345', - error: { text: 'Server error: address line 1' }, - }, - line2: { - label: 'Address line 2', - value: '12345 The Road', - error: { text: 'Server error: address line 2' }, - }, - town: { - label: 'Town or city', - value: 'The Town', - error: { text: 'Server error: town or city' }, - }, - postcode: { - label: 'Postcode', - value: 'PO57 6ODE', - error: { text: 'Server error: postcode' }, - }, -}; +import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from './_test-examples'; describe('FOR: address-input', () => { describe('GIVEN: Params: none', () => { diff --git a/src/components/address-input/_test-examples.js b/src/components/address-input/_test-examples.js new file mode 100644 index 0000000000..741c9beb00 --- /dev/null +++ b/src/components/address-input/_test-examples.js @@ -0,0 +1,112 @@ +export const EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL = { + id: 'address-input-example-id', + legend: 'What is the address?', + label: { + text: 'Enter address or postcode and select from results', + id: 'address-input-example-label-id', + }, + isEditable: false, + instructions: 'Use up and down keys to navigate suggestions.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Results have been limited to 10 suggestions. Type more characters to improve your search', + ariaGroupedResults: 'There are {n} for {x}', + groupCount: '{n} addresses', + moreResults: 'Enter more of the address to improve results', + noResults: 'No results found. Try entering a different part of the address', + tooManyResults: '{n} results found. Enter more of the address to improve results', + typeMore: 'Enter more of the address to get results', + resultsTitle: 'Select an address', + resultsTitleId: 'address-suggestions', +}; + +export const EXAMPLE_MANUAL_INPUT_FIELDS = { + organisation: { + label: 'Organisation name', + value: 'Example Organisation', + error: { text: 'Server error: organisation name' }, + }, + line1: { + label: 'Address line 1', + value: 'Flat 12345', + error: { text: 'Server error: address line 1' }, + }, + line2: { + label: 'Address line 2', + value: '12345 The Road', + error: { text: 'Server error: address line 2' }, + }, + town: { + label: 'Town or city', + value: 'The Town', + error: { text: 'Server error: town or city' }, + }, + postcode: { + label: 'Postcode', + value: 'PO57 6ODE', + error: { text: 'Server error: postcode' }, + }, +}; + +const EXAMPLE_ADDRESS_INPUT = { + id: 'address', + autocomplete: 'off', + label: { + text: 'Enter address or postcode and select from results', + }, + legend: 'What is the address?', + isEditable: true, + mandatory: true, + dontWrap: true, + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + ariaGroupedResults: 'There are {n} for {x}', + groupCount: '{n} addresses', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + tooManyResults: '{n} results found. Enter more of the address to improve results', + typeMore: 'Continue entering to get suggestions', + errorTitle: 'There is a problem with your answer', + errorMessageEnter: 'Enter an address', + errorMessageSelect: 'Select an address', + errorMessageAPI: 'Sorry, there is a problem loading addresses', + errorMessageAPILinkText: 'Enter address manually', + options: { + regionCode: 'gb-eng', + addressType: 'residential', + }, + organisation: { + label: 'Organisation', + }, + line1: { + label: 'Address line 1', + }, + line2: { + label: 'Address line 2', + }, + town: { + label: 'Town or city', + }, + postcode: { + label: 'Postcode', + }, + searchButton: 'Search for an address', + manualLinkText: 'Manually enter address', +}; + +export const EXAMPLE_ADDRESS_INPUT_WITH_API = { + ...EXAMPLE_ADDRESS_INPUT, + APIDomain: '/fake/api', + APIDomainBearerToken: 'someToken', + externalInitialiser: true, +}; diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index a7e738066f..d074b9a0b9 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -1,66 +1,6 @@ import { PuppeteerEndpointFaker } from '../../tests/helpers/puppeteer'; import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; - -const EXAMPLE_ADDRESS_INPUT = { - id: 'address', - autocomplete: 'off', - label: { - text: 'Enter address or postcode and select from results', - }, - legend: 'What is the address?', - isEditable: true, - mandatory: true, - dontWrap: true, - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - ariaGroupedResults: 'There are {n} for {x}', - groupCount: '{n} addresses', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - tooManyResults: '{n} results found. Enter more of the address to improve results', - typeMore: 'Continue entering to get suggestions', - errorTitle: 'There is a problem with your answer', - errorMessageEnter: 'Enter an address', - errorMessageSelect: 'Select an address', - errorMessageAPI: 'Sorry, there is a problem loading addresses', - errorMessageAPILinkText: 'Enter address manually', - options: { - regionCode: 'gb-eng', - addressType: 'residential', - }, - organisation: { - label: 'Organisation', - }, - line1: { - label: 'Address line 1', - }, - line2: { - label: 'Address line 2', - }, - town: { - label: 'Town or city', - }, - postcode: { - label: 'Postcode', - }, - searchButton: 'Search for an address', - manualLinkText: 'Manually enter address', -}; - -const EXAMPLE_ADDRESS_INPUT_WITH_API = { - ...EXAMPLE_ADDRESS_INPUT, - APIDomain: '/fake/api', - APIDomainBearerToken: 'someToken', - externalInitialiser: true, -}; +import { EXAMPLE_ADDRESS_INPUT_WITH_API } from './_test-examples'; describe('FOR: address-input', () => { const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain); From 496bd9574475303f38bfde2306b05612d9fc3067 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 5 Sep 2024 16:33:25 +0100 Subject: [PATCH 03/18] update test --- src/components/address-input/_macro.spec.js | 2 +- src/components/address-input/_test-examples.js | 6 +----- src/components/address-input/autosuggest.address.spec.js | 6 +++--- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index e1a894f32b..2c964cae74 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from './_test-examples'; -describe('FOR: address-input', () => { +describe('FOR: MACRO: address-input', () => { describe('GIVEN: Params: none', () => { describe('WHEN: All params are at default state', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); diff --git a/src/components/address-input/_test-examples.js b/src/components/address-input/_test-examples.js index 741c9beb00..22cf424d0d 100644 --- a/src/components/address-input/_test-examples.js +++ b/src/components/address-input/_test-examples.js @@ -50,7 +50,7 @@ export const EXAMPLE_MANUAL_INPUT_FIELDS = { }, }; -const EXAMPLE_ADDRESS_INPUT = { +export const EXAMPLE_ADDRESS_INPUT_WITH_API = { id: 'address', autocomplete: 'off', label: { @@ -102,10 +102,6 @@ const EXAMPLE_ADDRESS_INPUT = { }, searchButton: 'Search for an address', manualLinkText: 'Manually enter address', -}; - -export const EXAMPLE_ADDRESS_INPUT_WITH_API = { - ...EXAMPLE_ADDRESS_INPUT, APIDomain: '/fake/api', APIDomainBearerToken: 'someToken', externalInitialiser: true, diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index d074b9a0b9..2448246f7e 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -2,7 +2,7 @@ import { PuppeteerEndpointFaker } from '../../tests/helpers/puppeteer'; import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; import { EXAMPLE_ADDRESS_INPUT_WITH_API } from './_test-examples'; -describe('FOR: address-input', () => { +describe('FOR: SCRIPT: address-input', () => { const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain); apiFaker.setOverrides( @@ -121,7 +121,7 @@ describe('FOR: address-input', () => { await apiFaker.reset(); }); describe('GIVEN: the component initializes', () => { - describe('WHEN: the component initializes without options', () => { + describe("WHEN: 'options' is not provided", () => { test('THEN: it checks api status by trying a request', async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await page.waitForTimeout(50); @@ -219,7 +219,7 @@ describe('FOR: address-input', () => { addressType: 'workplace', }, ], - ])('WHEN: the component initialises with options - %s', (_, searchEndpoint, uprnEndpoint, lang, options) => { + ])("WHEN: 'options' is provided - %s", (_, searchEndpoint, uprnEndpoint, lang, options) => { beforeEach(async () => { apiFaker.setTemporaryOverride(searchEndpoint, { data: { From fc746bfe89937b36f87cfb0fe3ce3878d2891238 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 12 Sep 2024 11:15:19 +0100 Subject: [PATCH 04/18] update for --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 2c964cae74..e1a894f32b 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from './_test-examples'; -describe('FOR: MACRO: address-input', () => { +describe('FOR: address-input', () => { describe('GIVEN: Params: none', () => { describe('WHEN: All params are at default state', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); From 46d68fcf6a8ad47fdced5edb965c4d57b1f54c6d Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 12 Sep 2024 11:46:16 +0100 Subject: [PATCH 05/18] revert changes to js test file --- .../address-input/_test-examples.js | 57 -- .../address-input/autosuggest.address.spec.js | 508 ++++++++++-------- 2 files changed, 280 insertions(+), 285 deletions(-) diff --git a/src/components/address-input/_test-examples.js b/src/components/address-input/_test-examples.js index 22cf424d0d..ca1c267572 100644 --- a/src/components/address-input/_test-examples.js +++ b/src/components/address-input/_test-examples.js @@ -49,60 +49,3 @@ export const EXAMPLE_MANUAL_INPUT_FIELDS = { error: { text: 'Server error: postcode' }, }, }; - -export const EXAMPLE_ADDRESS_INPUT_WITH_API = { - id: 'address', - autocomplete: 'off', - label: { - text: 'Enter address or postcode and select from results', - }, - legend: 'What is the address?', - isEditable: true, - mandatory: true, - dontWrap: true, - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - ariaGroupedResults: 'There are {n} for {x}', - groupCount: '{n} addresses', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - tooManyResults: '{n} results found. Enter more of the address to improve results', - typeMore: 'Continue entering to get suggestions', - errorTitle: 'There is a problem with your answer', - errorMessageEnter: 'Enter an address', - errorMessageSelect: 'Select an address', - errorMessageAPI: 'Sorry, there is a problem loading addresses', - errorMessageAPILinkText: 'Enter address manually', - options: { - regionCode: 'gb-eng', - addressType: 'residential', - }, - organisation: { - label: 'Organisation', - }, - line1: { - label: 'Address line 1', - }, - line2: { - label: 'Address line 2', - }, - town: { - label: 'Town or city', - }, - postcode: { - label: 'Postcode', - }, - searchButton: 'Search for an address', - manualLinkText: 'Manually enter address', - APIDomain: '/fake/api', - APIDomainBearerToken: 'someToken', - externalInitialiser: true, -}; diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index 2448246f7e..a124dd26ef 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -1,8 +1,70 @@ import { PuppeteerEndpointFaker } from '../../tests/helpers/puppeteer'; import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; -import { EXAMPLE_ADDRESS_INPUT_WITH_API } from './_test-examples'; -describe('FOR: SCRIPT: address-input', () => { +const EXAMPLE_ADDRESS_INPUT = { + id: 'address', + autocomplete: 'off', + label: { + text: 'Enter address or postcode and select from results', + }, + legend: 'What is the address?', + isEditable: true, + mandatory: true, + dontWrap: true, + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + ariaGroupedResults: 'There are {n} for {x}', + groupCount: '{n} addresses', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + tooManyResults: '{n} results found. Enter more of the address to improve results', + typeMore: 'Continue entering to get suggestions', + errorTitle: 'There is a problem with your answer', + errorMessageEnter: 'Enter an address', + errorMessageSelect: 'Select an address', + errorMessageAPI: 'Sorry, there is a problem loading addresses', + errorMessageAPILinkText: 'Enter address manually', + options: { + regionCode: 'gb-eng', + addressType: 'residential', + }, + organisation: { + label: 'Organisation', + }, + line1: { + label: 'Address line 1', + }, + line2: { + label: 'Address line 2', + }, + town: { + label: 'Town or city', + }, + postcode: { + label: 'Postcode', + }, + searchButton: 'Search for an address', + manualLinkText: 'Manually enter address', +}; + +const EXAMPLE_ADDRESS_INPUT_WITH_API = { + ...EXAMPLE_ADDRESS_INPUT, + APIDomain: '/fake/api', + APIDomainBearerToken: 'someToken', + externalInitialiser: true, +}; + +const { setTimeout } = require('node:timers/promises'); + +describe('script: address-input', () => { const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain); apiFaker.setOverrides( @@ -120,200 +182,85 @@ describe('FOR: SCRIPT: address-input', () => { beforeEach(async () => { await apiFaker.reset(); }); - describe('GIVEN: the component initializes', () => { - describe("WHEN: 'options' is not provided", () => { - test('THEN: it checks api status by trying a request', async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); - expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); - }); + describe('When the component initializes', () => { + it('checks api status by trying a request', async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await setTimeout(50); - describe('WHEN: api status is okay', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); - }); + expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); + }); - test('THEN: it does not switch to manual input', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(true); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(false); - }); + describe('when api status is okay', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await setTimeout(50); }); - describe('WHEN: api status is not okay', () => { - beforeEach(async () => { - apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { - data: { - status: { code: 401 }, - }, - }); - - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); - }); - - test('THEN: it switches to manual input', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(false); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(true); - }); - - test('THEN: it hides the search button', async () => { - const hassClass = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no')); - expect(hassClass).toBe(true); - }); + it('does not switch to manual input', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(true); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(false); }); }); - describe.each([ - [ - 'english, epoch, workplace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&eboost=10&epoch=75', - '/addresses/eq/uprn/100070332099?addresstype=paf&epoch=75', - 'en', - { - regionCode: 'gb-eng', - oneYearAgo: true, - addressType: 'workplace', - }, - ], - [ - 'ni, educational', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=educational&eboost=0&sboost=0&wboost=0', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'en', - { - regionCode: 'gb-nir', - addressType: 'educational', - }, - ], - [ - 'ni, workplace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&nboost=10', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'en', - { - regionCode: 'gb-nir', - addressType: 'workplace', - }, - ], - [ - 'wales, workspace', - '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&wboost=10&favourwelsh=true', - '/addresses/eq/uprn/100070332099?addresstype=paf', - 'cy', - { - regionCode: 'gb-wls', - addressType: 'workplace', - }, - ], - ])("WHEN: 'options' is provided - %s", (_, searchEndpoint, uprnEndpoint, lang, options) => { + describe('when api status is not okay', () => { beforeEach(async () => { - apiFaker.setTemporaryOverride(searchEndpoint, { + apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { data: { - status: { code: 200 }, - response: { - input: '196 colle', - limit: 10, - addresses: [ - { - uprn: '100070332099', - formattedAddress: '196 College Road, Birmingham, B44 8HF', - addressType: 'PAF', - }, - ], - }, + status: { code: 401 }, }, }); - await setTestPage( - '/test', - renderComponent('address-input', { - ...EXAMPLE_ADDRESS_INPUT_WITH_API, - options, - }), - ); - - const setLangAttribute = (lang) => document.documentElement.setAttribute('lang', lang); - await page.evaluate(setLangAttribute, lang); + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await setTimeout(50); }); - test('THEN: 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'); - - expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1); + it('switches to manual input', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(false); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(true); }); - test('THEN: it requests further information for the selected address from the API with the expected parameters', async () => { - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); - await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Enter'); - - await page.waitForTimeout(50); - - expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1); + it('hides the search button', async () => { + const hassClass = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no')); + expect(hassClass).toBe(true); }); }); }); - describe('GIVEN: the user inputs', () => { - describe('WHEN: the "Down" arrow key is pressed', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14')); - await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - }); - - test('THEN: it navigates to the first suggestion', async () => { - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF'); - }); - }); - - describe('WHEN: a character is typed', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + describe('When the user inputs', () => { + it('navigates to the first suggestion with the "Down" arrow key', async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); - await page.type('.ons-js-autosuggest-input', 'e'); - }); + await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14')); + await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); + await page.keyboard.press('ArrowDown'); - test('THEN: it provides expected parameters to the address API', async () => { - expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF'); }); - describe('WHEN: the language is Welsh', () => { - beforeEach(async () => { - await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy')); - }); + it('provides expected parameters to the address API', async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - test('THEN: the fetch url should contain the favour Welsh parameter', async () => { - await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); - await page.type('.ons-js-autosuggest-input', 'e'); + 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); - }); + expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1); }); - describe('WHEN: the value is a full postcode', () => { + describe('when the value is a full postcode', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); @@ -321,17 +268,18 @@ describe('FOR: SCRIPT: address-input', () => { await page.type('.ons-js-autosuggest-input', 'T'); }); - test('THEN: it provides expected parameters to the address API where `limit` is 100', async () => { + 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); }); - test('THEN: it has expected suggestion entries', async () => { + 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']); }); }); - describe('WHEN: the query not a partial postcode', () => { + describe('when the query not a partial postcode', () => { beforeEach(async () => { apiFaker.setTemporaryOverride( '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo', @@ -360,10 +308,10 @@ describe('FOR: SCRIPT: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N')); await page.type('.ons-js-autosuggest-input', 'Z'); - await page.waitForTimeout(100); + await setTimeout(100); }); - test('THEN: itprovides expected parameters to the address API', async () => { + it('provides expected parameters to the address API', async () => { expect( apiFaker.getRequestCount( '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo', @@ -371,7 +319,7 @@ describe('FOR: SCRIPT: address-input', () => { ).toBe(1); }); - test('THEN: it has expected suggestion entries', async () => { + it('has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual([ '1 Penlline Road, Whitchurch, Cardiff, CF14 2NZ', @@ -379,18 +327,18 @@ describe('FOR: SCRIPT: address-input', () => { ]); }); - describe('WHEN: a suggestion is selected', () => { + describe('when a suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); }); - test('THEN: it makes expected request when a suggestion is selected', async () => { + it('makes expected request when a suggestion is selected', async () => { expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); - test('THEN: it populates manual input fields with address from selection', async () => { + it('populates manual input fields with address from selection', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('196 College Road'); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch'); @@ -401,20 +349,20 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('WHEN: the query is a partial postcode', () => { + describe('when the query is a partial postcode', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 ')); await page.type('.ons-js-autosuggest-input', '2'); - await page.waitForTimeout(200); + await setTimeout(200); }); - test('THEN it provides expected parameters to the address API', async () => { + it('provides expected parameters to the address API', async () => { expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1); }); - test('THEN: it has expected suggestion entries', async () => { + it('has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual([ 'Penlline Road, Whitchurch, Cardiff, CF14 2AA (41 addresses)', @@ -422,14 +370,14 @@ describe('FOR: SCRIPT: address-input', () => { ]); }); - describe('WHEN: a suggestion is selected', () => { + describe('when a suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(200); + await setTimeout(200); }); - test('THEN: it makes expected request', async () => { + it('makes expected request', async () => { expect( apiFaker.getRequestCount( '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo', @@ -437,21 +385,21 @@ describe('FOR: SCRIPT: address-input', () => { ).toBe(1); }); - test('THEN: it has expected suggestion entries', async () => { + it('has expected suggestion entries', async () => { const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()), ); expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']); }); - describe('WHEN: an inner suggestion is selected', () => { + describe('when an inner suggestion is selected', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(200); + await setTimeout(200); }); - test('THEN: it populates manual input fields with address from selection', async () => { + it('populates manual input fields with address from selection', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('197 College Road'); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch'); @@ -463,8 +411,8 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('WHEN: there is an error retrieving the address', () => { - beforeEach(async () => { + describe('when there is an error retrieving the address', () => { + it('switches to manual mode and hides search button', async () => { apiFaker.setTemporaryOverride('/addresses/eq?input=cf142&limit=10', { data: { status: { code: 200 }, @@ -492,10 +440,8 @@ describe('FOR: SCRIPT: address-input', () => { await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); - }); + await setTimeout(100); - test('THEN: it switches to manual mode and hides search button', async () => { const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => node.classList.contains('ons-u-db-no-js_enabled'), ); @@ -513,9 +459,9 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('WHEN: the form is submitted', () => { - describe('WHEN: the selected address is manually changed', () => { - test('THEN: clears the urpn field', async () => { + describe('when the form is submitted', () => { + describe('when the selected address is manually changed', () => { + it('clears the urpn field', async () => { await setTestPage( '/test', ` @@ -537,7 +483,7 @@ describe('FOR: SCRIPT: address-input', () => { await page.type('.ons-js-autosuggest-input', 'T', { delay: 20 }); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', (node) => node.value); expect(urpnValueBefore).toBe('100070332099'); @@ -550,7 +496,7 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('WHEN: the submit is invalid', () => { + describe('when the submit is invalid', () => { beforeEach(async () => { await setTestPage( '/test', @@ -574,18 +520,18 @@ describe('FOR: SCRIPT: address-input', () => { await page.click('button[type=submit]'); }); - test('THEN: an error summary panel should be added to the DOM', async () => { + it('then an error summary panel should be added to the DOM', async () => { const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1); expect(panelExists).toBe(true); }); - test('THEN: input should be wrapped in an error', async () => { + it('then input should be wrapped in an error', async () => { const inputIsError = await page.$$eval('#autosuggest-input-error', (nodes) => nodes.length === 1); expect(inputIsError).toBe(true); }); - describe('WHEN: the mode is set to manual', () => { - test('THEN: the error summary should be removed', async () => { + describe('when the mode is set to manual', () => { + it('then the error summary should be removed', async () => { await page.click('.ons-js-address-manual-btn'); const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1); @@ -596,31 +542,29 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('GIVEN: When the manual link is clicked', () => { + describe('When the manual link is clicked', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await page.click('.ons-js-address-manual-btn'); }); - describe('WHEN: the search link is not clicked', () => { - test('THEN: it shows manual input fields', async () => { - const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => - node.classList.contains('ons-u-db-no-js_enabled'), - ); - expect(isManualElementHidden).toBe(false); - const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => - node.classList.contains('ons-u-d-no'), - ); - expect(isSearchElementHidden).toBe(true); - }); + it('shows manual input fields', async () => { + const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => + node.classList.contains('ons-u-db-no-js_enabled'), + ); + expect(isManualElementHidden).toBe(false); + const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => + node.classList.contains('ons-u-d-no'), + ); + expect(isSearchElementHidden).toBe(true); + }); - test('THEN: it clears autosuggest input', async () => { - const value = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(value).toBe(''); - }); + it('clears autosuggest input', async () => { + const value = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(value).toBe(''); }); - describe('WHEN: the search link is clicked', () => { + describe('and then the search link is clicked', () => { beforeEach(async () => { await page.$eval('.ons-js-address-organisation', (node) => (node.value = 'Test organisation')); await page.$eval('.ons-js-address-line1', (node) => (node.value = 'Test address line 1')); @@ -632,7 +576,7 @@ describe('FOR: SCRIPT: address-input', () => { await page.click('.ons-js-address-search-btn'); }); - test('THEN: it hides manual input fields', async () => { + it('hides manual input fields', async () => { const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => node.classList.contains('ons-u-db-no-js_enabled'), ); @@ -643,7 +587,7 @@ describe('FOR: SCRIPT: address-input', () => { expect(isSearchElementHidden).toBe(false); }); - test('THEN: it clears manual input fields', async () => { + it('clears manual input fields', async () => { expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe(''); expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe(''); @@ -654,8 +598,22 @@ describe('FOR: SCRIPT: address-input', () => { }); }); - describe('GIVEN: the component initialises a non-editable address lookup', () => { - describe('WHEN: a query is sent and address selected', () => { + describe('When the language is Welsh', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); + await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy')); + }); + + it('then the fetch url should contain the favour Welsh parameter', async () => { + 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); + }); + }); + + describe('When the component initialises a non-editable address lookup', () => { + describe('when a query is sent and address selected', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); @@ -664,16 +622,16 @@ describe('FOR: SCRIPT: address-input', () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await setTimeout(50); }); - test('THEN: the retrieveAddress function will be called', () => { + it('then the retrieveAddress function will be called', async () => { expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1); }); }); - describe('WHEN: the form is submitted', () => { - describe('WHEN: the input is empty', () => { + describe('when the form is submitted', () => { + describe('when the input is empty', () => { beforeEach(async () => { await setTestPage( '/test', @@ -690,11 +648,105 @@ describe('FOR: SCRIPT: address-input', () => { await page.click('button[type=submit]'); }); - test('THEN: it sets aria status message', async () => { + it('sets aria status message', async () => { const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); expect(statusMessage).toBe('Enter 3 or more characters for suggestions.'); }); }); }); }); + + describe.each([ + [ + 'english, epoch, workplace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&eboost=10&epoch=75', + '/addresses/eq/uprn/100070332099?addresstype=paf&epoch=75', + 'en', + { + regionCode: 'gb-eng', + oneYearAgo: true, + addressType: 'workplace', + }, + ], + [ + 'ni, educational', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=educational&eboost=0&sboost=0&wboost=0', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'en', + { + regionCode: 'gb-nir', + addressType: 'educational', + }, + ], + [ + 'ni, workplace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&nboost=10', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'en', + { + regionCode: 'gb-nir', + addressType: 'workplace', + }, + ], + [ + 'wales, workspace', + '/addresses/eq?input=196%20colle&limit=10&classificationfilter=workplace&wboost=10&favourwelsh=true', + '/addresses/eq/uprn/100070332099?addresstype=paf', + 'cy', + { + regionCode: 'gb-wls', + addressType: 'workplace', + }, + ], + ])('When the component initialises with options - %s', (_, searchEndpoint, uprnEndpoint, lang, options) => { + beforeEach(async () => { + apiFaker.setTemporaryOverride(searchEndpoint, { + data: { + status: { code: 200 }, + response: { + input: '196 colle', + limit: 10, + addresses: [ + { + uprn: '100070332099', + formattedAddress: '196 College Road, Birmingham, B44 8HF', + addressType: 'PAF', + }, + ], + }, + }, + }); + + await setTestPage( + '/test', + renderComponent('address-input', { + ...EXAMPLE_ADDRESS_INPUT_WITH_API, + options, + }), + ); + + const setLangAttribute = (lang) => document.documentElement.setAttribute('lang', lang); + await page.evaluate(setLangAttribute, lang); + }); + + 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); + }); + + it('requests further information for the selected address from the API with the expected parameters', async () => { + await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); + 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); + }); + }); }); From 6768bd4834526550db36b15edfa22c7990238698 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 13 Sep 2024 12:01:38 +0100 Subject: [PATCH 06/18] address Pr comments --- src/components/address-input/_macro.spec.js | 44 ++++++++++----------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index e1a894f32b..5c3f7378f8 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -42,7 +42,7 @@ describe('FOR: address-input', () => { }), ); - test('THEN: does not have class to hide input fields', () => { + test('THEN: it does not have class to hide input fields', () => { expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(false); }); }); @@ -138,12 +138,12 @@ describe('FOR: address-input', () => { searchButton: 'Search for address', }), ); - test('THEN: it does not render', () => { + test('THEN: search button does not render', () => { expect($('.ons-js-address-search-btn').length).toBe(0); }); }); - describe('WHEN: there is no javascript', () => { + describe('WHEN: javascript has been disabled', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -152,24 +152,24 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it marks field so that it is displayed', () => { + test('THEN: search button is displayed', () => { expect($('.ons-js-address-search-btn').hasClass('ons-u-db-no-js_disabled')).toBe(true); }); - test('THEN: it renders provided text for search button', () => { + test('THEN: it renders search button with provided text', () => { expect($('.ons-js-address-search-btn').text().trim()).toBe('Search for address'); }); }); }); describe('GIVEN: hidden field for uprn', () => { - describe('WHEN: `uprn.value` is not provided', () => { + describe('WHEN: uprn.value is not provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); faker.renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL); - test('THEN: it renders hidden `input` component with expected parameters', () => { + test('THEN: it renders hidden input component with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-uprn', classes: 'ons-js-hidden-uprn ons-u-d-no', @@ -180,7 +180,7 @@ describe('FOR: address-input', () => { }); }); - describe('WHEN: `uprn.value` is provided', () => { + describe('WHEN: uprn.value is provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); @@ -191,7 +191,7 @@ describe('FOR: address-input', () => { }, }); - test('THEN: it renders hidden `input` component with expected parameters', () => { + test('THEN: it renders hidden input component with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-uprn', classes: 'ons-js-hidden-uprn ons-u-d-no', @@ -204,7 +204,7 @@ describe('FOR: address-input', () => { }); describe('GIVEN: autosuggest search field', () => { - describe('WHEN: `manualEntry` is `true`', () => { + describe('WHEN: manualEntry is true', () => { const faker = templateFaker(); const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); @@ -213,18 +213,18 @@ describe('FOR: address-input', () => { manualEntry: true, }); - test('THEN: it is not shown', () => { + test('THEN: autosuggest search field is not shown', () => { expect(autosuggestSpy.occurrences.length).toBe(0); }); }); - describe('WHEN: `manualEntry` is not set', () => { + describe('WHEN: manualEntry is not set', () => { const faker = templateFaker(); const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); - // Since `autosuggestSpy` suppresses output the values being tested below do not + // Since autosuggestSpy suppresses output the values being tested below do not // need to represent real values. This test is only interested in verifying that - // the provided values are being passed through to the `autosuggest` component. + // the provided values are being passed through to the autosuggest component. faker.renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, label: { @@ -269,7 +269,7 @@ describe('FOR: address-input', () => { manualLinkText: '[params.manualLinkText]', }); - test('THEN: it renders `autosuggest` component with expected parameters', () => { + test('THEN: it renders autosuggest component with expected parameters', () => { expect(autosuggestSpy.occurrences[0]).toEqual({ id: 'address-input-example-id-autosuggest', classes: 'ons-address-input__autosuggest ons-u-mb-no', @@ -321,7 +321,7 @@ describe('FOR: address-input', () => { }); }); - describe('WHEN: provided with a default value for `manualLink`', () => { + describe('WHEN: provided with a default value for manualLink', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -335,7 +335,7 @@ describe('FOR: address-input', () => { }); }); - describe('WHEN: a value for `manualLink` is provided', () => { + describe('WHEN: a value for manualLink is provided', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -344,7 +344,7 @@ describe('FOR: address-input', () => { }), ); - test('THEN: renders `manualLinkText` with `manualLink`', () => { + test('THEN: it renders the provided manualLink with the manualText', () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); @@ -352,7 +352,7 @@ describe('FOR: address-input', () => { }); describe('GIVEN: fieldset', () => { - describe('WHEN: `dontWrap` is `true`', () => { + describe('WHEN: dontWrap is true', () => { const faker = templateFaker(); const fieldsetSpy = faker.spy('fieldset', { suppressOutput: true }); @@ -361,12 +361,12 @@ describe('FOR: address-input', () => { dontWrap: true, }); - test('THEN: it does not render `fieldset` component`', () => { + test('THEN: it does not render fieldset component', () => { expect(fieldsetSpy.occurrences.length).toBe(0); }); }); - describe('WHEN: `dontWrap` is not set', () => { + describe('WHEN: dontWrap is not set', () => { const faker = templateFaker(); const fieldsetSpy = faker.spy('fieldset', { suppressOutput: true }); @@ -376,7 +376,7 @@ describe('FOR: address-input', () => { legendClasses: 'extra-legend-class', }); - test('THEN: it renders `fieldset` component with expected parameters', () => { + test('THEN: it renders the fieldset component with expected parameters', () => { expect(fieldsetSpy.occurrences[0]).toEqual({ id: 'address-input-example-id', classes: 'extra-field-class', From 43aa23dc7b5e792c02d703c464998a123ac84014 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:58:24 +0100 Subject: [PATCH 07/18] Update src/components/address-input/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 5c3f7378f8..103d8a2d13 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -344,7 +344,7 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it renders the provided manualLink with the manualText', () => { + test('THEN: it renders the manual link with the provided text and url, () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); From c47fa157d675c87b45300fa55935bb902d2eb680 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:58:38 +0100 Subject: [PATCH 08/18] Update src/components/address-input/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 103d8a2d13..62bdf90776 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -143,7 +143,7 @@ describe('FOR: address-input', () => { }); }); - describe('WHEN: javascript has been disabled', () => { + describe('WHEN: JavaScript has been disabled', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, From 1479ae39e8a538cfba19be03877540d0f40f9873 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Sep 2024 13:49:23 +0100 Subject: [PATCH 09/18] update --- src/components/address-input/_macro.spec.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 62bdf90776..47669c8f3a 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -18,8 +18,8 @@ describe('FOR: address-input', () => { }); }); - describe('GIVEN: manual entry of address', () => { - describe('WHEN: automatic search is enabled', () => { + describe('GIVEN: Params: manualEntry', () => { + describe('WHEN: manualEntry is set to false', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -28,12 +28,12 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it has class to hide input fields', () => { + test('THEN: it renders with class to hide manual input fields', () => { expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(true); }); }); - describe('WHEN: automatic search is disabled', () => { + describe('WHEN: manualEntry is set to true', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -42,7 +42,7 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it does not have class to hide input fields', () => { + test('THEN: it renders with class to show manual input fields', () => { expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(false); }); }); @@ -329,7 +329,7 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it renders manualLinkText', () => { + test('THEN: it renders the manual link with the provided text and a default url', () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('#0'); expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); @@ -344,14 +344,14 @@ describe('FOR: address-input', () => { }), ); - test('THEN: it renders the manual link with the provided text and url, () => { + test('THEN: it renders the manual link with the provided text and url', () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); }); }); - describe('GIVEN: fieldset', () => { + describe('GIVEN: Params: dontWrap', () => { describe('WHEN: dontWrap is true', () => { const faker = templateFaker(); const fieldsetSpy = faker.spy('fieldset', { suppressOutput: true }); From 3e977aa23162b6e0d91e468fcf56862d353b0e16 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Sep 2024 15:55:06 +0100 Subject: [PATCH 10/18] address PR comments --- src/components/address-input/_macro.spec.js | 255 ++++++++++---------- 1 file changed, 128 insertions(+), 127 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 47669c8f3a..22975de705 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -34,6 +34,9 @@ describe('FOR: address-input', () => { }); describe('WHEN: manualEntry is set to true', () => { + const faker = templateFaker(); + const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); + const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -45,18 +48,126 @@ describe('FOR: address-input', () => { test('THEN: it renders with class to show manual input fields', () => { expect($('.ons-js-address-input__manual').hasClass('ons-u-db-no-js_enabled')).toBe(false); }); + + test('THEN: autosuggest search field is not shown', () => { + expect(autosuggestSpy.occurrences.length).toBe(0); + }); }); - describe('WHEN: manual fields are provided', () => { + describe('WHEN: manualEntry is not set', () => { const faker = templateFaker(); - const inputSpy = faker.spy('input', { suppressOutput: true }); + const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); + // Since autosuggestSpy suppresses output the values being tested below do not + // need to represent real values. This test is only interested in verifying that + // the provided values are being passed through to the autosuggest component. faker.renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - ...EXAMPLE_MANUAL_INPUT_FIELDS, - isEditable: true, + label: { + text: '[params.label.text]', + id: '[params.label.id]', + }, + value: '[params.value]', + attributes: '[params.attributes]', + error: '[params.error]', + name: '[params.name]', + mutuallyExclusive: '[params.mutuallyExclusive]', + APIDomain: '[params.APIDomain]', + APIDomainBearerToken: '[params.APIDomainBearerToken]', + APIManualQueryParams: '[params.APIManualQueryParams]', + allowMultiple: '[params.allowMultiple]', + mandatory: '[params.mandatory]', + instructions: '[params.instructions]', + autocomplete: '[params.autocomplete]', + isEditable: '[params.isEditable]', + ariaYouHaveSelected: '[params.ariaYouHaveSelected]', + ariaMinChars: '[params.ariaMinChars]', + minChars: '[params.minChars]', + ariaResultsLabel: '[params.ariaResultsLabel]', + ariaOneResult: '[params.ariaOneResult]', + ariaNResults: '[params.ariaNResults]', + ariaLimitedResults: '[params.ariaLimitedResults]', + ariaGroupedResults: '[params.ariaGroupedResults]', + groupCount: '[params.groupCount]', + moreResults: '[params.moreResults]', + tooManyResults: '[params.tooManyResults]', + resultsTitle: '[params.resultsTitle]', + resultsTitleId: '[params.resultsTitleId]', + noResults: '[params.noResults]', + typeMore: '[params.typeMore]', + errorTitle: '[params.errorTitle]', + errorMessageEnter: '[params.errorMessageEnter]', + errorMessageSelect: '[params.errorMessageSelect]', + errorMessageAPI: '[params.errorMessageAPI]', + errorMessageAPILinkText: '[params.errorMessageAPILinkText]', + options: '[params.options]', + manualLink: '[params.manualLink]', + manualLinkText: '[params.manualLinkText]', + }); + + test('THEN: it renders autosuggest component with expected parameters', () => { + expect(autosuggestSpy.occurrences[0]).toEqual({ + id: 'address-input-example-id-autosuggest', + classes: 'ons-address-input__autosuggest ons-u-mb-no', + input: { + width: '50', + label: { + text: '[params.label.text]', + id: '[params.label.id]', + classes: 'ons-js-autosuggest-label', + }, + value: '[params.value]', + attributes: '[params.attributes]', + error: '[params.error]', + name: '[params.name]', + mutuallyExclusive: '[params.mutuallyExclusive]', + }, + externalInitialiser: true, + APIDomain: '[params.APIDomain]', + APIDomainBearerToken: '[params.APIDomainBearerToken]', + APIManualQueryParams: '[params.APIManualQueryParams]', + allowMultiple: '[params.allowMultiple]', + mandatory: '[params.mandatory]', + instructions: '[params.instructions]', + autocomplete: '[params.autocomplete]', + isEditable: '[params.isEditable]', + ariaYouHaveSelected: '[params.ariaYouHaveSelected]', + ariaMinChars: '[params.ariaMinChars]', + minChars: '[params.minChars]', + ariaOneResult: '[params.ariaOneResult]', + ariaNResults: '[params.ariaNResults]', + ariaLimitedResults: '[params.ariaLimitedResults]', + ariaGroupedResults: '[params.ariaGroupedResults]', + groupCount: '[params.groupCount]', + moreResults: '[params.moreResults]', + tooManyResults: '[params.tooManyResults]', + resultsTitle: '[params.resultsTitle]', + resultsTitleId: '[params.resultsTitleId]', + noResults: '[params.noResults]', + typeMore: '[params.typeMore]', + errorTitle: '[params.errorTitle]', + errorMessageEnter: '[params.errorMessageEnter]', + errorMessageSelect: '[params.errorMessageSelect]', + errorMessageAPI: '[params.errorMessageAPI]', + errorMessageAPILinkText: '[params.errorMessageAPILinkText]', + options: '[params.options]', + manualLink: '[params.manualLink]', + manualLinkText: '[params.manualLinkText]', + }); }); + }); + }); + + describe('GIVEN: Params: AddressField object', () => { + const faker = templateFaker(); + const inputSpy = faker.spy('input', { suppressOutput: true }); + faker.renderComponent('address-input', { + ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, + ...EXAMPLE_MANUAL_INPUT_FIELDS, + isEditable: true, + }); + describe('WHEN: Params: organisation', () => { test('THEN: it renders "organisation" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-organisation', @@ -70,7 +181,8 @@ describe('FOR: address-input', () => { error: { text: 'Server error: organisation name' }, }); }); - + }); + describe('WHEN: Params: line1', () => { test('THEN: it renders "address line 1" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-line1', @@ -84,7 +196,9 @@ describe('FOR: address-input', () => { error: { text: 'Server error: address line 1' }, }); }); + }); + describe('WHEN: Params: line2', () => { test('THEN: it renders "address line 2" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-line2', @@ -98,7 +212,9 @@ describe('FOR: address-input', () => { error: { text: 'Server error: address line 2' }, }); }); + }); + describe('WHEN: Params: town', () => { test('THEN: it renders "town or city" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-town', @@ -111,7 +227,9 @@ describe('FOR: address-input', () => { error: { text: 'Server error: town or city' }, }); }); + }); + describe('WHEN: Params: postcode', () => { test('THEN: it renders "postcode" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-postcode', @@ -128,8 +246,8 @@ describe('FOR: address-input', () => { }); }); - describe('GIVEN: search button for no-js', () => { - describe('WHEN: automatic search is disabled', () => { + describe('GIVEN: Params: searchButton for no-js', () => { + describe('WHEN: manualEntry parameter is set to true', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -143,7 +261,7 @@ describe('FOR: address-input', () => { }); }); - describe('WHEN: JavaScript has been disabled', () => { + describe('WHEN: manualEntry parameter is not set', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -162,7 +280,7 @@ describe('FOR: address-input', () => { }); }); - describe('GIVEN: hidden field for uprn', () => { + describe('GIVEN: Params: uprn', () => { describe('WHEN: uprn.value is not provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input', { suppressOutput: true }); @@ -203,124 +321,7 @@ describe('FOR: address-input', () => { }); }); - describe('GIVEN: autosuggest search field', () => { - describe('WHEN: manualEntry is true', () => { - const faker = templateFaker(); - const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); - - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - manualEntry: true, - }); - - test('THEN: autosuggest search field is not shown', () => { - expect(autosuggestSpy.occurrences.length).toBe(0); - }); - }); - - describe('WHEN: manualEntry is not set', () => { - const faker = templateFaker(); - const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true }); - - // Since autosuggestSpy suppresses output the values being tested below do not - // need to represent real values. This test is only interested in verifying that - // the provided values are being passed through to the autosuggest component. - faker.renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - label: { - text: '[params.label.text]', - id: '[params.label.id]', - }, - value: '[params.value]', - attributes: '[params.attributes]', - error: '[params.error]', - name: '[params.name]', - mutuallyExclusive: '[params.mutuallyExclusive]', - APIDomain: '[params.APIDomain]', - APIDomainBearerToken: '[params.APIDomainBearerToken]', - APIManualQueryParams: '[params.APIManualQueryParams]', - allowMultiple: '[params.allowMultiple]', - mandatory: '[params.mandatory]', - instructions: '[params.instructions]', - autocomplete: '[params.autocomplete]', - isEditable: '[params.isEditable]', - ariaYouHaveSelected: '[params.ariaYouHaveSelected]', - ariaMinChars: '[params.ariaMinChars]', - minChars: '[params.minChars]', - ariaResultsLabel: '[params.ariaResultsLabel]', - ariaOneResult: '[params.ariaOneResult]', - ariaNResults: '[params.ariaNResults]', - ariaLimitedResults: '[params.ariaLimitedResults]', - ariaGroupedResults: '[params.ariaGroupedResults]', - groupCount: '[params.groupCount]', - moreResults: '[params.moreResults]', - tooManyResults: '[params.tooManyResults]', - resultsTitle: '[params.resultsTitle]', - resultsTitleId: '[params.resultsTitleId]', - noResults: '[params.noResults]', - typeMore: '[params.typeMore]', - errorTitle: '[params.errorTitle]', - errorMessageEnter: '[params.errorMessageEnter]', - errorMessageSelect: '[params.errorMessageSelect]', - errorMessageAPI: '[params.errorMessageAPI]', - errorMessageAPILinkText: '[params.errorMessageAPILinkText]', - options: '[params.options]', - manualLink: '[params.manualLink]', - manualLinkText: '[params.manualLinkText]', - }); - - test('THEN: it renders autosuggest component with expected parameters', () => { - expect(autosuggestSpy.occurrences[0]).toEqual({ - id: 'address-input-example-id-autosuggest', - classes: 'ons-address-input__autosuggest ons-u-mb-no', - input: { - width: '50', - label: { - text: '[params.label.text]', - id: '[params.label.id]', - classes: 'ons-js-autosuggest-label', - }, - value: '[params.value]', - attributes: '[params.attributes]', - error: '[params.error]', - name: '[params.name]', - mutuallyExclusive: '[params.mutuallyExclusive]', - }, - externalInitialiser: true, - APIDomain: '[params.APIDomain]', - APIDomainBearerToken: '[params.APIDomainBearerToken]', - APIManualQueryParams: '[params.APIManualQueryParams]', - allowMultiple: '[params.allowMultiple]', - mandatory: '[params.mandatory]', - instructions: '[params.instructions]', - autocomplete: '[params.autocomplete]', - isEditable: '[params.isEditable]', - ariaYouHaveSelected: '[params.ariaYouHaveSelected]', - ariaMinChars: '[params.ariaMinChars]', - minChars: '[params.minChars]', - ariaOneResult: '[params.ariaOneResult]', - ariaNResults: '[params.ariaNResults]', - ariaLimitedResults: '[params.ariaLimitedResults]', - ariaGroupedResults: '[params.ariaGroupedResults]', - groupCount: '[params.groupCount]', - moreResults: '[params.moreResults]', - tooManyResults: '[params.tooManyResults]', - resultsTitle: '[params.resultsTitle]', - resultsTitleId: '[params.resultsTitleId]', - noResults: '[params.noResults]', - typeMore: '[params.typeMore]', - errorTitle: '[params.errorTitle]', - errorMessageEnter: '[params.errorMessageEnter]', - errorMessageSelect: '[params.errorMessageSelect]', - errorMessageAPI: '[params.errorMessageAPI]', - errorMessageAPILinkText: '[params.errorMessageAPILinkText]', - options: '[params.options]', - manualLink: '[params.manualLink]', - manualLinkText: '[params.manualLinkText]', - }); - }); - }); - + describe('GIVEN: Params: manualLink', () => { describe('WHEN: provided with a default value for manualLink', () => { const $ = cheerio.load( renderComponent('address-input', { From c9cf6ea051b4a6649c51595c9e6986012d77c325 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 17 Sep 2024 12:14:38 +0100 Subject: [PATCH 11/18] update --- src/components/address-input/_macro.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 22975de705..d3ca510220 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -7,8 +7,8 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from './_test-examples'; describe('FOR: address-input', () => { - describe('GIVEN: Params: none', () => { - describe('WHEN: All params are at default state', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: All required params are provided', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); test('THEN: jest-axe tests pass', async () => { From cd40aa54397621807ad296f75ac79b73fc82d353 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 19 Sep 2024 11:11:11 +0100 Subject: [PATCH 12/18] Update src/components/address-input/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index d3ca510220..2c478051ca 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -8,7 +8,7 @@ import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from describe('FOR: address-input', () => { describe('GIVEN: Params: required', () => { - describe('WHEN: All required params are provided', () => { + describe('WHEN: all required params are provided', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); test('THEN: jest-axe tests pass', async () => { From 5fe61f1ef59480e1d454c77de6dd8ded80f9c100 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 19 Sep 2024 11:11:23 +0100 Subject: [PATCH 13/18] Update src/components/address-input/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 2c478051ca..779bfccdfb 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from './_test-examples'; -describe('FOR: address-input', () => { +describe('FOR: Macro: Address-input', () => { describe('GIVEN: Params: required', () => { describe('WHEN: all required params are provided', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); From c68cd42e81ecad44c0b2457e71e89ad23437e2ce Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 23 Sep 2024 11:23:29 +0100 Subject: [PATCH 14/18] rephrase test name --- src/components/address-input/_macro.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 779bfccdfb..015ff0a52c 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -336,7 +336,7 @@ describe('FOR: Macro: Address-input', () => { }); }); - describe('WHEN: a value for manualLink is provided', () => { + describe('WHEN: a value for manualLink and manualLinkText is provided', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, @@ -345,7 +345,7 @@ describe('FOR: Macro: Address-input', () => { }), ); - test('THEN: it renders the manual link with the provided text and url', () => { + test('THEN: it renders the manualLink with the provided text and url', () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); From 62c7663ff6815c5197888460bf9a45e9fb557da5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 7 Nov 2024 17:48:52 +0000 Subject: [PATCH 15/18] Update src/components/address-input/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/address-input/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 015ff0a52c..c0c077dbee 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -8,7 +8,7 @@ import { EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, EXAMPLE_MANUAL_INPUT_FIELDS } from describe('FOR: Macro: Address-input', () => { describe('GIVEN: Params: required', () => { - describe('WHEN: all required params are provided', () => { + describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('address-input', EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL)); test('THEN: jest-axe tests pass', async () => { From 2574aabdd26f5e60e3e9275ae8260c06c29b8945 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 7 Nov 2024 23:16:39 +0000 Subject: [PATCH 16/18] address Pr comment --- src/components/address-input/_macro.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index f985166c75..89c9cfd273 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -105,7 +105,7 @@ describe('FOR: Macro: Address-input', () => { manualLinkText: '[params.manualLinkText]', }); - test('THEN: it renders autosuggest component with expected parameters', () => { + test('THEN: the provided attributes are passed through to the autosuggest component', () => { expect(autosuggestSpy.occurrences[0]).toEqual({ id: 'address-input-example-id-autosuggest', classes: 'ons-address-input__autosuggest ons-u-mb-no', @@ -151,7 +151,7 @@ describe('FOR: Macro: Address-input', () => { errorMessageApi: '[params.errorMessageApi]', errorMessageApiLinkText: '[params.errorMessageApiLinkText]', options: '[params.options]', - manualLink: '[params.manualLink]', + manualLinkUrl: '[params.manualLinkUrl]', manualLinkText: '[params.manualLinkText]', }); }); @@ -337,7 +337,7 @@ describe('FOR: Macro: Address-input', () => { }); }); - describe('WHEN: a value for manualLink and manualLinkText is provided', () => { + describe('WHEN: a value for manualLinkUrl and manualLinkText is provided', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, From 3f8795794c0e95f76930053d78a387739de26364 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 8 Nov 2024 11:04:58 +0000 Subject: [PATCH 17/18] add more comments --- src/components/address-input/_macro.spec.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 89c9cfd273..0b8d9bd75c 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -331,23 +331,11 @@ describe('FOR: Macro: Address-input', () => { }), ); - test('THEN: it renders the manual link with the provided text and a default url', () => { + test('THEN: it renders the manual link with the provided url', () => { expect($('.ons-js-address-manual-btn').attr('href')).toBe('#0'); - expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); - }); - - describe('WHEN: a value for manualLinkUrl and manualLinkText is provided', () => { - const $ = cheerio.load( - renderComponent('address-input', { - ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - manualLinkUrl: 'https://example.com/edit-address', - manualLinkText: 'Manually enter address', - }), - ); - test('THEN: it renders the manualLink with the provided text and url', () => { - expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address'); + test('THEN: it renders the manual link with the provided text', () => { expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); }); From e847236ff1706b97ac659ded8aa4ea5daddaaa46 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 8 Nov 2024 16:08:47 +0000 Subject: [PATCH 18/18] more changes to test name --- src/components/address-input/_macro.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 0b8d9bd75c..5377705ad3 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -167,7 +167,7 @@ describe('FOR: Macro: Address-input', () => { ...EXAMPLE_MANUAL_INPUT_FIELDS, isEditable: true, }); - describe('WHEN: Params: organisation', () => { + describe('WHEN: organisation is provided', () => { test('THEN: it renders "organisation" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-organisation', @@ -182,7 +182,7 @@ describe('FOR: Macro: Address-input', () => { }); }); }); - describe('WHEN: Params: line1', () => { + describe('WHEN: line1 is provided', () => { test('THEN: it renders "address line 1" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-line1', @@ -198,7 +198,7 @@ describe('FOR: Macro: Address-input', () => { }); }); - describe('WHEN: Params: line2', () => { + describe('WHEN: line2 is provided', () => { test('THEN: it renders "address line 2" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-line2', @@ -214,7 +214,7 @@ describe('FOR: Macro: Address-input', () => { }); }); - describe('WHEN: Params: town', () => { + describe('WHEN: town is provided', () => { test('THEN: it renders "town or city" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-town', @@ -229,7 +229,7 @@ describe('FOR: Macro: Address-input', () => { }); }); - describe('WHEN: Params: postcode', () => { + describe('WHEN: postcode is provided', () => { test('THEN: it renders "postcode" input field with expected parameters', () => { expect(inputSpy.occurrences).toContainEqual({ id: 'address-input-example-id-postcode',