Move shlink-frontend-kit tests to its own dir

shlink-frontend-kit/test/navigation/DropdownBtn.test.tsx

@@ -0,0 +1,47 @@
+import { screen } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import type { DropdownBtnProps } from '../../src';
+import { DropdownBtn } from '../../src';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<DropdownBtn />', () => {
+  const setUp = (props: PropsWithChildren<DropdownBtnProps>) => renderWithEvents(
+    <DropdownBtn children="foo" {...props} />,
+  );
+
+  it.each([['foo'], ['bar'], ['baz']])('displays provided text in button', (text) => {
+    setUp({ text });
+    expect(screen.getByRole('button')).toHaveTextContent(text);
+  });
+
+  it.each([['foo'], ['bar'], ['baz']])('displays provided children in menu', async (children) => {
+    const { user } = setUp({ text: '', children });
+
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toHaveTextContent(children);
+  });
+
+  it.each([
+    [undefined, 'dropdown-btn__toggle btn-block'],
+    ['', 'dropdown-btn__toggle btn-block'],
+    ['foo', 'dropdown-btn__toggle btn-block foo'],
+    ['bar', 'dropdown-btn__toggle btn-block bar'],
+  ])('includes provided classes', (className, expectedClasses) => {
+    setUp({ text: '', className });
+    expect(screen.getByRole('button')).toHaveClass(expectedClasses);
+  });
+
+  it.each([
+    [100, 'min-width: 100px; '],
+    [250, 'min-width: 250px; '],
+    [undefined, ''],
+  ])('renders proper styles when minWidth is provided', async (minWidth, expectedStyle) => {
+    const { user } = setUp({ text: '', minWidth });
+
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toHaveAttribute(
+      'style',
+      `${expectedStyle}position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);`,
+    );
+  });
+});

shlink-frontend-kit/test/navigation/NavPills.test.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { NavPillItem, NavPills } from '../../src';
+
+describe('<NavPills />', () => {
+  let originalError: typeof console.error;
+
+  beforeEach(() => {
+    originalError = console.error;
+    console.error = () => {}; // Suppress errors logged during this test
+  });
+  afterEach(() => {
+    console.error = originalError;
+  });
+
+  it.each([
+    ['Foo'],
+    [<span key="1">Hi!</span>],
+    [[<NavPillItem key="1" to="" />, <span key="2">Hi!</span>]],
+  ])('throws error when any of the children is not a NavPillItem', (children) => {
+    expect.assertions(1);
+    expect(() => render(<NavPills>{children}</NavPills>)).toThrow(
+      'Only NavPillItem children are allowed inside NavPills.',
+    );
+  });
+
+  it.each([
+    [undefined],
+    [true],
+    [false],
+  ])('renders provided items', (fill) => {
+    const { container } = render(
+      <MemoryRouter>
+        <NavPills fill={fill}>
+          <NavPillItem to="1">1</NavPillItem>
+          <NavPillItem to="2">2</NavPillItem>
+          <NavPillItem to="3">3</NavPillItem>
+        </NavPills>
+      </MemoryRouter>,
+    );
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(3);
+    links.forEach((link, index) => {
+      expect(link).toHaveTextContent(`${index + 1}`);
+      expect(link).toHaveAttribute('href', `/${index + 1}`);
+    });
+
+    if (fill) {
+      expect(container.querySelector('.nav')).toHaveClass('nav-fill');
+    } else {
+      expect(container.querySelector('.nav')).not.toHaveClass('nav-fill');
+    }
+  });
+});

shlink-frontend-kit/test/navigation/RowDropdownBtn.test.tsx

@@ -0,0 +1,28 @@
+import { screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { DropdownBtnMenuProps } from '../../src';
+import { RowDropdownBtn } from '../../src';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<RowDropdownBtn />', () => {
+  const setUp = (props: Partial<DropdownBtnMenuProps> = {}) => renderWithEvents(
+    <RowDropdownBtn {...fromPartial<DropdownBtnMenuProps>({ ...props })}>
+      the children
+    </RowDropdownBtn>,
+  );
+
+  it('renders expected components', () => {
+    setUp();
+    const toggle = screen.getByRole('button');
+
+    expect(toggle).toBeInTheDocument();
+    expect(toggle).toHaveClass('btn-sm');
+    expect(toggle).toHaveClass('dropdown-btn__toggle');
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  it('renders expected children', () => {
+    setUp();
+    expect(screen.getByText('the children')).toBeInTheDocument();
+  });
+});