Move shlink-web-component tests to their own folder

shlink-web-component/test/utils/table/TableOrderIcon.test.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import type { OrderDir } from '../../../../shlink-frontend-kit/src/ordering/ordering';
+import { TableOrderIcon } from '../../../src/utils/table/TableOrderIcon';
+
+describe('<TableOrderIcon />', () => {
+  const setUp = (field: string, currentDir?: OrderDir, className?: string) => render(
+    <TableOrderIcon currentOrder={{ dir: currentDir, field: 'foo' }} field={field} className={className} />,
+  );
+
+  it.each([
+    ['foo', undefined],
+    ['bar', 'DESC' as OrderDir],
+    ['bar', 'ASC' as OrderDir],
+  ])('renders empty when not all conditions are met', (field, dir) => {
+    const { container } = setUp(field, dir);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it.each([
+    ['DESC' as OrderDir],
+    ['ASC' as OrderDir],
+  ])('renders an icon when all conditions are met', (dir) => {
+    const { container } = setUp('foo', dir);
+
+    expect(container.firstChild).not.toBeNull();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it.each([
+    [undefined, 'ms-1'],
+    ['foo', 'foo'],
+    ['bar', 'bar'],
+  ])('renders expected classname', (className, expectedClassName) => {
+    const { container } = setUp('foo', 'ASC', className);
+    expect(container.firstChild).toHaveClass(expectedClassName);
+  });
+});

shlink-web-component/test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<TableOrderIcon /> > renders an icon when all conditions are met 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-caret-down ms-1"
+  data-icon="caret-down"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 320 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<TableOrderIcon /> > renders an icon when all conditions are met 2`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-caret-up ms-1"
+  data-icon="caret-up"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 320 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+    fill="currentColor"
+  />
+</svg>
+`;