Move shlink-frontend-kit tests to its own dir

package.json

@@ -7,8 +7,8 @@
   "license": "MIT",
   "scripts": {
     "lint": "npm run lint:css && npm run lint:js",
-    "lint:css": "stylelint src/*.scss src/**/*.scss shlink-web-component/*.scss shlink-web-component/**/*.scss",
-    "lint:js": "eslint --ext .js,.ts,.tsx src shlink-web-component test",
+    "lint:css": "stylelint src/*.scss src/**/*.scss shlink-web-component/*.scss shlink-web-component/**/*.scss shlink-frontend-kit/*.scss shlink-frontend-kit/**/*.scss",
+    "lint:js": "eslint --ext .js,.ts,.tsx src shlink-web-component shlink-frontend-kit test",
     "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js:fix": "npm run lint:js -- --fix",

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

@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
 import type { CardProps } from 'reactstrap';
 import { Card, CardBody, CardHeader } from 'reactstrap';
 
-interface SimpleCardProps extends Omit<CardProps, 'title'> {
+export type SimpleCardProps = Omit<CardProps, 'title'> & {
   title?: ReactNode;
   bodyClassName?: string;
-}
+};
 
 export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
   <Card {...rest}>

shlink-frontend-kit/src/form/BooleanControl.tsx

@@ -10,9 +10,9 @@ export type BooleanControlProps = PropsWithChildren<{
   inline?: boolean;
 }>;
 
-interface BooleanControlWithTypeProps extends BooleanControlProps {
+type BooleanControlWithTypeProps = BooleanControlProps & {
   type: 'switch' | 'checkbox';
-}
+};
 
 export const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange = identity, className, children, type, inline = false },

shlink-frontend-kit/src/form/SearchField.tsx

@@ -7,13 +7,13 @@ import './SearchField.scss';
 const DEFAULT_SEARCH_INTERVAL = 500;
 let timer: NodeJS.Timeout | null;
 
