Move shlink-web-component tests to their own folder

shlink-web-component/test/overview/Overview.test.tsx

@@ -0,0 +1,101 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { MemoryRouter } from 'react-router-dom';
+import type { MercureInfo } from '../../src/mercure/reducers/mercureInfo';
+import { Overview as overviewCreator } from '../../src/overview/Overview';
+import { prettify } from '../../src/utils/helpers/numbers';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<Overview />', () => {
+  const ShortUrlsTable = () => <>ShortUrlsTable</>;
+  const CreateShortUrl = () => <>CreateShortUrl</>;
+  const listShortUrls = vi.fn();
+  const listTags = vi.fn();
+  const loadVisitsOverview = vi.fn();
+  const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl);
+  const shortUrls = {
+    pagination: { totalItems: 83710 },
+  };
+  const serverId = '123';
+  const setUp = (loading = false, excludeBots = false) => renderWithEvents(
+    <MemoryRouter>
+      <Overview
+        listShortUrls={listShortUrls}
+        listTags={listTags}
+        loadVisitsOverview={loadVisitsOverview}
+        shortUrlsList={fromPartial({ loading, shortUrls })}
+        tagsList={fromPartial({ loading, tags: ['foo', 'bar', 'baz'] })}
+        visitsOverview={fromPartial({
+          loading,
+          nonOrphanVisits: { total: 3456, bots: 1000, nonBots: 2456 },
+          orphanVisits: { total: 28, bots: 15, nonBots: 13 },
+        })}
+        selectedServer={fromPartial({ id: serverId })}
+        createNewVisits={vi.fn()}
+        loadMercureInfo={vi.fn()}
+        mercureInfo={fromPartial<MercureInfo>({})}
+        settings={fromPartial({ visits: { excludeBots } })}
+      />
+    </MemoryRouter>,
+  );
+
+  it('displays loading messages when still loading', () => {
+    setUp(true);
+    expect(screen.getAllByText('Loading...')).toHaveLength(4);
+  });
+
+  it.each([
+    [false, 3456, 28],
+    [true, 2456, 13],
+  ])('displays amounts in cards after finishing loading', (excludeBots, expectedVisits, expectedOrphanVisits) => {
+    setUp(false, excludeBots);
+
+    const headingElements = screen.getAllByRole('heading');
+
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    expect(headingElements[0]).toHaveTextContent('Visits');
+    expect(headingElements[1]).toHaveTextContent(prettify(expectedVisits));
+    expect(headingElements[2]).toHaveTextContent('Orphan visits');
+    expect(headingElements[3]).toHaveTextContent(prettify(expectedOrphanVisits));
+    expect(headingElements[4]).toHaveTextContent('Short URLs');
+    expect(headingElements[5]).toHaveTextContent(prettify(83710));
+    expect(headingElements[6]).toHaveTextContent('Tags');
+    expect(headingElements[7]).toHaveTextContent(prettify(3));
+  });
+
+  it('nests injected components', () => {
+    setUp();
+
+    expect(screen.queryByText('ShortUrlsTable')).toBeInTheDocument();
+    expect(screen.queryByText('CreateShortUrl')).toBeInTheDocument();
+  });
+
+  it('displays links to other sections', () => {
+    setUp();
+
+    const links = screen.getAllByRole('link');
+
+    expect(links).toHaveLength(5);
+    expect(links[0]).toHaveAttribute('href', `/server/${serverId}/orphan-visits`);
+    expect(links[1]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
+    expect(links[2]).toHaveAttribute('href', `/server/${serverId}/manage-tags`);
+    expect(links[3]).toHaveAttribute('href', `/server/${serverId}/create-short-url`);
+    expect(links[4]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
+  });
+
+  it.each([
+    [true],
+    [false],
+  ])('displays amounts of bots when hovering visits cards', async (excludeBots) => {
+    const { user } = setUp(false, excludeBots);
+    const expectTooltipToBeInTheDocument = async (tooltip: string) => waitFor(
+      () => expect(screen.getByText(/potential bot visits$/)).toHaveTextContent(tooltip),
+    );
+
+    await user.hover(screen.getByText(/^Visits/));
+    await expectTooltipToBeInTheDocument(`${excludeBots ? 'Plus' : 'Including'} 1,000 potential bot visits`);
+
+    await user.hover(screen.getByText(/^Orphan visits/));
+    await expectTooltipToBeInTheDocument(`${excludeBots ? 'Plus' : 'Including'} 15 potential bot visits`);
+  });
+});

