Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor External-link component test file to new format #3425

Merged
merged 2 commits into from
Nov 20, 2024
Merged

Refactor External-link component test file to new format #3425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27d6d35
refactor external-link component test file
rmccar Nov 15, 2024
24d27c0
Merge branch 'main' into refactor-external-link-component-test-file
SriHV Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 66 additions & 69 deletions src/components/external-link/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
4 changes: 4 additions & 0 deletions src/components/external-link/_test_examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const EXAMPLE_EXTERNAL_LINK = {
url: 'http://example.com',
text: 'Example link',
};
Loading