forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-01 13:16:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor and fix main app tests

Browse Source
This commit is contained in:
Alejandro Celaya
2023-08-04 08:56:06 +02:00
parent c794ff8b58
commit c4d7ac272b
29 changed files with 162 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/api/services/ShlinkApiClient.test.ts
View File

@@ -1,8 +1,8 @@
import { fromPartial } from '@total-typescript/shoehorn';
import type { ShlinkDomain, ShlinkVisits, ShlinkVisitsOverview } from '../../../shlink-web-component/src/api-contract';
import { ErrorTypeV2, ErrorTypeV3 } from '../../../shlink-web-component/src/api-contract';
import type { ShortUrl, ShortUrlsOrder } from '../../../shlink-web-component/src/short-urls/data';
import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
import type { ShlinkDomain, ShlinkVisits, ShlinkVisitsOverview } from '../../../src/api/types';
import { ErrorTypeV2, ErrorTypeV3 } from '../../../src/api/types/errors';
import type { HttpClient } from '../../../src/common/services/HttpClient';
import type { OptionalString } from '../../../src/utils/utils';

6
test/app/App.test.tsx
View File

@@ -8,7 +8,7 @@ describe('<App />', () => {
const App = createApp(
() => <>MainHeader</>,
() => <>Home</>,
() => <>MenuLayout</>,
() => <>ShlinkWebComponentContainer</>,
() => <>CreateServer</>,
() => <>EditServer</>,
() => <>SettingsComp</>,
@@ -47,8 +47,8 @@ describe('<App />', () => {
['/server/create', 'CreateServer'],
['/server/abc123/edit', 'EditServer'],
['/server/def456/edit', 'EditServer'],
['/server/abc123/foo', 'MenuLayout'],
['/server/def456/bar', 'MenuLayout'],
['/server/abc123/foo', 'ShlinkWebComponentContainer'],
['/server/def456/bar', 'ShlinkWebComponentContainer'],
['/other', 'Oops! We could not find requested route.'],
])('renders expected route', async (activeRoute, expectedComponent) => {
setUp(activeRoute);

88
test/common/MenuLayout.test.tsx
View File

@@ -1,88 +0,0 @@
import { render, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router, useParams } from 'react-router-dom';
import { MenuLayout as createMenuLayout } from '../../src/common/MenuLayout';
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
import type { SemVer } from '../../src/utils/helpers/version';
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useParams: vi.fn(),
}));
describe('<MenuLayout />', () => {
const MenuLayout = createMenuLayout(
() => <>TagsList</>,
() => <>ShortUrlsList</>,
() => <>CreateShortUrl</>,
() => <>ShortUrlVisits</>,
() => <>TagVisits</>,
() => <>DomainVisits</>,
() => <>OrphanVisits</>,
() => <>NonOrphanVisits</>,
() => <>ServerError</>,
() => <>OverviewRoute</>,
() => <>EditShortUrl</>,
() => <>ManageDomains</>,
);
const setUp = (selectedServer: SelectedServer, currentPath = '/') => {
const history = createMemoryHistory();
history.push(currentPath);
return render(
<Router location={history.location} navigator={history}>
<MenuLayout
sidebarNotPresent={vi.fn()}
sidebarPresent={vi.fn()}
selectServer={vi.fn()}
selectedServer={selectedServer}
/>
</Router>,
);
};
beforeEach(() => {
(useParams as any).mockReturnValue({ serverId: 'abc123' });
});
it('shows loading indicator while loading server', () => {
setUp(null);
expect(screen.getByText('Loading...')).toBeInTheDocument();
expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
});
it.each([
[fromPartial<NotFoundServer>({ serverNotFound: true })],
[fromPartial<NonReachableServer>({ serverNotReachable: true })],
])('shows error for non reachable servers', (selectedServer) => {
setUp(selectedServer);
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(screen.getByText('ServerError')).toBeInTheDocument();
});
it.each([
['3.0.0' as SemVer, '/overview', 'OverviewRoute'],
['3.0.0' as SemVer, '/list-short-urls/1', 'ShortUrlsList'],
['3.0.0' as SemVer, '/create-short-url', 'CreateShortUrl'],
['3.0.0' as SemVer, '/short-code/abc123/visits/foo', 'ShortUrlVisits'],
['3.0.0' as SemVer, '/short-code/abc123/edit', 'EditShortUrl'],
['3.0.0' as SemVer, '/tag/foo/visits/foo', 'TagVisits'],
['3.0.0' as SemVer, '/orphan-visits/foo', 'OrphanVisits'],
['3.0.0' as SemVer, '/manage-tags', 'TagsList'],
['3.0.0' as SemVer, '/not-found', 'Oops! We could not find requested route.'],
['3.0.0' as SemVer, '/domain/domain.com/visits/foo', 'Oops! We could not find requested route.'],
['3.1.0' as SemVer, '/domain/domain.com/visits/foo', 'DomainVisits'],
['2.10.0' as SemVer, '/non-orphan-visits/foo', 'Oops! We could not find requested route.'],
['3.0.0' as SemVer, '/non-orphan-visits/foo', 'NonOrphanVisits'],
['2.8.0' as SemVer, '/manage-domains', 'ManageDomains'],
])(
'renders expected component based on location and server version',
(version, currentPath, expectedContent) => {
setUp(fromPartial({ version }), currentPath);
expect(screen.getByText(expectedContent)).toBeInTheDocument();
},
);
});

82
test/common/ShlinkWebComponentContainer.test.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { render, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { useParams } from 'react-router-dom';
import { ShlinkWebComponentContainer as createContainer } from '../../src/common/ShlinkWebComponentContainer';
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useParams: vi.fn(),
}));
describe('<ShlinkWebComponentContainer />', () => {
const ShlinkWebComponentContainer = createContainer(
vi.fn().mockReturnValue(fromPartial({})),
() => <>ShlinkWebComponent</>,
() => <>ServerError</>,
);
const setUp = (selectedServer: SelectedServer) => render(
<ShlinkWebComponentContainer
sidebarNotPresent={vi.fn()}
sidebarPresent={vi.fn()}
selectServer={vi.fn()}
selectedServer={selectedServer}
settings={{}}
/>,
);
beforeEach(() => {
(useParams as any).mockReturnValue({ serverId: 'abc123' });
});
it('shows loading indicator while loading server', () => {
setUp(null);
expect(screen.getByText('Loading...')).toBeInTheDocument();
expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
expect(screen.queryByText('ShlinkWebComponent')).not.toBeInTheDocument();
});
it.each([
[fromPartial<NotFoundServer>({ serverNotFound: true })],
[fromPartial<NonReachableServer>({ serverNotReachable: true })],
])('shows error for non reachable servers', (selectedServer) => {
setUp(selectedServer);
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(screen.getByText('ServerError')).toBeInTheDocument();
expect(screen.queryByText('ShlinkWebComponent')).not.toBeInTheDocument();
});
it('renders ShlinkWebComponent for reachable servers', () => {
setUp(fromPartial({ version: '3.0.0' }));
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
expect(screen.getByText('ShlinkWebComponent')).toBeInTheDocument();
});
// FIXME Move this case to ShlinkWebComponent test
// it.each([
// ['3.0.0' as SemVer, '/overview', 'OverviewRoute'],
// ['3.0.0' as SemVer, '/list-short-urls/1', 'ShortUrlsList'],
// ['3.0.0' as SemVer, '/create-short-url', 'CreateShortUrl'],
// ['3.0.0' as SemVer, '/short-code/abc123/visits/foo', 'ShortUrlVisits'],
// ['3.0.0' as SemVer, '/short-code/abc123/edit', 'EditShortUrl'],
// ['3.0.0' as SemVer, '/tag/foo/visits/foo', 'TagVisits'],
// ['3.0.0' as SemVer, '/orphan-visits/foo', 'OrphanVisits'],
// ['3.0.0' as SemVer, '/manage-tags', 'TagsList'],
// ['3.0.0' as SemVer, '/not-found', 'Oops! We could not find requested route.'],
// ['3.0.0' as SemVer, '/domain/domain.com/visits/foo', 'Oops! We could not find requested route.'],
// ['3.1.0' as SemVer, '/domain/domain.com/visits/foo', 'DomainVisits'],
// ['2.10.0' as SemVer, '/non-orphan-visits/foo', 'Oops! We could not find requested route.'],
// ['3.0.0' as SemVer, '/non-orphan-visits/foo', 'NonOrphanVisits'],
// ['2.8.0' as SemVer, '/manage-domains', 'ManageDomains'],
// ])(
// 'renders expected component based on location and server version',
// (version, currentPath, expectedContent) => {
// setUp(fromPartial({ version }), currentPath);
// expect(screen.getByText(expectedContent)).toBeInTheDocument();
// },
// );
});

