Move shlink-web-component tests to their own folder

shlink-web-component/test/domains/helpers/DomainDropdown.test.tsx

@@ -0,0 +1,84 @@
+import { screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { MemoryRouter } from 'react-router-dom';
+import type { SelectedServer } from '../../../../src/servers/data';
+import type { SemVer } from '../../../../src/utils/helpers/version';
+import type { Domain } from '../../../src/domains/data';
+import { DomainDropdown } from '../../../src/domains/helpers/DomainDropdown';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DomainDropdown />', () => {
+  const editDomainRedirects = vi.fn().mockResolvedValue(undefined);
+  const setUp = (domain?: Domain, selectedServer?: SelectedServer) => renderWithEvents(
+    <MemoryRouter>
+      <DomainDropdown
+        domain={domain ?? fromPartial({})}
+        selectedServer={selectedServer ?? fromPartial({})}
+        editDomainRedirects={editDomainRedirects}
+      />
+    </MemoryRouter>,
+  );
+
+  it('renders expected menu items', () => {
+    setUp();
+
+    expect(screen.queryByText('Visit stats')).not.toBeInTheDocument();
+    expect(screen.getByText('Edit redirects')).toBeInTheDocument();
+  });
+
+  it.each([
+    [true, '_DEFAULT'],
+    [false, ''],
+  ])('points first link to the proper section', (isDefault, expectedLink) => {
+    setUp(
+      fromPartial({ domain: 'foo.com', isDefault }),
+      fromPartial({ version: '3.1.0', id: '123' }),
+    );
+
+    expect(screen.getByText('Visit stats')).toHaveAttribute('href', `/server/123/domain/foo.com${expectedLink}/visits`);
+  });
+
+  it.each([
+    [true, '2.9.0' as SemVer, false],
+    [true, '2.10.0' as SemVer, true],
+    [false, '2.9.0' as SemVer, true],
+  ])('allows editing certain the domains', (isDefault, serverVersion, canBeEdited) => {
+    setUp(
+      fromPartial({ domain: 'foo.com', isDefault }),
+      fromPartial({ version: serverVersion, id: '123' }),
+    );
+
+    if (canBeEdited) {
+      expect(screen.getByText('Edit redirects')).not.toHaveAttribute('disabled');
+    } else {
+      expect(screen.getByText('Edit redirects')).toHaveAttribute('disabled');
+    }
+  });
+
+  it.each([
+    ['foo.com'],
+    ['bar.org'],
+    ['baz.net'],
+  ])('displays modal when editing redirects', async (domain) => {
+    const { user } = setUp(fromPartial({ domain, isDefault: false }));
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByRole('form')).not.toBeInTheDocument();
+    await user.click(screen.getByText('Edit redirects'));
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+
+    expect(editDomainRedirects).not.toHaveBeenCalled();
+    await user.click(screen.getByText('Save'));
+    expect(editDomainRedirects).toHaveBeenCalledWith(expect.objectContaining({ domain }));
+
+    await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
+  });
+
+  it('displays dropdown when clicked', async () => {
+    const { user } = setUp();
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { expanded: false }));
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+  });
+});

shlink-web-component/test/domains/helpers/DomainStatusIcon.test.tsx

