test(link): use jest-dom matchers, remove snapshots

This commit is contained in:
Eric Liu 2020-01-01 12:12:41 -08:00
commit a6cb552a52
2 changed files with 18 additions and 33 deletions

View file

@ -1,33 +1,23 @@
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Component from './Link.Story.svelte'; import Component from './Link.Story.svelte';
describe('Link', () => { test('Link', () => {
function hasClass(element, className) { const { container, rerender } = render(Component, {
return element.classList.contains(className); href: '#',
} inline: false,
disabled: false
test('default', () => {
const { getByText, container, rerender } = render(Component, {
href: '#',
inline: false,
disabled: false
});
const selector = '.bx--link';
let element = null;
element = container.querySelector(selector);
expect(element).toBeInTheDocument();
expect(element.getAttribute('href')).toEqual('#');
expect(hasClass(element, 'bx--link--inline')).toEqual(false);
expect(hasClass(element, 'bx--link--disabled')).toEqual(false);
expect(getByText('Link')).toBeInTheDocument();
expect(container.innerHTML).toMatchSnapshot();
rerender({ props: { inline: true, disabled: true } });
element = container.querySelector(selector);
expect(hasClass(element, 'bx--link--inline')).toEqual(true);
expect(hasClass(element, 'bx--link--disabled')).toEqual(true);
expect(container.innerHTML).toMatchSnapshot();
}); });
const selector = '.bx--link';
let element = null;
element = container.querySelector(selector);
expect(element).toHaveAttribute('href', '#');
expect(element).not.toHaveClass('bx--link--inline', 'bx--link--disabled');
expect(element).toHaveTextContent('Link');
rerender({ props: { inline: true, disabled: true } });
element = container.querySelector(selector);
expect(element).toHaveClass('bx--link--inline', 'bx--link--disabled');
}); });

View file

@ -1,5 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Link default 1`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><a class=\\"bx--link\\" href=\\"#\\">Link</a></div></div></div>"`;
exports[`Link default 2`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div><p class=\\"bx--link bx--link--disabled bx--link--inline\\">Link</p></div></div></div>"`;