Refactor Address output component test file to new format

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

@@ -5,94 +5,121 @@ 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, EXAMPLE_ADDRESS_OUTPUT_NONE } from './_test_examples';
+
+describe('FOR: address-output', () => {
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: All params are at default state', () => {
+            const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
+
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has additionally provided container style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('address-output', {
-                ...EXAMPLE_ADDRESS_OUTPUT_FULL,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
-        expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+    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 additionally provided classes', async () => {
+                expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
+                expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('renders no lines when no parameters are provided', () => {
-        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: no address lines are provided in the parameters', () => {
+            const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
 
-        expect($('.ons-address-output__lines *').length).toBe(0);
+            test('THEN: renders no lines', () => {
+                expect($('.ons-address-output__lines *').length).toBe(0);
+            });
+        });
     });
 
-    it.each([
+    describe.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));
-
-        expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders `unit` correctly', () => {
+                expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+            });
+        });
     });
 
-    it.each([
+    describe.each([
         ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
         ['single line', { organisation: 'Trescos' }],
-    ])('renders `organisation` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
-
-        expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders `organisation` correctly', () => {
+                expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+            });
+        });
     });
 
-    it.each([
+    describe.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));
-
-        expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders `line1` correctly', () => {
+                expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+            });
+        });
     });
 
-    it.each([
+    describe.each([
         ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
         ['single line', { line2: 'Goathill' }],
-    ])('renders `line2` with %s', (_, params) => {
-        const $ = cheerio.load(renderComponent('address-output', params));
-
-        expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders `line2` correctly', () => {
+                expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+            });
+        });
     });
 
-    it.each([
+    describe.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');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders the `town` correctly', () => {
+                expect($('.ons-address-output__town').text().trim()).toBe('Barry');
+            });
+        });
     });
 
-    it.each([
+    describe.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');
+    ])('GIVEN: %s', (scenario, params) => {
+        describe(`WHEN: the address-output with ${scenario}`, () => {
+            const $ = cheerio.load(renderComponent('address-output', params));
+
+            test('THEN: renders the `postcode` correctly', () => {
+                expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+            });
+        });
     });
 });

src/components/address-output/_test_examples.js

@@ -0,0 +1,12 @@
+export { EXAMPLE_ADDRESS_OUTPUT_FULL, EXAMPLE_ADDRESS_OUTPUT_NONE };
+
+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 = {};