Move shlink-frontend-kit tests to its own dir

shlink-frontend-kit/test/block/Message.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import type { MessageProps } from '../../src';
+import { Message } from '../../src';
+
+describe('<Message />', () => {
+  const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);
+
+  it.each([
+    [true, 'col-md-12'],
+    [false, 'col-md-10 offset-md-1'],
+    [undefined, 'col-md-10 offset-md-1'],
+  ])('renders expected classes based on width', (fullWidth, expectedClass) => {
+    const { container } = setUp({ fullWidth });
+    expect(container.firstChild?.firstChild).toHaveClass(expectedClass);
+  });
+
+  it.each([
+    [true, 'These are the children contents'],
+    [false, 'These are the children contents'],
+    [true, undefined],
+    [false, undefined],
+  ])('renders expected content', (loading, children) => {
+    setUp({ loading, children });
+
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(loading ? 1 : 0);
+
+    if (loading) {
+      expect(screen.getByText(children || 'Loading...')).toHaveClass('ms-2');
+    } else {
+      expect(screen.getByRole('heading')).toHaveTextContent(children || '');
+    }
+  });
+
+  it.each([
+    ['error', 'border-danger', 'text-danger'],
+    ['default', '', 'text-muted'],
+    [undefined, '', 'text-muted'],
+  ])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => {
+    const { container } = setUp({ type: type as 'default' | 'error' | undefined });
+
+    expect(container.querySelector('.card-body')).toHaveAttribute('class', expect.stringContaining(expectedCardClass));
+    expect(screen.getByRole('heading')).toHaveClass(`text-center mb-0 ${expectedH3Class}`);
+  });
+
+  it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
+    const { container } = setUp({ className });
+    expect(container.firstChild).toHaveClass(`g-0${className ? ` ${className}` : ''}`);
+  });
+});

shlink-frontend-kit/test/block/Result.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import type { ResultProps, ResultType } from '../../src';
+import { Result } from '../../src';
+
+describe('<Result />', () => {
+  const setUp = (props: ResultProps) => render(<Result {...props} />);
+
+  it.each([
+    ['success' as ResultType, 'bg-main text-white'],
+    ['error' as ResultType, 'bg-danger text-white'],
+    ['warning' as ResultType, 'bg-warning'],
+  ])('renders expected classes based on type', (type, expectedClasses) => {
+    setUp({ type });
+    expect(screen.getByRole('document')).toHaveClass(expectedClasses);
+  });
+
+  it.each([
+    ['foo'],
+    ['bar'],
+  ])('renders provided classes in root element', (className) => {
+    const { container } = setUp({ type: 'success', className });
+    expect(container.firstChild).toHaveClass(className);
+  });
+
+  it.each([{ small: true }, { small: false }])('renders small results properly', ({ small }) => {
+    const { container } = setUp({ type: 'success', small });
+    const bigElement = container.querySelectorAll('.col-md-10');
+    const smallElement = container.querySelectorAll('.col-12');
+
+    expect(bigElement).toHaveLength(small ? 0 : 1);
+    expect(smallElement).toHaveLength(small ? 1 : 0);
+  });
+});

shlink-frontend-kit/test/block/SimpleCard.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import type { SimpleCardProps } from '../../src';
+import { SimpleCard } from '../../src';
+
+const setUp = ({ children, ...rest }: SimpleCardProps = {}) => render(<SimpleCard {...rest}>{children}</SimpleCard>);
+
+describe('<SimpleCard />', () => {
+  it('does not render title if not provided', () => {
+    setUp();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('renders provided title', () => {
+    setUp({ title: 'Cool title' });
+    expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
+  });
+
+  it('renders children inside body', () => {
+    setUp({ children: 'Hello world' });
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it.each(['primary', 'danger', 'warning'])('passes extra props to nested card', (color) => {
+    const { container } = setUp({ className: 'foo', color, children: 'Hello world' });
+    expect(container.firstChild).toHaveAttribute('class', `foo card bg-${color}`);
+  });
+});