From 299426191ed7d1cd004ddee873e3931ebea67c01 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 17 Dec 2019 09:22:39 -0800 Subject: [PATCH] test(breadcrumb): add tests for Breadcrumb --- src/components/Breadcrumb/Breadcrumb.test.js | 40 +++++++++++++++++++ .../__snapshots__/Breadcrumb.test.js.snap | 7 ++++ 2 files changed, 47 insertions(+) create mode 100644 src/components/Breadcrumb/Breadcrumb.test.js create mode 100644 src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap diff --git a/src/components/Breadcrumb/Breadcrumb.test.js b/src/components/Breadcrumb/Breadcrumb.test.js new file mode 100644 index 00000000..6f8c68b2 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.test.js @@ -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(); + }); +}); diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap new file mode 100644 index 00000000..40e82b62 --- /dev/null +++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumb default 1`] = `"
"`; + +exports[`Breadcrumb default 2`] = `"
"`; + +exports[`Breadcrumb skeleton 1`] = `"
 
 
 
"`;