mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated HighlightCard test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-05 10:19:08 +02:00
parent 4defeaf017
commit 30f502a51b
1 changed files with 18 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
test/servers/helpers/HighlightCard.test.tsx
View file

@ -1,32 +1,23 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap'; import { MemoryRouter } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard'; import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
describe('<HighlightCard />', () => { describe('<HighlightCard />', () => {
let wrapper: ShallowWrapper; const setUp = (props: HighlightCardProps & { children?: ReactNode }) => render(
const createWrapper = (props: HighlightCardProps & { children?: ReactNode }) => { <MemoryRouter>
wrapper = shallow(<HighlightCard {...props} />); <HighlightCard {...props} />
</MemoryRouter>,
return wrapper; );
};
afterEach(() => wrapper?.unmount());
it.each([ it.each([
[undefined], [undefined],
[false], [false],
])('renders expected components', (link) => { ])('does not render icon when there is no link', (link) => {
const wrapper = createWrapper({ title: 'foo', link: link as undefined | false }); setUp({ title: 'foo', link: link as undefined | false });
expect(wrapper.find(Card)).toHaveLength(1); expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
expect(wrapper.find(CardTitle)).toHaveLength(1); expect(screen.queryByRole('link')).not.toBeInTheDocument();
expect(wrapper.find(CardText)).toHaveLength(1);
expect(wrapper.find(FontAwesomeIcon)).toHaveLength(0);
expect(wrapper.prop('tag')).not.toEqual(Link);
expect(wrapper.prop('to')).not.toBeDefined();
}); });
it.each([ it.each([
@ -34,10 +25,8 @@ describe('<HighlightCard />', () => {
['bar'], ['bar'],
['baz'], ['baz'],
])('renders provided title', (title) => { ])('renders provided title', (title) => {
const wrapper = createWrapper({ title }); setUp({ title });
const cardTitle = wrapper.find(CardTitle); expect(screen.getByText(title)).toHaveAttribute('class', expect.stringContaining('highlight-card__title'));
expect(cardTitle.html()).toContain(`>${title}<`);
}); });
it.each([ it.each([
@ -45,10 +34,8 @@ describe('<HighlightCard />', () => {
['bar'], ['bar'],
['baz'], ['baz'],
])('renders provided children', (children) => { ])('renders provided children', (children) => {
const wrapper = createWrapper({ title: 'foo', children }); setUp({ title: 'title', children });
const cardText = wrapper.find(CardText); expect(screen.getByText(children)).toHaveAttribute('class', expect.stringContaining('card-text'));
expect(cardText.html()).toContain(`>${children}<`);
}); });
it.each([ it.each([
@ -56,10 +43,9 @@ describe('<HighlightCard />', () => {
['bar'], ['bar'],
['baz'], ['baz'],
])('adds extra props when a link is provided', (link) => { ])('adds extra props when a link is provided', (link) => {
const wrapper = createWrapper({ title: 'foo', link }); setUp({ title: 'title', link });
expect(wrapper.find(FontAwesomeIcon)).toHaveLength(1); expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
expect(wrapper.prop('tag')).toEqual(Link); expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`);
expect(wrapper.prop('to')).toEqual(link);
}); });
}); });