Migrated ExportShortUrlsBtn test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-06 18:59:30 +02:00
parent 1a20065053
commit c80ad70e3b

View file

@ -1,51 +1,44 @@
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import { ReportExporter } from '../../../src/common/services/ReportExporter'; import { ReportExporter } from '../../../src/common/services/ReportExporter';
import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn'; import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data'; import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: jest.fn().mockReturnValue(jest.fn()),
useParams: jest.fn().mockReturnValue({}),
useLocation: jest.fn().mockReturnValue({}),
}));
describe('<ExportShortUrlsBtn />', () => { describe('<ExportShortUrlsBtn />', () => {
const listShortUrls = jest.fn(); const listShortUrls = jest.fn();
const buildShlinkApiClient = jest.fn().mockReturnValue({ listShortUrls }); const buildShlinkApiClient = jest.fn().mockReturnValue({ listShortUrls });
const exportShortUrls = jest.fn(); const exportShortUrls = jest.fn();
const reportExporter = Mock.of<ReportExporter>({ exportShortUrls }); const reportExporter = Mock.of<ReportExporter>({ exportShortUrls });
const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter); const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter);
let wrapper: ShallowWrapper; const setUp = (amount?: number, selectedServer?: SelectedServer) => ({
const createWrapper = (amount?: number, selectedServer?: SelectedServer) => { user: userEvent.setup(),
wrapper = shallow( ...render(
<ExportShortUrlsBtn selectedServer={selectedServer ?? Mock.all<SelectedServer>()} amount={amount} />, <MemoryRouter>
); <ExportShortUrlsBtn selectedServer={selectedServer ?? Mock.all<SelectedServer>()} amount={amount} />
</MemoryRouter>,
return wrapper; ),
}; });
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it.each([ it.each([
[undefined, 0], [undefined, '0'],
[1, 1], [1, '1'],
[4578, 4578], [4578, '4,578'],
])('renders expected amount', (amount, expectedAmount) => { ])('renders expected amount', (amount, expectedAmount) => {
const wrapper = createWrapper(amount); setUp(amount);
expect(screen.getByText(/Export/)).toHaveTextContent(`Export (${expectedAmount})`);
expect(wrapper.prop('amount')).toEqual(expectedAmount);
}); });
it.each([ it.each([
[null], [null],
[Mock.of<NotFoundServer>()], [Mock.of<NotFoundServer>()],
])('does nothing on click if selected server is not reachable', (selectedServer) => { ])('does nothing on click if selected server is not reachable', async (selectedServer) => {
const wrapper = createWrapper(0, selectedServer); const { user } = setUp(0, selectedServer);
wrapper.simulate('click'); await user.click(screen.getByRole('button'));
expect(listShortUrls).not.toHaveBeenCalled(); expect(listShortUrls).not.toHaveBeenCalled();
expect(exportShortUrls).not.toHaveBeenCalled(); expect(exportShortUrls).not.toHaveBeenCalled();
}); });
@ -58,13 +51,13 @@ describe('<ExportShortUrlsBtn />', () => {
[41, 3], [41, 3],
[385, 20], [385, 20],
])('loads proper amount of pages based on the amount of results', async (amount, expectedPageLoads) => { ])('loads proper amount of pages based on the amount of results', async (amount, expectedPageLoads) => {
const wrapper = createWrapper(amount, Mock.of<ReachableServer>({ id: '123' }));
listShortUrls.mockResolvedValue({ data: [] }); listShortUrls.mockResolvedValue({ data: [] });
const { user } = setUp(amount, Mock.of<ReachableServer>({ id: '123' }));
await (wrapper.prop('onClick') as Function)(); await user.click(screen.getByRole('button'));
await waitForElementToBeRemoved(() => screen.getByText('Exporting...'));
expect(listShortUrls).toHaveBeenCalledTimes(expectedPageLoads); expect(listShortUrls).toHaveBeenCalledTimes(expectedPageLoads);
expect(exportShortUrls).toHaveBeenCalledTimes(1); expect(exportShortUrls).toHaveBeenCalled();
}); });
}); });