Move shlink-web-component tests to their own folder

shlink-web-component/test/domains/DomainRow.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { ShlinkDomainRedirects } from '../../src/api/types';
+import type { Domain } from '../../src/domains/data';
+import { DomainRow } from '../../src/domains/DomainRow';
+
+describe('<DomainRow />', () => {
+  const redirectsCombinations = [
+    [fromPartial<ShlinkDomainRedirects>({ baseUrlRedirect: 'foo' })],
+    [fromPartial<ShlinkDomainRedirects>({ invalidShortUrlRedirect: 'bar' })],
+    [fromPartial<ShlinkDomainRedirects>({ baseUrlRedirect: 'baz', regular404Redirect: 'foo' })],
+    [
+      fromPartial<ShlinkDomainRedirects>(
+        { baseUrlRedirect: 'baz', regular404Redirect: 'bar', invalidShortUrlRedirect: 'foo' },
+      ),
+    ],
+  ];
+  const setUp = (domain: Domain, defaultRedirects?: ShlinkDomainRedirects) => render(
+    <table>
+      <tbody>
+        <DomainRow
+          domain={domain}
+          defaultRedirects={defaultRedirects}
+          selectedServer={fromPartial({})}
+          editDomainRedirects={vi.fn()}
+          checkDomainHealth={vi.fn()}
+        />
+      </tbody>
+    </table>,
+  );
+
+  it.each(redirectsCombinations)('shows expected redirects', (redirects) => {
+    setUp(fromPartial({ domain: '', isDefault: true, redirects }));
+    const cells = screen.getAllByRole('cell');
+
+    redirects?.baseUrlRedirect && expect(cells[1]).toHaveTextContent(redirects.baseUrlRedirect);
+    redirects?.regular404Redirect && expect(cells[2]).toHaveTextContent(redirects.regular404Redirect);
+    redirects?.invalidShortUrlRedirect && expect(cells[3]).toHaveTextContent(redirects.invalidShortUrlRedirect);
+    expect(screen.queryByText('(as fallback)')).not.toBeInTheDocument();
+  });
+
+  it.each([
+    [undefined],
+    [fromPartial<ShlinkDomainRedirects>({})],
+  ])('shows expected "no redirects"', (redirects) => {
+    setUp(fromPartial({ domain: '', isDefault: true, redirects }));
+    const cells = screen.getAllByRole('cell');
+
+    expect(cells[1]).toHaveTextContent('No redirect');
+    expect(cells[2]).toHaveTextContent('No redirect');
+    expect(cells[3]).toHaveTextContent('No redirect');
+    expect(screen.queryByText('(as fallback)')).not.toBeInTheDocument();
+  });
+
+  it.each(redirectsCombinations)('shows expected fallback redirects', (fallbackRedirects) => {
+    setUp(fromPartial({ domain: '', isDefault: true }), fallbackRedirects);
+    const cells = screen.getAllByRole('cell');
+
+    fallbackRedirects?.baseUrlRedirect && expect(cells[1]).toHaveTextContent(
+      `${fallbackRedirects.baseUrlRedirect} (as fallback)`,
+    );
+    fallbackRedirects?.regular404Redirect && expect(cells[2]).toHaveTextContent(
+      `${fallbackRedirects.regular404Redirect} (as fallback)`,
+    );
+    fallbackRedirects?.invalidShortUrlRedirect && expect(cells[3]).toHaveTextContent(
+      `${fallbackRedirects.invalidShortUrlRedirect} (as fallback)`,
+    );
+  });
+
+  it.each([[true], [false]])('shows icon on default domain only', (isDefault) => {
+    const { container } = setUp(fromPartial({ domain: '', isDefault }));
+
+    if (isDefault) {
+      expect(container.querySelector('#defaultDomainIcon')).toBeInTheDocument();
+    } else {
+      expect(container.querySelector('#defaultDomainIcon')).not.toBeInTheDocument();
+    }
+  });
+});

shlink-web-component/test/domains/DomainSelector.test.tsx

