Merge pull request #8 from metonym/test

test: add initial unit tests for Breadcrumb, cx

.travis.yml

@@ -2,4 +2,5 @@ language: node_js
 node_js: 10
 cache: yarn
 script:
+  - yarn test
   - yarn build

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();
+  });
+});

src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap

@@ -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>"`;

src/lib/__tests__/cx.spec.js

@@ -0,0 +1,10 @@
+import { cx } from '../cx';
+
+test('cx', () => {
+  expect(cx(null)).toEqual('');
+  expect(cx(undefined)).toEqual('');
+  expect(cx('--')).toEqual('bx--');
+  expect(cx('--', null)).toEqual('bx--');
+  expect(cx(0, undefined, '--', null, 1)).toEqual('bx--');
+  expect(cx(1 && '1', 0 && '0')).toEqual('1');
+});