mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

test(breadcrumb): add tests for Breadcrumb

Browse source
This commit is contained in:
Eric Liu 2019-12-17 09:22:39 -08:00
commit 299426191e
2 changed files with 47 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/Breadcrumb/Breadcrumb.test.js Normal file
View file

@ -0,0 +1,40 @@
import { fireEvent, render } from '@testing-library/svelte';
import Component from './Breadcrumb.Story.svelte';
describe('Breadcrumb', () => {
function getLastBreadcrumbItem(container) {
const breadcrumbItems = container.querySelectorAll('.bx--breadcrumb-item');
return breadcrumbItems[breadcrumbItems.length - 1];
}
test('default', () => {
const { getByText, container, rerender } = render(Component, { noTrailingSlash: false });
const selector = '.bx--breadcrumb--no-trailing-slash';
expect(getByText('Breadcrumb 1')).toBeInTheDocument();
expect(getByText('Breadcrumb 2')).toBeInTheDocument();
expect(getByText('Breadcrumb 3')).toBeInTheDocument();
expect(container.querySelector(selector)).not.toBeInTheDocument();
expect(container.innerHTML).toMatchSnapshot();
rerender({ props: { noTrailingSlash: true } });
expect(container.querySelector(selector)).toBeInTheDocument();
expect(container.innerHTML).toMatchSnapshot();
});
test('skeleton', () => {
const { container } = render(Component, { story: 'skeleton' });
expect(container.innerHTML).toMatchSnapshot();
});
test('current page', () => {
const { container } = render(Component, { story: 'current page' });
const lastItem = getLastBreadcrumbItem(container);
expect(lastItem.classList.contains('bx--breadcrumb-item--current')).toEqual(true);
});
test('current page with aria-current', () => {
const { container } = render(Component, { story: 'current page with aria-current' });
const lastItem = getLastBreadcrumbItem(container);
expect(lastItem.querySelector('[aria-current="page"]')).toBeTruthy();
});
});

7
src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap Normal file
View file

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb default 1`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
exports[`Breadcrumb default 2`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb bx--breadcrumb--no-trailing-slash\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
exports[`Breadcrumb skeleton 1`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><div class=\\"bx--breadcrumb bx--skeleton\\"><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div></div></div></div>"`;