@@ -0,0 +1,66 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DomainSelector } from '../../src/domains/DomainSelector';
+import type { DomainsList } from '../../src/domains/reducers/domainsList';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<DomainSelector />', () => {
+  const domainsList = fromPartial<DomainsList>({
+    domains: [
+      fromPartial({ domain: 'default.com', isDefault: true }),
+      fromPartial({ domain: 'foo.com' }),
+      fromPartial({ domain: 'bar.com' }),
+    ],
+  });
+  const setUp = (value = '') => renderWithEvents(
+    <DomainSelector value={value} domainsList={domainsList} listDomains={vi.fn()} onChange={vi.fn()} />,
+  );
+
+  it.each([
+    ['', 'Domain', 'domains-dropdown__toggle-btn'],
+    ['my-domain.com', 'Domain: my-domain.com', 'domains-dropdown__toggle-btn--active'],
+  ])('shows dropdown by default', async (value, expectedText, expectedClassName) => {
+    const { user } = setUp(value);
+    const btn = screen.getByRole('button', { name: expectedText });
+
+    expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
+    expect(btn).toHaveClass(
+      `dropdown-btn__toggle ${expectedClassName} btn-block dropdown-btn__toggle--with-caret dropdown-toggle btn btn-primary`,
+    );
+    await user.click(btn);
+
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
+    expect(screen.getAllByRole('menuitem')).toHaveLength(4);
+  });
+
+  it('allows toggling between dropdown and input', async () => {
+    const { user } = setUp();
+
+    expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Domain' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Domain' }));
+    await user.click(await screen.findByText('New domain'));
+
+    expect(screen.getByPlaceholderText('Domain')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Domain' })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Back to domains list' }));
+
+    expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Domain' })).toBeInTheDocument();
+  });
+
+  it.each([
+    [0, 'default.comdefault'],
+    [1, 'foo.com'],
+    [2, 'bar.com'],
+  ])('shows expected content on every item', async (index, expectedContent) => {
+    const { user } = setUp();
+
+    await user.click(screen.getByRole('button', { name: 'Domain' }));
+    const items = await screen.findAllByRole('menuitem');
+
+    expect(items[index]).toHaveTextContent(expectedContent);
+  });
+});

shlink-web-component/test/domains/ManageDomains.test.tsx

