Skip to content

Commit

Permalink
Refactor Breadcrumbs component test file to new format (#3342)
Browse files Browse the repository at this point in the history 
* refactors test suite to new testing format

* updates itemlist to include second breadcrumb

* Update src/components/breadcrumbs/_macro.spec.js

---------

Co-authored-by: Alessio Venturini <[email protected]>
Co-authored-by: rmccar <[email protected]>
  • Loading branch information
@balibirchlee @alessioventuriniAND @rmccar
3 people authored Sep 30, 2024
1 parent 2ed65e3 commit 6afaba9
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 115 deletions.
236 changes: 121 additions & 115 deletions src/components/breadcrumbs/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,125 +5,131 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { mapAll } from '../../tests/helpers/cheerio';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';

const EXAMPLE_BREADCRUMBS_MINIMAL = {
itemsList: [
{
url: 'https://example.com/',
text: 'Home',
},
{
url: 'https://example.com/guide/',
text: 'Guide',
},
],
};

const EXAMPLE_BREADCRUMBS = {
classes: 'extra-class another-extra-class',
ariaLabel: 'Breadcrumbs label',
id: 'example-breadcrumbs',
itemsList: [
{
itemClasses: 'item-extra-class item-another-extra-class',
linkClasses: 'link-extra-class link-another-extra-class',
url: 'https://example.com/',
text: 'Home',
attributes: {
'data-a': '123',
'data-b': '456',
},
id: 'first-breadcrumb',
},
{
url: 'https://example.com/guide/',
text: 'Guide',
id: 'second-breadcrumb',
attributes: {
'data-a': '789',
'data-b': 'ABC',
},
},
],
};

describe('macro: breadcrumbs', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

const results = await axe($.html());
expect(results).toHaveNoViolations();
});

it('has additionally provided style classes', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
});

it('has a default `aria-label` of "Breadcrumbs"', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));

expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
});

it('has the provided `ariaLabel` for `aria-label`', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
});

it('has the provided `id`', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
import { EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS, EXAMPLE_BREADCRUMBS_ALL_PARAMS } from './_test_examples';

describe('FOR: Macro: Breadcrumbs', () => {
describe('GIVEN: Params: required', () => {
describe('WHEN: required params are provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
test('THEN: jest-axe tests pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
const faker = templateFaker();
const iconsSpy = faker.spy('icon');
faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS);
test('THEN: renders chevron icon next to item', () => {
const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
expect(iconTypes).toEqual(['chevron']);
});
});
});

it('has additionally provided style classes on `item` element', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
describe('GIVEN: Params: all', () => {
describe('WHEN: all Params are provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: jest-axe tests pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
const faker = templateFaker();
const iconsSpy = faker.spy('icon');
faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS);
test('THEN: renders chevron icon next to each item', () => {
const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
expect(iconTypes).toEqual(['chevron', 'chevron']);
});
});
});

it('has additionally provided style classes on `link` element', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
describe('GIVEN: Params: classes', () => {
describe('WHEN: additional classes are provided', () => {
const $ = cheerio.load(
renderComponent('breadcrumbs', {
...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
classes: 'extra-class another-extra-class',
}),
);
test('THEN: renders with correct additional classes', () => {
expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
});
});
});

it('has provided `url` on `link` elements', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
describe('GIVEN: Params: ariaLabel', () => {
describe('WHEN: ariaLabel is not provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
test('THEN: renders with default aria-label of "Breadcrumbs"', () => {
expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
});
});
describe('WHEN: ariaLabel is provided', () => {
const $ = cheerio.load(
renderComponent('breadcrumbs', {
...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
ariaLabel: 'Breadcrumbs label',
}),
);
test('THEN: renders with provided aria-label', () => {
expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
});
});
});

it('has provided `text` on `link` elements', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
expect(labels).toEqual(['Home', 'Guide']);
});

it('has provided `attributes` on `link` elements', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));

const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
expect(testValuesA).toEqual(['123', '789']);
const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
expect(testValuesB).toEqual(['456', 'ABC']);
describe('GIVEN: Params: id', () => {
describe('WHEN: id is provided', () => {
const $ = cheerio.load(
renderComponent('breadcrumbs', {
...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
id: 'example-breadcrumbs',
}),
);
test('THEN: renders with provided id', () => {
expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
});
});
});

it('has a "chevron" icon for each breadcrumb item', () => {
const faker = templateFaker();
const iconsSpy = faker.spy('icon');

faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);

const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
expect(iconTypes).toEqual(['chevron', 'chevron']);
describe('GIVEN: Params: itemsList (multiple)', () => {
describe('WHEN: itemClasses param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders item with provided style classes', () => {
expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
});
});
describe('WHEN: linkClasses param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders link with provided style classes', () => {
expect($('.ons-breadcrumbs__link').hasClass('link-extra-class')).toBe(true);
expect($('.ons-breadcrumbs__link').hasClass('link-another-extra-class')).toBe(true);
});
});
describe('WHEN: id param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders items with provided id', () => {
const ids = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('id'));
expect(ids).toEqual(['first-breadcrumb', 'second-breadcrumb']);
});
});
describe('WHEN: url param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders items with provided url link', () => {
const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
});
});
describe('WHEN: text param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders item links with provided text', () => {
const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
expect(labels).toEqual(['Home', 'Guide']);
});
});
describe('WHEN: attributes param is provided', () => {
const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
test('THEN: renders items with provided attributes', () => {
const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
expect(testValuesA).toEqual(['123', '789']);
const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
expect(testValuesB).toEqual(['456', 'ABC']);
});
});
});
});
36 changes: 36 additions & 0 deletions src/components/breadcrumbs/_test_examples.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
export const EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS = {
itemsList: [
{
url: 'https://example.com/',
text: 'Home',
},
],
};

export const EXAMPLE_BREADCRUMBS_ALL_PARAMS = {
classes: 'extra-class another-extra-class',
ariaLabel: 'Breadcrumbs label',
id: 'example-breadcrumbs',
itemsList: [
{
itemClasses: 'item-extra-class item-another-extra-class',
linkClasses: 'link-extra-class link-another-extra-class',
url: 'https://example.com/',
text: 'Home',
attributes: {
'data-a': '123',
'data-b': '456',
},
id: 'first-breadcrumb',
},
{
url: 'https://example.com/guide/',
text: 'Guide',
id: 'second-breadcrumb',
attributes: {
'data-a': '789',
'data-b': 'ABC',
},
},
],
};

0 comments on commit 6afaba9

Please sign in to comment.