shlink-web-client/test/visits/VisitsStats.test.tsx

105 lines
4.1 KiB
TypeScript
Raw Normal View History

import { screen, waitFor } from '@testing-library/react';
2023-04-13 23:47:13 +03:00
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
2023-02-18 13:11:01 +03:00
import { Router } from 'react-router-dom';
import type { VisitsInfo } from '../../src/shlink-web-component/visits/reducers/types';
import type { Visit } from '../../src/shlink-web-component/visits/types';
import { VisitsStats } from '../../src/shlink-web-component/visits/VisitsStats';
import { rangeOf } from '../../src/utils/utils';
2023-02-18 13:11:01 +03:00
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<VisitsStats />', () => {
2023-04-13 23:47:13 +03:00
const visits = rangeOf(3, () => fromPartial<Visit>({ date: '2020-01-01' }));
2023-05-27 12:57:26 +03:00
const getVisitsMock = vi.fn();
const exportCsv = vi.fn();
const setUp = (visitsInfo: Partial<VisitsInfo>, activeRoute = '/by-time') => {
const history = createMemoryHistory();
history.push(activeRoute);
return {
history,
...renderWithEvents(
<Router location={history.location} navigator={history}>
<VisitsStats
getVisits={getVisitsMock}
2023-04-13 23:47:13 +03:00
visitsInfo={fromPartial(visitsInfo)}
cancelGetVisits={() => {}}
2023-04-13 23:47:13 +03:00
settings={fromPartial({})}
exportCsv={exportCsv}
/>
</Router>,
),
};
};
it('renders a preloader when visits are loading', () => {
setUp({ loading: true, visits: [] });
expect(screen.getByText('Loading...')).toBeInTheDocument();
expect(screen.queryByText(/^This is going to take a while/)).not.toBeInTheDocument();
});
it('renders a warning and progress bar when loading large amounts of visits', () => {
setUp({ loading: true, loadingLarge: true, visits: [], progress: 25 });
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(screen.getByText(/^This is going to take a while/)).toBeInTheDocument();
expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '25');
});
it('renders an error message when visits could not be loaded', () => {
setUp({ loading: false, error: true, visits: [] });
expect(screen.getByText('An error occurred while loading visits :(')).toBeInTheDocument();
});
it('renders a message when visits are loaded but the list is empty', () => {
setUp({ loading: false, error: false, visits: [] });
expect(screen.getByText('There are no visits matching current filter')).toBeInTheDocument();
});
it.each([
['/by-time', 2],
['/by-context', 4],
['/by-location', 3],
['/list', 1],
])('renders expected amount of charts', (route, expectedCharts) => {
const { container } = setUp({ loading: false, error: false, visits }, route);
expect(container.querySelectorAll('.card')).toHaveLength(expectedCharts);
});
it('holds the map button on cities chart header', () => {
setUp({ loading: false, error: false, visits }, '/by-location');
expect(
screen.getAllByRole('img', { hidden: true }).some((icon) => icon.classList.contains('fa-map-location-dot')),
).toEqual(true);
});
2021-03-14 14:49:12 +03:00
it('exports CSV when export btn is clicked', async () => {
const { user } = setUp({ visits });
2021-03-14 14:49:12 +03:00
expect(exportCsv).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: /Export/ }));
2021-03-14 14:49:12 +03:00
expect(exportCsv).toHaveBeenCalled();
});
it('sets filters in query string', async () => {
const { history, user } = setUp({ visits });
const expectSearchContains = (contains: string[]) => {
expect(contains).not.toHaveLength(0);
contains.forEach((entry) => expect(history.location.search).toContain(entry));
};
expect(history.location.search).toEqual('');
await user.click(screen.getByRole('button', { name: /Filters/ }));
await waitFor(() => screen.getByRole('menu'));
await user.click(screen.getByRole('menuitem', { name: 'Exclude potential bots' }));
expectSearchContains(['excludeBots=true']);
await user.click(screen.getByRole('button', { name: /Last 30 days/ }));
await waitFor(() => screen.getByRole('menu'));
await user.click(screen.getByRole('menuitem', { name: /Last 180 days/ }));
expectSearchContains(['startDate', 'endDate']);
});
});