47
test/common/SimplePaginator.test.tsx
View File

@@ -1,47 +0,0 @@
import { render, screen } from '@testing-library/react';
import { SimplePaginator } from '../../shlink-web-component/src/utils/components/SimplePaginator';
import { ELLIPSIS } from '../../shlink-web-component/src/utils/helpers/pagination';
describe('<SimplePaginator />', () => {
const setUp = (pagesCount: number, currentPage = 1) => render(
<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={vi.fn()} />,
);
it.each([-3, -2, 0, 1])('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
const { container } = setUp(pagesCount);
expect(container.firstChild).toBeNull();
});
describe('ELLIPSIS are rendered where expected', () => {
const getItemsForPages = (pagesCount: number, currentPage: number) => {
setUp(pagesCount, currentPage);
const items = screen.getAllByRole('link');
const itemsWithEllipsis = items.filter((item) => item.innerHTML.includes(ELLIPSIS));
return { items, itemsWithEllipsis };
};
it('renders first ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
expect(items[1]).toHaveTextContent(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(1);
});
it('renders last ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(1);
});
it('renders both ELLIPSIS', () => {
const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
expect(items[1]).toHaveTextContent(ELLIPSIS);
expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS);
expect(itemsWithEllipsis).toHaveLength(2);
});
});
});