@@ -0,0 +1,67 @@
+import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { ProblemDetailsError, ShlinkDomain } from '../../src/api-contract';
+import { ManageDomains } from '../../src/domains/ManageDomains';
+import type { DomainsList } from '../../src/domains/reducers/domainsList';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<ManageDomains />', () => {
+  const listDomains = vi.fn();
+  const filterDomains = vi.fn();
+  const setUp = (domainsList: DomainsList) => renderWithEvents(
+    <ManageDomains
+      listDomains={listDomains}
+      filterDomains={filterDomains}
+      editDomainRedirects={vi.fn()}
+      checkDomainHealth={vi.fn()}
+      domainsList={domainsList}
+    />,
+  );
+
+  it('shows loading message while domains are loading', () => {
+    setUp(fromPartial({ loading: true, filteredDomains: [] }));
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.queryByText('Error loading domains :(')).not.toBeInTheDocument();
+  });
+
+  it.each([
+    [undefined, 'Error loading domains :('],
+    [fromPartial<ProblemDetailsError>({}), 'Error loading domains :('],
+    [fromPartial<ProblemDetailsError>({ detail: 'Foo error!!' }), 'Foo error!!'],
+  ])('shows error result when domains loading fails', (errorData, expectedErrorMessage) => {
+    setUp(fromPartial({ loading: false, error: true, errorData, filteredDomains: [] }));
+
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    expect(screen.getByText(expectedErrorMessage)).toBeInTheDocument();
+  });
+
+  it('filters domains when SearchField changes', async () => {
+    const { user } = setUp(fromPartial({ loading: false, error: false, filteredDomains: [] }));
+
+    expect(filterDomains).not.toHaveBeenCalled();
+    await user.type(screen.getByPlaceholderText('Search...'), 'Foo');
+    await waitFor(() => expect(filterDomains).toHaveBeenCalledWith('Foo'));
+  });
+
+  it('shows expected headers and one row when list of domains is empty', () => {
+    setUp(fromPartial({ loading: false, error: false, filteredDomains: [] }));
+
+    expect(screen.getAllByRole('columnheader')).toHaveLength(7);
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+
+  it('has many rows if multiple domains are provided', () => {
+    const filteredDomains: ShlinkDomain[] = [
+      fromPartial({ domain: 'foo' }),
+      fromPartial({ domain: 'bar' }),
+      fromPartial({ domain: 'baz' }),
+    ];
+    setUp(fromPartial({ loading: false, error: false, filteredDomains }));
+
+    expect(screen.getAllByRole('row')).toHaveLength(filteredDomains.length + 1);
+    expect(screen.getByText('foo')).toBeInTheDocument();
+    expect(screen.getByText('bar')).toBeInTheDocument();
+    expect(screen.getByText('baz')).toBeInTheDocument();
+  });
+});

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>
+`;

shlink-web-component/test/domains/reducers/domainRedirects.test.ts

@@ -0,0 +1,28 @@
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { ShlinkApiClient } from '../../../../src/api/services/ShlinkApiClient';
+import type { ShlinkDomainRedirects } from '../../../src/api/types';
+import { editDomainRedirects } from '../../../src/domains/reducers/domainRedirects';
+
+describe('domainRedirectsReducer', () => {
+  describe('editDomainRedirects', () => {
+    const domain = 'example.com';
+    const redirects = fromPartial<ShlinkDomainRedirects>({});
+    const dispatch = vi.fn();
+    const getState = vi.fn();
+    const editDomainRedirectsCall = vi.fn();
+    const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ editDomainRedirects: editDomainRedirectsCall });
+    const editDomainRedirectsAction = editDomainRedirects(buildShlinkApiClient);
+
+    it('dispatches domain and redirects once loaded', async () => {
+      editDomainRedirectsCall.mockResolvedValue(redirects);
+
+      await editDomainRedirectsAction(fromPartial({ domain }))(dispatch, getState, {});
+
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({
+        payload: { domain, redirects },
+      }));
+      expect(editDomainRedirectsCall).toHaveBeenCalledTimes(1);
+    });
+  });
+});

shlink-web-component/test/domains/reducers/domainsList.test.ts

@@ -0,0 +1,175 @@
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { ShlinkApiClient } from '../../../../src/api/services/ShlinkApiClient';
+import type { ShlinkState } from '../../../../src/container/types';
+import type { ShlinkDomainRedirects } from '../../../src/api/types';
+import { parseApiError } from '../../../src/api/utils';
+import type { Domain } from '../../../src/domains/data';
+import type { EditDomainRedirects } from '../../../src/domains/reducers/domainRedirects';
+import { editDomainRedirects } from '../../../src/domains/reducers/domainRedirects';
+import {
+  domainsListReducerCreator,
+  replaceRedirectsOnDomain,
+  replaceStatusOnDomain,
+} from '../../../src/domains/reducers/domainsList';
+
+describe('domainsListReducer', () => {
+  const dispatch = vi.fn();
+  const getState = vi.fn();
+  const listDomains = vi.fn();
+  const health = vi.fn();
+  const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ listDomains, health });
+  const filteredDomains: Domain[] = [
+    fromPartial({ domain: 'foo', status: 'validating' }),
+    fromPartial({ domain: 'Boo', status: 'validating' }),
+  ];
+  const domains: Domain[] = [...filteredDomains, fromPartial({ domain: 'bar', status: 'validating' })];
+  const error = { type: 'NOT_FOUND', status: 404 } as unknown as Error;
+  const editDomainRedirectsThunk = editDomainRedirects(buildShlinkApiClient);
+  const { reducer, listDomains: listDomainsAction, checkDomainHealth, filterDomains } = domainsListReducerCreator(
+    buildShlinkApiClient,
+    editDomainRedirectsThunk,
+  );
+
+  describe('reducer', () => {
+    it('returns loading on LIST_DOMAINS_START', () => {
+      expect(reducer(undefined, listDomainsAction.pending(''))).toEqual(
+        { domains: [], filteredDomains: [], loading: true, error: false },
+      );
+    });
+
+    it('returns error on LIST_DOMAINS_ERROR', () => {
+      expect(reducer(undefined, listDomainsAction.rejected(error, ''))).toEqual(
+        { domains: [], filteredDomains: [], loading: false, error: true, errorData: parseApiError(error) },
+      );
+    });
+
+    it('returns domains on LIST_DOMAINS', () => {
+      expect(
+        reducer(undefined, listDomainsAction.fulfilled({ domains }, '')),
+      ).toEqual({ domains, filteredDomains: domains, loading: false, error: false });
+    });
+
+    it('filters domains on FILTER_DOMAINS', () => {
+      expect(reducer(fromPartial({ domains }), filterDomains('oO'))).toEqual({ domains, filteredDomains });
+    });
+
+    it.each([
+      ['foo'],
+      ['bar'],
+      ['does_not_exist'],
+    ])('replaces redirects on proper domain on EDIT_DOMAIN_REDIRECTS', (domain) => {
+      const redirects: ShlinkDomainRedirects = {
+        baseUrlRedirect: 'bar',
+        regular404Redirect: 'foo',
+        invalidShortUrlRedirect: null,
+      };
+      const editDomainRedirects: EditDomainRedirects = { domain, redirects };
+
+      expect(reducer(
+        fromPartial({ domains, filteredDomains }),
+        editDomainRedirectsThunk.fulfilled(editDomainRedirects, '', editDomainRedirects),
+      )).toEqual({
+        domains: domains.map(replaceRedirectsOnDomain(editDomainRedirects)),
+        filteredDomains: filteredDomains.map(replaceRedirectsOnDomain(editDomainRedirects)),
+      });
+    });
+
+    it.each([
+      ['foo'],
+      ['bar'],
+      ['does_not_exist'],
+    ])('replaces status on proper domain on VALIDATE_DOMAIN', (domain) => {
+      expect(reducer(
+        fromPartial({ domains, filteredDomains }),
+        checkDomainHealth.fulfilled({ domain, status: 'valid' }, '', ''),
+      )).toEqual({
+        domains: domains.map(replaceStatusOnDomain(domain, 'valid')),
+        filteredDomains: filteredDomains.map(replaceStatusOnDomain(domain, 'valid')),
+      });
+    });
+  });
+
+  describe('listDomains', () => {
+    it('dispatches domains once loaded', async () => {
+      listDomains.mockResolvedValue({ data: domains });
+
+      await listDomainsAction()(dispatch, getState, {});
+
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({
+        payload: { domains },
+      }));
+      expect(listDomains).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('filterDomains', () => {
+    it.each([
+      ['foo'],
+      ['bar'],
+      ['something'],
+    ])('creates action as expected', (searchTerm) => {
+      expect(filterDomains(searchTerm).payload).toEqual(searchTerm);
+    });
+  });
+
+  describe('checkDomainHealth', () => {
+    const domain = 'example.com';
+
+    it('dispatches invalid status when selected server does not have all required data', async () => {
+      getState.mockReturnValue(fromPartial<ShlinkState>({
+        selectedServer: {},
+      }));
+
+      await checkDomainHealth(domain)(dispatch, getState, {});
+
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(health).not.toHaveBeenCalled();
+      expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({
+        payload: { domain, status: 'invalid' },
+      }));
+    });
+
+    it('dispatches invalid status when health endpoint returns an error', async () => {
+      getState.mockReturnValue(fromPartial<ShlinkState>({
+        selectedServer: {
+          url: 'https://myerver.com',
+          apiKey: '123',
+        },
+      }));
+      health.mockRejectedValue({});
+
+      await checkDomainHealth(domain)(dispatch, getState, {});
+
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(health).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({
+        payload: { domain, status: 'invalid' },
+      }));
+    });
+
+    it.each([
+      ['pass', 'valid'],
+      ['fail', 'invalid'],
+    ])('dispatches proper status based on status returned from health endpoint', async (
+      healthStatus,
+      expectedStatus,
+    ) => {
+      getState.mockReturnValue(fromPartial<ShlinkState>({
+        selectedServer: {
+          url: 'https://myerver.com',
+          apiKey: '123',
+        },
+      }));
+      health.mockResolvedValue({ status: healthStatus });
+
+      await checkDomainHealth(domain)(dispatch, getState, {});
+
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(health).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({
+        payload: { domain, status: expectedStatus },
+      }));
+    });
+  });
+});