@@ -0,0 +1,31 @@
+import { screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { DomainStatus } from '../../../src/domains/data';
+import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<DomainStatusIcon />', () => {
+  const matchMedia = vi.fn().mockReturnValue(fromPartial<MediaQueryList>({ matches: false }));
+  const setUp = (status: DomainStatus) => renderWithEvents(
+    <DomainStatusIcon status={status} matchMedia={matchMedia} />,
+  );
+
+  it.each([
+    ['validating' as DomainStatus],
+    ['invalid' as DomainStatus],
+    ['valid' as DomainStatus],
+  ])('renders expected icon and tooltip when status is not validating', (status) => {
+    const { container } = setUp(status);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it.each([
+    ['invalid' as DomainStatus],
+    ['valid' as DomainStatus],
+  ])('renders proper tooltip based on state', async (status) => {
+    const { container, user } = setUp(status);
+
+    container.firstElementChild && await user.hover(container.firstElementChild);
+    expect(await screen.findByRole('tooltip')).toMatchSnapshot();
+  });
+});

shlink-web-component/test/domains/helpers/EditDomainRedirectsModal.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { ShlinkDomain } from '../../../src/api-contract';
+import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<EditDomainRedirectsModal />', () => {
+  const editDomainRedirects = vi.fn().mockResolvedValue(undefined);
+  const toggle = vi.fn();
+  const domain = fromPartial<ShlinkDomain>({
+    domain: 'foo.com',
+    redirects: {
+      baseUrlRedirect: 'baz',
+    },
+  });
+  const setUp = () => renderWithEvents(
+    <EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
+  );
+
+  it('renders domain in header', () => {
+    setUp();
+    expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');
+  });
+
+  it('has different handlers to toggle the modal', async () => {
+    const { user } = setUp();
+
+    expect(toggle).not.toHaveBeenCalled();
+    await user.click(screen.getByLabelText('Close'));
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(toggle).toHaveBeenCalledTimes(2);
+  });
+
+  it('saves expected values when form is submitted', async () => {
+    const { user } = setUp();
+    // TODO Using fire event because userEvent.click on the Submit button does not submit the form
+    const submitForm = () => fireEvent.submit(screen.getByRole('form'));
+
+    expect(editDomainRedirects).not.toHaveBeenCalled();
+    submitForm();
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith({
+      domain: 'foo.com',
+      redirects: {
+        baseUrlRedirect: 'baz',
+        regular404Redirect: null,
+        invalidShortUrlRedirect: null,
+      },
+    }));
+
+    await user.clear(screen.getByDisplayValue('baz'));
+    await user.type(screen.getAllByPlaceholderText('No redirect')[0], 'new_base_url');
+    await user.type(screen.getAllByPlaceholderText('No redirect')[2], 'new_invalid_short_url');
+    submitForm();
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith({
+      domain: 'foo.com',
+      redirects: {
+        baseUrlRedirect: 'new_base_url',
+        regular404Redirect: null,
+        invalidShortUrlRedirect: 'new_invalid_short_url',
+      },
+    }));
+
+    await user.type(screen.getAllByPlaceholderText('No redirect')[1], 'new_regular_404');
+    await user.clear(screen.getByDisplayValue('new_invalid_short_url'));
+    submitForm();
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith({
+      domain: 'foo.com',
+      redirects: {
+        baseUrlRedirect: 'new_base_url',
+        regular404Redirect: 'new_regular_404',
+        invalidShortUrlRedirect: null,
+      },
+    }));
+
+    await Promise.all(screen.getAllByPlaceholderText('No redirect').map((element) => user.clear(element)));
+    submitForm();
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith({
+      domain: 'foo.com',
+      redirects: {
+        baseUrlRedirect: null,
+        regular404Redirect: null,
+        invalidShortUrlRedirect: null,
+      },
+    }));
+  });
+});

shlink-web-component/test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap

@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-circle-notch fa-spin fa-fw "
+  data-icon="circle-notch"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 2`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-xmark fa-fw text-danger"
+    data-icon="xmark"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 320 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
+      fill="currentColor"
+    />
+  </svg>
+</span>
+`;
+
+exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 3`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-check fa-fw text-muted"
+    data-icon="check"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+      fill="currentColor"
+    />
+  </svg>
+</span>
+`;
+
+exports[`<DomainStatusIcon /> > renders proper tooltip based on state 1`] = `
+<div
+  class="tooltip-inner"
+  role="tooltip"
+>
+  <span>
+    Oops! There is some missing configuration, and short URLs shared with this domain will not work.
+    <br />
+    Check the 
+    <a
+      href="https://slnk.to/multi-domain-docs"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      documentation
+    </a>
+     in order to find out what is missing.
+  </span>
+</div>
+`;
+
+exports[`<DomainStatusIcon /> > renders proper tooltip based on state 2`] = `
+<div
+  class="tooltip-inner"
+  role="tooltip"
+>
+  Congratulations! This domain is properly configured.
+</div>
+`;