Migrated ChartCard test to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-13 19:59:30 +02:00
parent f3f0dbac19
commit 4999f982e4

View file

@ -1,46 +1,22 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Card, CardBody, CardHeader, CardFooter } from 'reactstrap';
import { ChartCard } from '../../../src/visits/charts/ChartCard'; import { ChartCard } from '../../../src/visits/charts/ChartCard';
describe('<ChartCard />', () => { describe('<ChartCard />', () => {
let wrapper: ShallowWrapper; const setUp = (title: Function | string = '', footer?: ReactNode) => render(
const createWrapper = (title: Function | string = '', footer?: ReactNode) => { <ChartCard title={title} footer={footer} />,
wrapper = shallow(<ChartCard title={title} footer={footer} />); );
return wrapper;
};
afterEach(() => wrapper?.unmount());
it('renders expected components', () => {
const wrapper = createWrapper();
const card = wrapper.find(Card);
const header = wrapper.find(CardHeader);
const body = wrapper.find(CardBody);
const footer = wrapper.find(CardFooter);
expect(card).toHaveLength(1);
expect(header).toHaveLength(1);
expect(body).toHaveLength(1);
expect(footer).toHaveLength(0);
});
it.each([ it.each([
['the title', 'the title'], ['the title', 'the title'],
[() => 'the title from func', 'the title from func'], [() => 'the title from func', 'the title from func'],
])('properly renders title by parsing provided value', (title, expectedTitle) => { ])('properly renders title by parsing provided value', (title, expectedTitle) => {
const wrapper = createWrapper(title); setUp(title);
const header = wrapper.find(CardHeader); expect(screen.getByText(expectedTitle)).toBeInTheDocument();
expect(header.html()).toContain(expectedTitle);
}); });
it('renders footer only when provided', () => { it('renders footer only when provided', () => {
const wrapper = createWrapper('', 'the footer'); setUp('', 'the footer');
const footer = wrapper.find(CardFooter); expect(screen.getByText('the footer')).toBeInTheDocument();
expect(footer).toHaveLength(1);
expect(footer.html()).toContain('the footer');
}); });
}); });