mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated QrErrorCorrectionDropdown test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-13 21:32:19 +02:00
parent 72f790b28c
commit 3201830b27
1 changed files with 27 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx
View file

@ -1,47 +1,53 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { DropdownItem } from 'reactstrap'; import userEvent from '@testing-library/user-event';
import { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes'; import { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes';
import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown'; import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown';
describe('<QrErrorCorrectionDropdown />', () => { describe('<QrErrorCorrectionDropdown />', () => {
const initialErrorCorrection: QrErrorCorrection = 'Q'; const initialErrorCorrection: QrErrorCorrection = 'Q';
const setErrorCorrection = jest.fn(); const setErrorCorrection = jest.fn();
let wrapper: ShallowWrapper; const setUp = () => ({
user: userEvent.setup(),
beforeEach(() => { ...render(
wrapper = shallow(
<QrErrorCorrectionDropdown errorCorrection={initialErrorCorrection} setErrorCorrection={setErrorCorrection} />, <QrErrorCorrectionDropdown errorCorrection={initialErrorCorrection} setErrorCorrection={setErrorCorrection} />,
); ),
}); });
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it('renders initial state', () => { it('renders initial state', async () => {
const items = wrapper.find(DropdownItem); const { user } = setUp();
const btn = screen.getByRole('button');
expect(wrapper.prop('text')).toEqual('Error correction (Q)'); expect(btn).toHaveTextContent('Error correction (Q)');
expect(items.at(0).prop('active')).toEqual(false); await user.click(btn);
expect(items.at(1).prop('active')).toEqual(false); const items = screen.getAllByRole('menuitem');
expect(items.at(2).prop('active')).toEqual(true);
expect(items.at(3).prop('active')).toEqual(false); expect(items[0]).not.toHaveClass('active');
expect(items[1]).not.toHaveClass('active');
expect(items[2]).toHaveClass('active');
expect(items[3]).not.toHaveClass('active');
}); });
it('invokes callback when items are clicked', () => { it('invokes callback when items are clicked', async () => {
const items = wrapper.find(DropdownItem); const { user } = setUp();
const clickItem = async (name: RegExp) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getByRole('menuitem', { name }));
};
expect(setErrorCorrection).not.toHaveBeenCalled(); expect(setErrorCorrection).not.toHaveBeenCalled();
items.at(0).simulate('click'); await clickItem(/ow/);
expect(setErrorCorrection).toHaveBeenCalledWith('L'); expect(setErrorCorrection).toHaveBeenCalledWith('L');
items.at(1).simulate('click'); await clickItem(/edium/);
expect(setErrorCorrection).toHaveBeenCalledWith('M'); expect(setErrorCorrection).toHaveBeenCalledWith('M');
items.at(2).simulate('click'); await clickItem(/uartile/);
expect(setErrorCorrection).toHaveBeenCalledWith('Q'); expect(setErrorCorrection).toHaveBeenCalledWith('Q');
items.at(3).simulate('click'); await clickItem(/igh/);
expect(setErrorCorrection).toHaveBeenCalledWith('H'); expect(setErrorCorrection).toHaveBeenCalledWith('H');
}); });
}); });