-interface SearchFieldProps {
+type SearchFieldProps = {
   onChange: (value: string) => void;
   className?: string;
   large?: boolean;
   noBorder?: boolean;
   initialValue?: string;
-}
+};
 
 export const SearchField = ({ onChange, className, large = true, noBorder = false, initialValue = '' }: SearchFieldProps) => {
   const [searchTerm, setSearchTerm] = useState(initialValue);

shlink-frontend-kit/src/ordering/OrderingDropdown.tsx

@@ -7,14 +7,14 @@ import type { Order, OrderDir } from './ordering';
 import { determineOrderDir } from './ordering';
 import './OrderingDropdown.scss';
 
-export interface OrderingDropdownProps<T extends string = string> {
+export type OrderingDropdownProps<T extends string = string> = {
   items: Record<T, string>;
   order: Order<T>;
   onChange: (orderField?: T, orderDir?: OrderDir) => void;
   isButton?: boolean;
   right?: boolean;
   prefixed?: boolean;
-}
+};
 
 export function OrderingDropdown<T extends string = string>(
   { items, order, onChange, isButton = true, right = false, prefixed = true }: OrderingDropdownProps<T>,

shlink-frontend-kit/src/ordering/ordering.ts

@@ -1,9 +1,9 @@
 export type OrderDir = 'ASC' | 'DESC' | undefined;
 
-export interface Order<Fields> {
+export type Order<Fields> = {
   field?: Fields;
   dir?: OrderDir;
-}
+};
 
 export const determineOrderDir = <T extends string = string>(
   currentField: T,

shlink-frontend-kit/test/__helpers__/setUpTest.ts

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event/index';
+import type { ReactElement } from 'react';
+
+export const renderWithEvents = (element: ReactElement) => ({
+  user: userEvent.setup(),
+  ...render(element),
+});

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
-import type { MessageProps } from '../../shlink-frontend-kit/src/block/Message';
-import { Message } from '../../shlink-frontend-kit/src/block/Message';
+import type { MessageProps } from '../../src';
+import { Message } from '../../src';
 
 describe('<Message />', () => {
   const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);

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

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import type { ResultProps, ResultType } from '../../shlink-frontend-kit/src/block/Result';
-import { Result } from '../../shlink-frontend-kit/src/block/Result';
+import type { ResultProps, ResultType } from '../../src';
+import { Result } from '../../src';
 
 describe('<Result />', () => {
   const setUp = (props: ResultProps) => render(<Result {...props} />);

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

@@ -1,24 +1,27 @@
 import { render, screen } from '@testing-library/react';
-import { SimpleCard } from '../../shlink-frontend-kit/src/block/SimpleCard';
+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', () => {
-    render(<SimpleCard />);
+    setUp();
     expect(screen.queryByRole('heading')).not.toBeInTheDocument();
   });
 
   it('renders provided title', () => {
-    render(<SimpleCard title="Cool title" />);
+    setUp({ title: 'Cool title' });
     expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
   });
 
   it('renders children inside body', () => {
-    render(<SimpleCard>Hello world</SimpleCard>);
+    setUp({ children: 'Hello world' });
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
   it.each(['primary', 'danger', 'warning'])('passes extra props to nested card', (color) => {
-    const { container } = render(<SimpleCard className="foo" color={color}>Hello world</SimpleCard>);
+    const { container } = setUp({ className: 'foo', color, children: 'Hello world' });
     expect(container.firstChild).toHaveAttribute('class', `foo card bg-${color}`);
   });
 });

shlink-frontend-kit/test/form/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { Checkbox } from '../../shlink-frontend-kit/src/form/Checkbox';
+import { Checkbox } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<Checkbox />', () => {

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

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
-import type { DropdownBtnProps } from '../../shlink-frontend-kit/src/navigation/DropdownBtn';
-import { DropdownBtn } from '../../shlink-frontend-kit/src/navigation/DropdownBtn';
+import type { DropdownBtnProps } from '../../src';
+import { DropdownBtn } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DropdownBtn />', () => {

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import { NavPillItem, NavPills } from '../../shlink-frontend-kit/src/navigation/NavPills';
+import { NavPillItem, NavPills } from '../../src';
 
 describe('<NavPills />', () => {
   let originalError: typeof console.error;

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

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import type { DropdownBtnMenuProps } from '../../shlink-frontend-kit/src/navigation/RowDropdownBtn';
-import { RowDropdownBtn } from '../../shlink-frontend-kit/src/navigation/RowDropdownBtn';
+import type { DropdownBtnMenuProps } from '../../src';
+import { RowDropdownBtn } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<RowDropdownBtn />', () => {

shlink-frontend-kit/test/ordering/OrderingDropdown.test.tsx

@@ -1,8 +1,7 @@
 import { screen } from '@testing-library/react';
 import { values } from 'ramda';
-import type { OrderDir } from '../../shlink-frontend-kit/src/ordering/ordering';
-import type { OrderingDropdownProps } from '../../shlink-frontend-kit/src/ordering/OrderingDropdown';
-import { OrderingDropdown } from '../../shlink-frontend-kit/src/ordering/OrderingDropdown';
+import type { OrderDir, OrderingDropdownProps } from '../../src';
+import { OrderingDropdown } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<OrderingDropdown />', () => {

shlink-frontend-kit/test/ordering/ordering.test.ts

@@ -1,5 +1,5 @@
-import type { OrderDir } from '../../../shlink-frontend-kit/src/ordering/ordering';
-import { determineOrderDir, orderToString, stringToOrder } from '../../../shlink-frontend-kit/src/ordering/ordering';
+import type { OrderDir } from '../../src';
+import { determineOrderDir, orderToString, stringToOrder } from '../../src';
 
 describe('ordering', () => {
   describe('determineOrderDir', () => {

vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
       include: [
         'src/**/*.{ts,tsx}',
         'shlink-web-component/**/*.{ts,tsx}',
+        'shlink-frontend-kit/**/*.{ts,tsx}',
         '!src/*.{ts,tsx}',
         '!src/reducers/index.ts',
         '!src/**/provideServices.ts',