mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated QrErrorCorrectionDropdown test to react testing library
This commit is contained in:
parent
72f790b28c
commit
3201830b27
1 changed files with 27 additions and 21 deletions
|
@ -1,47 +1,53 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { DropdownItem } from 'reactstrap';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes';
|
||||
import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown';
|
||||
|
||||
describe('<QrErrorCorrectionDropdown />', () => {
|
||||
const initialErrorCorrection: QrErrorCorrection = 'Q';
|
||||
const setErrorCorrection = jest.fn();
|
||||
let wrapper: ShallowWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
const setUp = () => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<QrErrorCorrectionDropdown errorCorrection={initialErrorCorrection} setErrorCorrection={setErrorCorrection} />,
|
||||
);
|
||||
),
|
||||
});
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
it('renders initial state', () => {
|
||||
const items = wrapper.find(DropdownItem);
|
||||
it('renders initial state', async () => {
|
||||
const { user } = setUp();
|
||||
const btn = screen.getByRole('button');
|
||||
|
||||
expect(wrapper.prop('text')).toEqual('Error correction (Q)');
|
||||
expect(items.at(0).prop('active')).toEqual(false);
|
||||
expect(items.at(1).prop('active')).toEqual(false);
|
||||
expect(items.at(2).prop('active')).toEqual(true);
|
||||
expect(items.at(3).prop('active')).toEqual(false);
|
||||
expect(btn).toHaveTextContent('Error correction (Q)');
|
||||
await user.click(btn);
|
||||
const items = screen.getAllByRole('menuitem');
|
||||
|
||||
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', () => {
|
||||
const items = wrapper.find(DropdownItem);
|
||||
it('invokes callback when items are clicked', async () => {
|
||||
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();
|
||||
|
||||
items.at(0).simulate('click');
|
||||
await clickItem(/ow/);
|
||||
expect(setErrorCorrection).toHaveBeenCalledWith('L');
|
||||
|
||||
items.at(1).simulate('click');
|
||||
await clickItem(/edium/);
|
||||
expect(setErrorCorrection).toHaveBeenCalledWith('M');
|
||||
|
||||
items.at(2).simulate('click');
|
||||
await clickItem(/uartile/);
|
||||
expect(setErrorCorrection).toHaveBeenCalledWith('Q');
|
||||
|
||||
items.at(3).simulate('click');
|
||||
await clickItem(/igh/);
|
||||
expect(setErrorCorrection).toHaveBeenCalledWith('H');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue