Fix shlink-web-component tests

2026-08-02 17:11:51 +00:00 · 2023-08-04 11:16:01 +02:00
parent bdcfcee60e
commit 4d8477a32c
54 changed files with 345 additions and 431 deletions
--- a/shlink-web-component/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx
@@ -1,7 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
-import type { NotFoundServer, SelectedServer } from '../../../../src/servers/data';
 import type { ShortUrl } from '../../../src/short-urls/data';
 import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn';
 import type { ReportExporter } from '../../../src/utils/services/ReportExporter';
@@ -13,9 +12,9 @@ describe('<ExportShortUrlsBtn />', () => {
  const exportShortUrls = vi.fn();
  const reportExporter = fromPartial<ReportExporter>({ exportShortUrls });
  const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter);
-  const setUp = (amount?: number, selectedServer?: SelectedServer) => renderWithEvents(
+  const setUp = (amount?: number) => renderWithEvents(
    <MemoryRouter>
-      <ExportShortUrlsBtn selectedServer={selectedServer ?? fromPartial({})} amount={amount} />
+      <ExportShortUrlsBtn amount={amount} />
    </MemoryRouter>,
  );

@@ -28,17 +27,6 @@ describe('<ExportShortUrlsBtn />', () => {
    expect(screen.getByText(/Export/)).toHaveTextContent(`Export (${expectedAmount})`);
  });

-  it.each([
-    [null],
-    [fromPartial<NotFoundServer>({})],
-  ])('does nothing on click if selected server is not reachable', async (selectedServer) => {
-    const { user } = setUp(0, selectedServer);
-
-    await user.click(screen.getByRole('button'));
-    expect(listShortUrls).not.toHaveBeenCalled();
-    expect(exportShortUrls).not.toHaveBeenCalled();
-  });
-
  it.each([
    [10, 1],
    [30, 2],
@@ -48,7 +36,7 @@ describe('<ExportShortUrlsBtn />', () => {
    [385, 20],
  ])('loads proper amount of pages based on the amount of results', async (amount, expectedPageLoads) => {
    listShortUrls.mockResolvedValue({ data: [] });
-    const { user } = setUp(amount, fromPartial({ id: '123' }));
+    const { user } = setUp(amount);

    await user.click(screen.getByRole('button'));

@@ -63,7 +51,7 @@ describe('<ExportShortUrlsBtn />', () => {
        tags: [],
      })],
    });
-    const { user } = setUp(undefined, fromPartial({ id: '123' }));
+    const { user } = setUp();

    await user.click(screen.getByRole('button'));

--- a/shlink-web-component/test/short-urls/helpers/QrCodeModal.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/QrCodeModal.test.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import type { SemVer } from '../../../../src/utils/helpers/version';
 import { QrCodeModal as createQrCodeModal } from '../../../src/short-urls/helpers/QrCodeModal';
 import { renderWithEvents } from '../../__helpers__/setUpTest';

@@ -8,11 +7,10 @@ describe('<QrCodeModal />', () => {
  const saveImage = vi.fn().mockReturnValue(Promise.resolve());
  const QrCodeModal = createQrCodeModal(fromPartial({ saveImage }));
  const shortUrl = 'https://s.test/abc123';
-  const setUp = (version: SemVer = '2.8.0') => renderWithEvents(
+  const setUp = () => renderWithEvents(
    <QrCodeModal
      isOpen
      shortUrl={fromPartial({ shortUrl })}
-      selectedServer={fromPartial({ version })}
      toggle={() => {}}
    />,
  );
@@ -63,16 +61,14 @@ describe('<QrCodeModal />', () => {
  });

  it('shows expected components based on server version', () => {
-    const { container } = setUp();
+    setUp();
    const dropdowns = screen.getAllByRole('button');
-    const firstCol = container.parentNode?.querySelectorAll('.d-grid').item(0);

-    expect(dropdowns).toHaveLength(2 + 1); // Add one because of the close button
-    expect(firstCol).toHaveClass('col-md-4');
+    expect(dropdowns).toHaveLength(2 + 2); // Add two because of the close and download buttons
  });

  it('saves the QR code image when clicking the Download button', async () => {
-    const { user } = setUp('2.9.0');
+    const { user } = setUp();

    expect(saveImage).not.toHaveBeenCalled();
    await user.click(screen.getByRole('button', { name: /^Download/ }));
--- a/shlink-web-component/test/short-urls/helpers/ShortUrlDetailLink.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/ShortUrlDetailLink.test.tsx
@@ -1,23 +1,22 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
-import type { NotFoundServer, ReachableServer } from '../../../../src/servers/data';
 import type { ShortUrl } from '../../../src/short-urls/data';
 import type { LinkSuffix } from '../../../src/short-urls/helpers/ShortUrlDetailLink';
 import { ShortUrlDetailLink } from '../../../src/short-urls/helpers/ShortUrlDetailLink';
+import { RoutesPrefixProvider } from '../../../src/utils/routesPrefix';

 describe('<ShortUrlDetailLink />', () => {
  it.each([
-    [undefined, undefined],
-    [null, null],
-    [fromPartial<ReachableServer>({ id: '1' }), null],
-    [fromPartial<ReachableServer>({ id: '1' }), undefined],
-    [fromPartial<NotFoundServer>({}), fromPartial<ShortUrl>({})],
-    [null, fromPartial<ShortUrl>({})],
-    [undefined, fromPartial<ShortUrl>({})],
-  ])('only renders a plain span when either server or short URL are not set', (selectedServer, shortUrl) => {
+    [false, undefined],
+    [false, null],
+    [true, null],
+    [true, undefined],
+    [false, fromPartial<ShortUrl>({})],
+    [false, fromPartial<ShortUrl>({})],
+  ])('only renders a plain span when either server or short URL are not set', (asLink, shortUrl) => {
    render(
-      <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
+      <ShortUrlDetailLink shortUrl={shortUrl} asLink={asLink} suffix="visits">
        Something
      </ShortUrlDetailLink>,
    );
@@ -28,35 +27,37 @@ describe('<ShortUrlDetailLink />', () => {

  it.each([
    [
-      fromPartial<ReachableServer>({ id: '1' }),
+      '/server/1',
      fromPartial<ShortUrl>({ shortCode: 'abc123' }),
      'visits' as LinkSuffix,
      '/server/1/short-code/abc123/visits',
    ],
    [
-      fromPartial<ReachableServer>({ id: '3' }),
+      '/foobar',
      fromPartial<ShortUrl>({ shortCode: 'def456', domain: 'example.com' }),
      'visits' as LinkSuffix,
-      '/server/3/short-code/def456/visits?domain=example.com',
+      '/foobar/short-code/def456/visits?domain=example.com',
    ],
    [
-      fromPartial<ReachableServer>({ id: '1' }),
+      '/server/1',
      fromPartial<ShortUrl>({ shortCode: 'abc123' }),
      'edit' as LinkSuffix,
      '/server/1/short-code/abc123/edit',
    ],
    [
-      fromPartial<ReachableServer>({ id: '3' }),
+      '/server/3',
      fromPartial<ShortUrl>({ shortCode: 'def456', domain: 'example.com' }),
      'edit' as LinkSuffix,
      '/server/3/short-code/def456/edit?domain=example.com',
    ],
-  ])('renders link with expected query when', (selectedServer, shortUrl, suffix, expectedLink) => {
+  ])('renders link with expected query when', (routesPrefix, shortUrl, suffix, expectedLink) => {
    render(
      <MemoryRouter>
-        <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix={suffix}>
-          Something
-        </ShortUrlDetailLink>
+        <RoutesPrefixProvider value={routesPrefix}>
+          <ShortUrlDetailLink shortUrl={shortUrl} suffix={suffix} asLink>
+            Something
+          </ShortUrlDetailLink>
+        </RoutesPrefixProvider>
      </MemoryRouter>,
    );
    expect(screen.getByRole('link')).toHaveProperty('href', expect.stringContaining(expectedLink));
--- a/shlink-web-component/test/short-urls/helpers/ShortUrlStatus.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/ShortUrlStatus.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
-import type { ShlinkVisitsSummary } from '../../../src/api/types';
+import type { ShlinkVisitsSummary } from '../../../src/api-contract';
 import type { ShortUrl, ShortUrlMeta } from '../../../src/short-urls/data';
 import { ShortUrlStatus } from '../../../src/short-urls/helpers/ShortUrlStatus';

--- a/shlink-web-component/test/short-urls/helpers/ShortUrlsRow.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/ShortUrlsRow.test.tsx
@@ -3,18 +3,17 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { addDays, formatISO, subDays } from 'date-fns';
 import { last } from 'ramda';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import type { ReachableServer } from '../../../../src/servers/data';
-import type { TimeoutToggle } from '../../../../src/utils/helpers/hooks';
-import type { OptionalString } from '../../../../src/utils/utils';
 import type { Settings } from '../../../src';
 import type { ShortUrl, ShortUrlMeta } from '../../../src/short-urls/data';
 import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
 import { now, parseDate } from '../../../src/utils/dates/helpers/date';
+import type { TimeoutToggle } from '../../../src/utils/helpers/hooks';
+import { SettingsProvider } from '../../../src/utils/settings';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock';

 interface SetUpOptions {
-  title?: OptionalString;
+  title?: string | null;
  tags?: string[];
  meta?: ShortUrlMeta;
  settings?: Partial<Settings>;
@@ -28,7 +27,6 @@ vi.mock('react-router-dom', async () => ({
 describe('<ShortUrlsRow />', () => {
  const timeoutToggle = vi.fn(() => true);
  const useTimeoutToggle = vi.fn(() => [false, timeoutToggle]) as TimeoutToggle;
-  const server = fromPartial<ReachableServer>({ url: 'https://s.test' });
  const shortUrl: ShortUrl = {
    shortCode: 'abc123',
    shortUrl: 'https://s.test/abc123',
@@ -54,16 +52,16 @@ describe('<ShortUrlsRow />', () => {
    (useLocation as any).mockReturnValue({ search });
    return renderWithEvents(
      <MemoryRouter>
-        <table>
-          <tbody>
-            <ShortUrlsRow
-              selectedServer={server}
-              shortUrl={{ ...shortUrl, title, tags, meta: { ...shortUrl.meta, ...meta } }}
-              onTagClick={() => null}
-              settings={fromPartial(settings)}
-            />
-          </tbody>
-        </table>
+        <SettingsProvider value={fromPartial(settings)}>
+          <table>
+            <tbody>
+              <ShortUrlsRow
+                shortUrl={{ ...shortUrl, title, tags, meta: { ...shortUrl.meta, ...meta } }}
+                onTagClick={() => null}
+              />
+            </tbody>
+          </table>
+        </SettingsProvider>
      </MemoryRouter>,
    );
  };
--- a/shlink-web-component/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx
+++ b/shlink-web-component/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx
@@ -1,21 +1,19 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
-import type { ReachableServer } from '../../../../src/servers/data';
 import type { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlsRowMenu as createShortUrlsRowMenu } from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
 import { renderWithEvents } from '../../__helpers__/setUpTest';

 describe('<ShortUrlsRowMenu />', () => {
  const ShortUrlsRowMenu = createShortUrlsRowMenu(() => <i>DeleteShortUrlModal</i>, () => <i>QrCodeModal</i>);
-  const selectedServer = fromPartial<ReachableServer>({ id: 'abc123' });
  const shortUrl = fromPartial<ShortUrl>({
    shortCode: 'abc123',
    shortUrl: 'https://s.test/abc123',
  });
  const setUp = () => renderWithEvents(
    <MemoryRouter>
-      <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
+      <ShortUrlsRowMenu shortUrl={shortUrl} />
    </MemoryRouter>,
  );