diff --git a/src/components/external-link/_macro.spec.js b/src/components/external-link/_macro.spec.js index 547e88d9a7..03f61b1690 100644 --- 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 new file mode 100644 index 0000000000..e2e21b8822 --- /dev/null +++ b/src/components/external-link/_test_examples.js @@ -0,0 +1,4 @@ +export const EXAMPLE_EXTERNAL_LINK = { + url: 'http://example.com', + text: 'Example link', +};