Migrated VisitsHeader test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-10 21:35:42 +02:00
parent 54fe849efd
commit b1fec831c5

View file

@ -1,36 +1,21 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { VisitsHeader } from '../../src/visits/VisitsHeader'; import { VisitsHeader } from '../../src/visits/VisitsHeader';
import { Visit } from '../../src/visits/types'; import { Visit } from '../../src/visits/types';
describe('<VisitsHeader />', () => { describe('<VisitsHeader />', () => {
let wrapper: ShallowWrapper;
const visits = [Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>()]; const visits = [Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>()];
const title = 'My header title'; const title = 'My header title';
const goBack = jest.fn(); const goBack = jest.fn();
const setUp = () => render(<VisitsHeader visits={visits} goBack={goBack} title={title} />);
beforeEach(() => {
wrapper = shallow(
<VisitsHeader visits={visits} goBack={goBack} title={title} />,
);
});
afterEach(() => wrapper.unmount());
afterEach(jest.resetAllMocks);
it('shows the amount of visits', () => { it('shows the amount of visits', () => {
const visitsBadge = wrapper.find('.badge'); const { container } = setUp();
expect(container.querySelector('.badge')).toHaveTextContent(`Visits: ${visits.length}`);
expect(visitsBadge.html()).toContain(
`Visits: <span><strong class="short-url-visits-count__amount">${visits.length}</strong></span>`,
);
}); });
it('shows the title in two places', () => { it('shows the title in two places', () => {
const titles = wrapper.find('.text-center'); setUp();
expect(screen.getAllByText(title)).toHaveLength(2);
expect(titles).toHaveLength(2);
expect(titles.at(0).html()).toContain(title);
expect(titles.at(1).html()).toContain(title);
}); });
}); });