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