mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 02:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated Result test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-08 11:24:19 +02:00
parent 65f739499f
commit 21101d4da8
2 changed files with 10 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/utils/Result.tsx
View file

@ -15,6 +15,7 @@ export const Result: FC<ResultProps> = ({ children, type, className, small = fal
<Row className={className}> <Row className={className}>
<div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}> <div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
<SimpleCard <SimpleCard
role="document"
className={classNames('text-center', { className={classNames('text-center', {
'bg-main': type === 'success', 'bg-main': type === 'success',
'bg-danger': type === 'error', 'bg-danger': type === 'error',

32
test/utils/Result.test.tsx
View file

@ -1,46 +1,32 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Result, ResultProps, ResultType } from '../../src/utils/Result'; import { Result, ResultProps, ResultType } from '../../src/utils/Result';
import { SimpleCard } from '../../src/utils/SimpleCard';
describe('<Result />', () => { describe('<Result />', () => {
let wrapper: ShallowWrapper; const setUp = (props: ResultProps) => render(<Result {...props} />);
const createWrapper = (props: ResultProps) => {
wrapper = shallow(<Result {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([ it.each([
['success' as ResultType, 'bg-main text-white'], ['success' as ResultType, 'bg-main text-white'],
['error' as ResultType, 'bg-danger text-white'], ['error' as ResultType, 'bg-danger text-white'],
['warning' as ResultType, 'bg-warning'], ['warning' as ResultType, 'bg-warning'],
])('renders expected classes based on type', (type, expectedClasses) => { ])('renders expected classes based on type', (type, expectedClasses) => {
const wrapper = createWrapper({ type }); setUp({ type });
const innerCard = wrapper.find(SimpleCard); expect(screen.getByRole('document')).toHaveClass(expectedClasses);
expect(innerCard.prop('className')).toEqual(`text-center ${expectedClasses}`);
}); });
it.each([ it.each([
[undefined],
['foo'], ['foo'],
['bar'], ['bar'],
])('renders provided classes in root element', (className) => { ])('renders provided classes in root element', (className) => {
const wrapper = createWrapper({ type: 'success', className }); const { container } = setUp({ type: 'success', className });
expect(container.firstChild).toHaveClass(className);
expect(wrapper.prop('className')).toEqual(className);
}); });
it.each([{ small: true }, { small: false }])('renders small results properly', ({ small }) => { it.each([{ small: true }, { small: false }])('renders small results properly', ({ small }) => {
const wrapper = createWrapper({ type: 'success', small }); const { container } = setUp({ type: 'success', small });
const bigElement = wrapper.find('.col-md-10'); const bigElement = container.querySelectorAll('.col-md-10');
const smallElement = wrapper.find('.col-12'); const smallElement = container.querySelectorAll('.col-12');
const innerCard = wrapper.find(SimpleCard);
expect(bigElement).toHaveLength(small ? 0 : 1); expect(bigElement).toHaveLength(small ? 0 : 1);
expect(smallElement).toHaveLength(small ? 1 : 0); expect(smallElement).toHaveLength(small ? 1 : 0);
expect(innerCard.prop('bodyClassName')).toEqual(small ? 'p-2' : '');
}); });
}); });