shlink-web-component/test/overview/helpers/HighlightCard.test.tsx

@@ -0,0 +1,60 @@
+import { screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import type { HighlightCardProps } from '../../../src/overview/helpers/HighlightCard';
+import { HighlightCard } from '../../../src/overview/helpers/HighlightCard';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<HighlightCard />', () => {
+  const setUp = (props: HighlightCardProps & { children?: ReactNode }) => renderWithEvents(
+    <MemoryRouter>
+      <HighlightCard {...props} />
+    </MemoryRouter>,
+  );
+
+  it.each([
+    [undefined],
+    [''],
+  ])('does not render icon when there is no link', (link) => {
+    setUp({ title: 'foo', link });
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ['foo'],
+    ['bar'],
+    ['baz'],
+  ])('renders provided title', (title) => {
+    setUp({ title });
+    expect(screen.getByText(title)).toHaveClass('highlight-card__title');
+  });
+
+  it.each([
+    ['foo'],
+    ['bar'],
+    ['baz'],
+  ])('renders provided children', (children) => {
+    setUp({ title: 'title', children });
+    expect(screen.getByText(children)).toHaveClass('card-text');
+  });
+
+  it.each([
+    ['foo'],
+    ['bar'],
+    ['baz'],
+  ])('adds extra props when a link is provided', (link) => {
+    setUp({ title: 'title', link });
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`);
+  });
+
+  it('renders tooltip when provided', async () => {
+    const { user } = setUp({ title: 'title', children: 'Foo', tooltip: 'This is the tooltip' });
+
+    await user.hover(screen.getByText('Foo'));
+    await waitFor(() => expect(screen.getByText('This is the tooltip')).toBeInTheDocument());
+  });
+});

shlink-web-component/test/overview/helpers/VisitsHighlightCard.test.tsx

@@ -0,0 +1,67 @@
+import { screen, waitFor } from '@testing-library/react';
+import type { VisitsHighlightCardProps } from '../../../src/overview/helpers/VisitsHighlightCard';
+import { VisitsHighlightCard } from '../../../src/overview/helpers/VisitsHighlightCard';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<VisitsHighlightCard />', () => {
+  const setUp = (props: Partial<VisitsHighlightCardProps> = {}) => renderWithEvents(
+    <VisitsHighlightCard
+      loading={false}
+      visitsSummary={{ total: 0 }}
+      excludeBots={false}
+      title=""
+      link=""
+      {...props}
+    />,
+  );
+
+  it.each([
+    [true, () => expect(screen.getByText('Loading...')).toBeInTheDocument()],
+    [false, () => expect(screen.queryByText('Loading...')).not.toBeInTheDocument()],
+  ])('displays loading message on loading', (loading, assert) => {
+    setUp({ loading });
+    assert();
+  });
+
+  it('does not render tooltip when summary has no bots', async () => {
+    const { user } = setUp({ title: 'Foo' });
+
+    await user.hover(screen.getByText('Foo'));
+    await waitFor(() => expect(screen.queryByText(/potential bot visits$/)).not.toBeInTheDocument());
+  });
+
+  it('renders tooltip when summary has bots', async () => {
+    const { user } = setUp({
+      title: 'Foo',
+      visitsSummary: { total: 50, bots: 30 },
+    });
+
+    await user.hover(screen.getByText('Foo'));
+    await waitFor(() => expect(screen.getByText(/potential bot visits$/)).toBeInTheDocument());
+  });
+
+  it.each([
+    [true, 20, () => {
+      expect(screen.getByText('20')).toBeInTheDocument();
+      expect(screen.queryByText('50')).not.toBeInTheDocument();
+    }],
+    [true, undefined, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+    [false, 20, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+    [false, undefined, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+  ])('displays non-bots when present and bots are excluded', (excludeBots, nonBots, assert) => {
+    setUp({
+      excludeBots,
+      visitsSummary: { total: 50, nonBots },
+    });
+    assert();
+  });
+});