refactor external-link component test file

ONSdigital · Nov 15, 2024 · 27d6d35 · 27d6d35
1 parent 14ad695
commit 27d6d35
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 69 deletions.
diff --git a/src/components/external-link/_macro.spec.js b/src/components/external-link/_macro.spec.js
@@ -4,79 +4,76 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_EXTERNAL_LINK = {
-    url: 'http://example.com',
-    text: 'Example link',
-};
-
-describe('macro: external-link', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('external-link', {
-                ...EXAMPLE_EXTERNAL_LINK,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
-        expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
-    });
-
-    it('has the expected hyperlink URL', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const $hyperlink = $('a.ons-external-link');
-        expect($hyperlink.attr('href')).toBe('http://example.com');
-    });
-
-    it('opens in a new window when `newWindow` is `true`', () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        expect($('a').attr('target')).toBe('_blank');
-        expect($('a').attr('rel')).toBe('noopener');
-    });
-
-    it('has the expected link text', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const $hyperlink = $('a.ons-external-link .ons-external-link__text');
-        expect($hyperlink.text().trim()).toBe('Example link');
-    });
-
-    it('has a default new window description', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+import { EXAMPLE_EXTERNAL_LINK } from './_test_examples';
+
+describe('FOR: Macro: External-link', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the link points to the expected URL', async () => {
+                const $hyperlink = $('a.ons-external-link');
+                expect($hyperlink.attr('href')).toBe('http://example.com');
+            });
+
+            test('THEN: the link has the expected link text', async () => {
+                const $hyperlink = $('a.ons-external-link .ons-external-link__text');
+                expect($hyperlink.text().trim()).toBe('Example link');
+            });
+
+            test('THEN: the link has a default new window description', async () => {
+                expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+            });
+
+            test('THEN: the link has the external-link icon', async () => {
+                const faker = templateFaker();
+                const iconsSpy = faker.spy('icon');
+                faker.renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                });
+                expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
+            });
+        });
     });
 
-    it('has a custom new window description when `newWindowDescription` is provided', () => {
-        const $ = cheerio.load(
-            renderComponent('external-link', {
-                ...EXAMPLE_EXTERNAL_LINK,
-                newWindowDescription: 'custom opens in a new tab text',
-            }),
-        );
-
-        expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided with the classes param', () => {
+            const $ = cheerio.load(
+                renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
+                expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has an "external-link" icon', async () => {
-        const faker = templateFaker();
-        const iconsSpy = faker.spy('icon');
-
-        faker.renderComponent('external-link', {
-            ...EXAMPLE_EXTERNAL_LINK,
-            newWindowDescription: 'custom opens in a new tab text',
+    describe('GIVEN: Params: newWindowDescription', () => {
+        describe('WHEN: newWindowDescription param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                    newWindowDescription: 'custom opens in a new tab text',
+                }),
+            );
+            test('THEN: has the expected new window description', () => {
+                expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+            });
+
+            test('THEN: the target attribute is set to _blank so that the link opens in a new window', () => {
+                expect($('a').attr('target')).toBe('_blank');
+            });
+
+            test('THEN: the rel attribute is set to noopener', () => {
+                expect($('a').attr('rel')).toBe('noopener');
+            });
         });
-
-        expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
     });
 });
diff --git a/src/components/external-link/_test_examples.js b/src/components/external-link/_test_examples.js
@@ -0,0 +1,4 @@
+export const EXAMPLE_EXTERNAL_LINK = {
+    url: 'http://example.com',
+    text: 'Example link',
+};