shlink-web-client/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx

39 lines
1.3 KiB
TypeScript
Raw Normal View History

import { screen } from '@testing-library/react';
import { QrFormatDropdown } from '../../../../src/shlink-web-component/short-urls/helpers/qr-codes/QrFormatDropdown';
2023-02-18 13:11:01 +03:00
import type { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes';
2022-07-10 20:44:49 +03:00
import { renderWithEvents } from '../../../__helpers__/setUpTest';
describe('<QrFormatDropdown />', () => {
const initialFormat: QrCodeFormat = 'svg';
2023-05-27 12:57:26 +03:00
const setFormat = vi.fn();
const setUp = () => renderWithEvents(<QrFormatDropdown format={initialFormat} setFormat={setFormat} />);
it('renders initial state', async () => {
const { user } = setUp();
const btn = screen.getByRole('button');
expect(btn).toHaveTextContent('Format (svg');
await user.click(btn);
const items = screen.getAllByRole('menuitem');
expect(items[0]).not.toHaveClass('active');
expect(items[1]).toHaveClass('active');
});
it('invokes callback when items are clicked', async () => {
const { user } = setUp();
const clickItem = async (name: string) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getByRole('menuitem', { name }));
};
expect(setFormat).not.toHaveBeenCalled();
await clickItem('PNG');
expect(setFormat).toHaveBeenCalledWith('png');
await clickItem('SVG');
expect(setFormat).toHaveBeenCalledWith('svg');
});
});