8
test/servers/ManageServers.test.tsx
View File

@@ -58,11 +58,11 @@ describe('<ManageServers />', () => {
expect(screen.getAllByRole('columnheader')).toHaveLength(expectedCols);
if (server.autoConnect) {
expect(screen.getByText(/\[YES\]/)).toBeInTheDocument();
expect(screen.queryByText(/\[NO\]/)).not.toBeInTheDocument();
expect(screen.getByText(/\[YES]/)).toBeInTheDocument();
expect(screen.queryByText(/\[NO]/)).not.toBeInTheDocument();
} else {
expect(screen.queryByText(/\[YES\]/)).not.toBeInTheDocument();
expect(screen.getByText(/\[NO\]/)).toBeInTheDocument();
expect(screen.queryByText(/\[YES]/)).not.toBeInTheDocument();
expect(screen.getByText(/\[NO]/)).toBeInTheDocument();
}
});

4
test/settings/RealTimeUpdatesSettings.test.tsx
View File

@@ -1,9 +1,7 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions } from '../../shlink-web-component/src';
import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings';
import type {
RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions,
} from '../../src/settings/reducers/settings';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<RealTimeUpdatesSettings />', () => {

2
test/settings/ShortUrlCreationSettings.test.tsx
View File

@@ -1,6 +1,6 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { ShortUrlCreationSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings';
import type { ShortUrlCreationSettings as ShortUrlsSettings } from '../../shlink-web-component/src';
import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
import { renderWithEvents } from '../__helpers__/setUpTest';

2
test/settings/ShortUrlsListSettings.test.tsx
View File

@@ -1,7 +1,7 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { ShortUrlsListSettings as ShortUrlsSettings } from '../../shlink-web-component/src';
import type { ShortUrlsOrder } from '../../shlink-web-component/src/short-urls/data';
import type { ShortUrlsListSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings';
import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
import { renderWithEvents } from '../__helpers__/setUpTest';

2
test/settings/TagsSettings.test.tsx
View File

@@ -1,7 +1,7 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { TagsSettings as TagsSettingsOptions } from '../../shlink-web-component/src';
import type { TagsOrder } from '../../shlink-web-component/src/tags/data/TagsListChildrenProps';
import type { TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
import { TagsSettings } from '../../src/settings/TagsSettings';
import { renderWithEvents } from '../__helpers__/setUpTest';

2
test/settings/UserInterfaceSettings.test.tsx
View File

@@ -1,6 +1,6 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { UiSettings } from '../../src/settings/reducers/settings';
import type { UiSettings } from '../../shlink-web-component/src';
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
import type { Theme } from '../../src/utils/theme';
import { renderWithEvents } from '../__helpers__/setUpTest';

2
test/settings/VisitsSettings.test.tsx
View File

@@ -1,6 +1,6 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { Settings } from '../../src/settings/reducers/settings';
import type { Settings } from '../../shlink-web-component/src';
import { VisitsSettings } from '../../src/settings/VisitsSettings';
import { renderWithEvents } from '../__helpers__/setUpTest';

3
test/utils/helpers/version.test.ts
View File

@@ -1,7 +1,6 @@
import { fromPartial } from '@total-typescript/shoehorn';
import type { SemVer, Versions } from '../../../src/utils/helpers/version';
import type { Empty, SemVer, Versions } from '../../../src/utils/helpers/version';
import { versionMatch } from '../../../src/utils/helpers/version';
import type { Empty } from '../../../src/utils/utils';
describe('version', () => {
describe('versionMatch', () => {