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