Skip to content

Commit

Permalink
Merge branch 'main' into feature/134/autosuggest-testing-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons authored Nov 11, 2024
2 parents a2933fc + c31346c commit b79c1d8
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 89 deletions.
30 changes: 16 additions & 14 deletions src/components/address-input/autosuggest.address.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ describe('script: address-input', () => {
await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
await setTimeout(50);

expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
});

describe('when api status is okay', () => {
Expand Down Expand Up @@ -257,8 +257,9 @@ describe('script: address-input', () => {

await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
await page.type('.ons-js-autosuggest-input', 'e');
await setTimeout(50);

expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1);
});

describe('when the value is a full postcode', () => {
Expand All @@ -267,14 +268,15 @@ describe('script: address-input', () => {

await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 2N'));
await page.type('.ons-js-autosuggest-input', 'T');

await setTimeout(100);
});

it('provides expected parameters to the address API where `limit` is 100', async () => {
expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1);
});

it('has expected suggestion entries', async () => {
await setTimeout(100);
const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
});
Expand Down Expand Up @@ -314,7 +316,7 @@ describe('script: address-input', () => {

it('provides expected parameters to the address API', async () => {
expect(
apiFaker.getRequestCount(
await apiFaker.getRequestCount(
'/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo',
),
).toBe(1);
Expand All @@ -336,7 +338,7 @@ describe('script: address-input', () => {
});

it('makes expected request when a suggestion is selected', async () => {
expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
});

it('populates manual input fields with address from selection', async () => {
Expand All @@ -360,7 +362,7 @@ describe('script: address-input', () => {
});

it('provides expected parameters to the address API', async () => {
expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1);
});

it('has expected suggestion entries', async () => {
Expand All @@ -380,7 +382,7 @@ describe('script: address-input', () => {

it('makes expected request', async () => {
expect(
apiFaker.getRequestCount(
await apiFaker.getRequestCount(
'/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo',
),
).toBe(1);
Expand Down Expand Up @@ -611,7 +613,9 @@ describe('script: address-input', () => {
await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
await page.type('.ons-js-autosuggest-input', 'e');

expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1);
await setTimeout(50);

expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1);
});
});

Expand All @@ -629,7 +633,7 @@ describe('script: address-input', () => {
});

it('then the retrieveAddress function will be called', async () => {
expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
});
});

Expand Down Expand Up @@ -735,21 +739,19 @@ describe('script: address-input', () => {
it('provides expected parameters to the address API', async () => {
await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
await page.type('.ons-js-autosuggest-input', 'e');

await setTimeout(50);

expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1);
expect(await apiFaker.getRequestCount(searchEndpoint)).toBe(1);
});

it('requests further information for the selected address from the API with the expected parameters', async () => {
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);
expect(await apiFaker.getRequestCount(uprnEndpoint)).toBe(1);
});
});
});
195 changes: 121 additions & 74 deletions src/components/address-output/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,94 +5,141 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

const EXAMPLE_ADDRESS_OUTPUT_FULL = {
unit: 'Unit 5',
organisation: 'Trescos',
line1: 'Abingdon Road',
line2: 'Goathill',
town: 'Barry',
postcode: 'AB12 6UH',
};

const EXAMPLE_ADDRESS_OUTPUT_NONE = {};

describe('macro: address-output', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));

const results = await axe($.html());
expect(results).toHaveNoViolations();
});
import { EXAMPLE_ADDRESS_OUTPUT_FULL } from './_test_examples';

it('has additionally provided container style classes', () => {
const $ = cheerio.load(
renderComponent('address-output', {
...EXAMPLE_ADDRESS_OUTPUT_FULL,
classes: 'extra-class another-extra-class',
}),
);
describe('FOR: Macro: Address-output', () => {
describe('GIVEN: Params: none', () => {
describe('WHEN: no parameters are provided', () => {
const $ = cheerio.load(renderComponent('address-output', {}));

expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
test('THEN: renders no lines', () => {
expect($('.ons-address-output__lines *').length).toBe(0);
});
});
});

it('renders no lines when no parameters are provided', () => {
const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));

expect($('.ons-address-output__lines *').length).toBe(0);
describe('GIVEN: Params: classes', () => {
describe('WHEN: classes are provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
...EXAMPLE_ADDRESS_OUTPUT_FULL,
classes: 'extra-class another-extra-class',
}),
);

test('THEN: renders with additional classes provided', async () => {
expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
});
});
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { unit: 'Unit 5' }],
])('renders `unit` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));
describe('GIVEN: Params: All params', () => {
describe('WHEN: all address line params are provided', () => {
const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));

expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
});
test('THEN: jest-axe tests pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { organisation: 'Trescos' }],
])('renders `organisation` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));
test('THEN: renders unit with provided text', () => {
expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
});

expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
});
test('THEN: renders organisation line with correct text', () => {
expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { line1: 'Abingdon Road' }],
])('renders `line1` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));
test('THEN: renders line1 line with correct text', () => {
expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
});

expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
});
test('THEN: renders line2 line with correct text', () => {
expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { line2: 'Goathill' }],
])('renders `line2` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));
test('THEN: renders the town line with correct text', () => {
expect($('.ons-address-output__town').text().trim()).toBe('Barry');
});

expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
test('THEN: renders the postcode line with correct text', () => {
expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
});
});
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { town: 'Barry' }],
])('renders `town` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));

expect($('.ons-address-output__town').text().trim()).toBe('Barry');
});

it.each([
['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
['single line', { postcode: 'AB12 6UH' }],
])('renders `postcode` with %s', (_, params) => {
const $ = cheerio.load(renderComponent('address-output', params));

expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
describe('GIVEN: Params: single param', () => {
describe('WHEN: the unit address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
unit: 'Unit 5',
}),
);

test('THEN: renders unit line with correct text', () => {
expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
});
});

describe('WHEN: the organisation address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
organisation: 'Trescos',
}),
);

test('THEN: renders organisation line with correct text', () => {
expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
});
});

describe('WHEN: the line1 address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
line1: 'Abingdon Road',
}),
);

test('THEN: renders line1 line with correct text', () => {
expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
});
});

describe('WHEN: the line2 address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
line2: 'Goathill',
}),
);

test('THEN: renders line2 line with correct text', () => {
expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
});
});

describe('WHEN: the town address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
town: 'Barry',
}),
);

test('THEN: renders town line with correct text', () => {
expect($('.ons-address-output__town').text().trim()).toBe('Barry');
});
});

describe('WHEN: the postcode address line is the only parameter provided', () => {
const $ = cheerio.load(
renderComponent('address-output', {
postcode: 'AB12 6UH',
}),
);

test('THEN: renders postcode line with correct text', () => {
expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
});
});
});
});
8 changes: 8 additions & 0 deletions src/components/address-output/_test_examples.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const EXAMPLE_ADDRESS_OUTPUT_FULL = {
unit: 'Unit 5',
organisation: 'Trescos',
line1: 'Abingdon Road',
line2: 'Goathill',
town: 'Barry',
postcode: 'AB12 6UH',
};
2 changes: 1 addition & 1 deletion src/components/timeout-modal/timeout-modal.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ describe('script: timeout modal', () => {
it('closes the modal', async () => {
const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));

await setTimeout(50);
await setTimeout(100);

expect(modalIsVisible).toBe(false);
});
Expand Down

0 comments on commit b79c1d8

Please sign in to comment.