@ons/design-system 72.1.0 → 72.1.2

package/components/address-input/autosuggest.address.spec.js

@@ -189,7 +189,7 @@ describe('script: address-input', () => {
             await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
             await setTimeout(50);
 
-            expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
+            expect(await apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1);
         });
 
         describe('when api status is okay', () => {
@@ -257,8 +257,9 @@ describe('script: address-input', () => {
 
             await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
             await page.type('.ons-js-autosuggest-input', 'e');
+            await setTimeout(50);
 
-            expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1);
+            expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1);
         });
 
         describe('when the value is a full postcode', () => {
@@ -267,14 +268,15 @@ describe('script: address-input', () => {
 
                 await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 2N'));
                 await page.type('.ons-js-autosuggest-input', 'T');
+
+                await setTimeout(100);
             });
 
             it('provides expected parameters to the address API where `limit` is 100', async () => {
-                expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1);
+                expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202nt&limit=100&groupfullpostcodes=combo')).toBe(1);
             });
 
             it('has expected suggestion entries', async () => {
-                await setTimeout(100);
                 const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
                 expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
             });
@@ -314,7 +316,7 @@ describe('script: address-input', () => {
 
             it('provides expected parameters to the address API', async () => {
                 expect(
-                    apiFaker.getRequestCount(
+                    await apiFaker.getRequestCount(
                         '/addresses/eq?input=penlline%20road%20whitchurch%20cardiff%20cf14%202nz&limit=100&groupfullpostcodes=combo',
                     ),
                 ).toBe(1);
@@ -336,7 +338,7 @@ describe('script: address-input', () => {
                 });
 
                 it('makes expected request when a suggestion is selected', async () => {
-                    expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
+                    expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
                 });
 
                 it('populates manual input fields with address from selection', async () => {
@@ -360,7 +362,7 @@ describe('script: address-input', () => {
             });
 
             it('provides expected parameters to the address API', async () => {
-                expect(apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1);
+                expect(await apiFaker.getRequestCount('/addresses/eq?input=cf14%202&limit=10')).toBe(1);
             });
 
             it('has expected suggestion entries', async () => {
@@ -380,7 +382,7 @@ describe('script: address-input', () => {
 
                 it('makes expected request', async () => {
                     expect(
-                        apiFaker.getRequestCount(
+                        await apiFaker.getRequestCount(
                             '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo',
                         ),
                     ).toBe(1);
@@ -611,7 +613,9 @@ describe('script: address-input', () => {
             await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
             await page.type('.ons-js-autosuggest-input', 'e');
 
-            expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1);
+            await setTimeout(50);
+
+            expect(await apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1);
         });
     });
 
@@ -629,7 +633,7 @@ describe('script: address-input', () => {
             });
 
             it('then the retrieveAddress function will be called', async () => {
-                expect(apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
+                expect(await apiFaker.getRequestCount('/addresses/eq/uprn/100070332099?addresstype=paf')).toBe(1);
             });
         });
 
@@ -735,10 +739,9 @@ describe('script: address-input', () => {
         it('provides expected parameters to the address API', async () => {
             await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
             await page.type('.ons-js-autosuggest-input', 'e');
-
             await setTimeout(50);
 
-            expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1);
+            expect(await apiFaker.getRequestCount(searchEndpoint)).toBe(1);
         });
 
         it('requests further information for the selected address from the API with the expected parameters', async () => {
@@ -746,10 +749,9 @@ describe('script: address-input', () => {
             await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 });
             await page.keyboard.press('ArrowDown');
             await page.keyboard.press('Enter');
-
             await setTimeout(50);
 
-            expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1);
+            expect(await apiFaker.getRequestCount(uprnEndpoint)).toBe(1);
         });
     });
 });

package/components/address-output/_macro.spec.js

@@ -5,94 +5,141 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-const EXAMPLE_ADDRESS_OUTPUT_FULL = {
-    unit: 'Unit 5',
-    organisation: 'Trescos',
-    line1: 'Abingdon Road',
-    line2: 'Goathill',
-    town: 'Barry',
-    postcode: 'AB12 6UH',
-};
-
-const EXAMPLE_ADDRESS_OUTPUT_NONE = {};
-
-describe('macro: address-output', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
+import { EXAMPLE_ADDRESS_OUTPUT_FULL } from './_test_examples';
 
-    it('has additionally provided container style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('address-output', {
-                ...EXAMPLE_ADDRESS_OUTPUT_FULL,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
+describe('FOR: Macro: Address-output', () => {
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: no parameters are provided', () => {
+            const $ = cheerio.load(renderComponent('address-output', {}));
 
-        expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
-        expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+            test('THEN: renders no lines', () => {
+                expect($('.ons-address-output__lines *').length).toBe(0);
+            });
+        });
     });
 
-    it('renders no lines when no parameters are provided', () => {
-        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
-
-        expect($('.ons-address-output__lines *').length).toBe(0);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    ...EXAMPLE_ADDRESS_OUTPUT_FULL,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+
+            test('THEN: renders with additional classes provided', async () => {
+                expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
+                expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { unit: 'Unit 5' }],
-    ])('renders `unit` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
+    describe('GIVEN: Params: All params', () => {
+        describe('WHEN: all address line params are provided', () => {
+            const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
 
-        expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
-    });
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
 
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { organisation: 'Trescos' }],
-    ])('renders `organisation` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
+            test('THEN: renders unit with provided text', () => {
+                expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+            });
 
-        expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
-    });
+            test('THEN: renders organisation line with correct text', () => {
+                expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+            });
 
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { line1: 'Abingdon Road' }],
-    ])('renders `line1` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
+            test('THEN: renders line1 line with correct text', () => {
+                expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+            });
 
-        expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
-    });
+            test('THEN: renders line2 line with correct text', () => {
+                expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+            });
 
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { line2: 'Goathill' }],
-    ])('renders `line2` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
+            test('THEN: renders the town line with correct text', () => {
+                expect($('.ons-address-output__town').text().trim()).toBe('Barry');
+            });
 
-        expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+            test('THEN: renders the postcode line with correct text', () => {
+                expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+            });
+        });
     });
 
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { town: 'Barry' }],
-    ])('renders `town` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
-
-        expect($('.ons-address-output__town').text().trim()).toBe('Barry');
-    });
-
-    it.each([
-        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-        ['single line', { postcode: 'AB12 6UH' }],
-    ])('renders `postcode` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
-
-        expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+    describe('GIVEN: Params: single param', () => {
+        describe('WHEN: the unit address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    unit: 'Unit 5',
+                }),
+            );
+
+            test('THEN: renders unit line with correct text', () => {
+                expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+            });
+        });
+
+        describe('WHEN: the organisation address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    organisation: 'Trescos',
+                }),
+            );
+
+            test('THEN: renders organisation line with correct text', () => {
+                expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+            });
+        });
+
+        describe('WHEN: the line1 address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    line1: 'Abingdon Road',
+                }),
+            );
+
+            test('THEN: renders line1 line with correct text', () => {
+                expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+            });
+        });
+
+        describe('WHEN: the line2 address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    line2: 'Goathill',
+                }),
+            );
+
+            test('THEN: renders line2 line with correct text', () => {
+                expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+            });
+        });
+
+        describe('WHEN: the town address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    town: 'Barry',
+                }),
+            );
+
+            test('THEN: renders town line with correct text', () => {
+                expect($('.ons-address-output__town').text().trim()).toBe('Barry');
+            });
+        });
+
+        describe('WHEN: the postcode address line is the only parameter provided', () => {
+            const $ = cheerio.load(
+                renderComponent('address-output', {
+                    postcode: 'AB12 6UH',
+                }),
+            );
+
+            test('THEN: renders postcode line with correct text', () => {
+                expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+            });
+        });
     });
 });

package/components/address-output/_test_examples.js

@@ -0,0 +1,8 @@
+export const EXAMPLE_ADDRESS_OUTPUT_FULL = {
+    unit: 'Unit 5',
+    organisation: 'Trescos',
+    line1: 'Abingdon Road',
+    line2: 'Goathill',
+    town: 'Barry',
+    postcode: 'AB12 6UH',
+};