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

Migrated Message test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-10 20:29:56 +02:00
parent bdf181adec
commit 4a88f30d13
1 changed files with 17 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
test/utils/Message.test.tsx
View file

@ -1,28 +1,17 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Card } from 'reactstrap';
import { Message, MessageProps } from '../../src/utils/Message'; import { Message, MessageProps } from '../../src/utils/Message';
describe('<Message />', () => { describe('<Message />', () => {
let wrapper: ShallowWrapper; const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);
const createWrapper = (props: PropsWithChildren<MessageProps> = {}) => {
wrapper = shallow(<Message {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([ it.each([
[true, 1, 0], [true, 'col-md-12'],
[false, 0, 1], [false, 'col-md-10 offset-md-1'],
[undefined, 0, 1], [undefined, 'col-md-10 offset-md-1'],
])('renders expected classes based on width', (fullWidth, expectedFull, expectedNonFull) => { ])('renders expected classes based on width', (fullWidth, expectedClass) => {
const wrapper = createWrapper({ fullWidth }); const { container } = setUp({ fullWidth });
expect(container.firstChild?.firstChild).toHaveClass(expectedClass);
expect(wrapper.find('.col-md-12')).toHaveLength(expectedFull);
expect(wrapper.find('.col-md-10')).toHaveLength(expectedNonFull);
}); });
it.each([ it.each([
@ -31,15 +20,14 @@ describe('<Message />', () => {
[true, undefined], [true, undefined],
[false, undefined], [false, undefined],
])('renders expected content', (loading, children) => { ])('renders expected content', (loading, children) => {
const wrapper = createWrapper({ loading, children }); setUp({ loading, children });
expect(wrapper.find(FontAwesomeIcon)).toHaveLength(loading ? 1 : 0); expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(loading ? 1 : 0);
if (loading) { if (loading) {
expect(wrapper.find('span').text()).toContain(children || 'Loading...'); expect(screen.getByText(children || 'Loading...')).toHaveClass('ms-2');
} else { } else {
expect(wrapper.find('span')).toHaveLength(0); expect(screen.getByRole('heading')).toHaveTextContent(children || '');
expect(wrapper.find('h3').text()).toContain(children || '');
} }
}); });
@ -48,17 +36,14 @@ describe('<Message />', () => {
['default', '', 'text-muted'], ['default', '', 'text-muted'],
[undefined, '', 'text-muted'], [undefined, '', 'text-muted'],
])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => { ])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => {
const wrapper = createWrapper({ type: type as 'default' | 'error' | undefined }); const { container } = setUp({ type: type as 'default' | 'error' | undefined });
const card = wrapper.find(Card);
const h3 = wrapper.find('h3');
expect(card.prop('className')).toEqual(expectedCardClass); expect(container.querySelector('.card-body')).toHaveAttribute('class', expect.stringContaining(expectedCardClass));
expect(h3.prop('className')).toEqual(`text-center mb-0 ${expectedH3Class}`); expect(screen.getByRole('heading')).toHaveClass(`text-center mb-0 ${expectedH3Class}`);
}); });
it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => { it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
const wrapper = createWrapper({ className }); const { container } = setUp({ className });
expect(container.firstChild).toHaveClass(`g-0${className ? ` ${className}` : ''}`);
expect(wrapper.prop('className')).toEqual(`g-0${className ? ` ${className}` : ''}`);
}); });
}); });