Move shlink-web-component tests to their own folder

shlink-web-component/test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx

@@ -0,0 +1,48 @@
+import { screen } from '@testing-library/react';
+import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown';
+import type { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes';
+import { renderWithEvents } from '../../../__helpers__/setUpTest';
+
+describe('<QrErrorCorrectionDropdown />', () => {
+  const initialErrorCorrection: QrErrorCorrection = 'Q';
+  const setErrorCorrection = vi.fn();
+  const setUp = () => renderWithEvents(
+    <QrErrorCorrectionDropdown errorCorrection={initialErrorCorrection} setErrorCorrection={setErrorCorrection} />,
+  );
+
+  it('renders initial state', async () => {
+    const { user } = setUp();
+    const btn = screen.getByRole('button');
+
+    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', 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();
+
+    await clickItem(/ow/);
+    expect(setErrorCorrection).toHaveBeenCalledWith('L');
+
+    await clickItem(/edium/);
+    expect(setErrorCorrection).toHaveBeenCalledWith('M');
+
+    await clickItem(/uartile/);
+    expect(setErrorCorrection).toHaveBeenCalledWith('Q');
+
+    await clickItem(/igh/);
+    expect(setErrorCorrection).toHaveBeenCalledWith('H');
+  });
+});

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

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react';
+import { QrFormatDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrFormatDropdown';
+import type { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes';
+import { renderWithEvents } from '../../../__helpers__/setUpTest';
+
+describe('<QrFormatDropdown />', () => {
+  const initialFormat: QrCodeFormat = 'svg';
+  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');
+  });
+});