shlink-web-client/test/visits/charts/LineChartCard.test.tsx

69 lines
2.7 KiB
TypeScript
Raw Normal View History

import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
2023-04-13 23:47:13 +03:00
import { fromPartial } from '@total-typescript/shoehorn';
import { formatISO, subDays, subMonths, subYears } from 'date-fns';
import { LineChartCard } from '../../../shlink-web-component/src/visits/charts/LineChartCard';
import type { NormalizedVisit } from '../../../shlink-web-component/src/visits/types';
2022-07-10 20:44:49 +03:00
import { setUpCanvas } from '../../__helpers__/setUpTest';
2020-05-30 11:41:46 +03:00
2020-05-30 18:39:08 +03:00
describe('<LineChartCard />', () => {
const setUp = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => ({
user: userEvent.setup(),
...setUpCanvas(<LineChartCard title="Cool title" visits={visits} highlightedVisits={highlightedVisits} />),
});
2020-05-30 11:41:46 +03:00
it('renders provided title', () => {
setUp();
expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
2020-05-30 11:41:46 +03:00
});
it.each([
[[], 0],
[[{ date: formatISO(subDays(new Date(), 1)) }], 3],
[[{ date: formatISO(subDays(new Date(), 3)) }], 2],
[[{ date: formatISO(subMonths(new Date(), 2)) }], 1],
[[{ date: formatISO(subMonths(new Date(), 6)) }], 1],
[[{ date: formatISO(subMonths(new Date(), 7)) }], 0],
[[{ date: formatISO(subYears(new Date(), 1)) }], 0],
])('renders group menu and selects proper grouping item based on visits dates', async (
visits,
expectedActiveIndex,
) => {
2023-04-13 23:47:13 +03:00
const { user } = setUp(visits.map((visit) => fromPartial(visit)));
2020-05-30 11:41:46 +03:00
await user.click(screen.getByRole('button', { name: /Group by/ }));
2020-05-30 11:41:46 +03:00
const items = screen.getAllByRole('menuitem');
2020-05-30 11:41:46 +03:00
expect(items).toHaveLength(4);
expect(items[0]).toHaveTextContent('Month');
expect(items[1]).toHaveTextContent('Week');
expect(items[2]).toHaveTextContent('Day');
expect(items[3]).toHaveTextContent('Hour');
expect(items[expectedActiveIndex]).toHaveAttribute('class', expect.stringContaining('active'));
2020-05-30 11:41:46 +03:00
});
it.each([
[undefined, undefined],
[[], []],
2023-04-13 23:47:13 +03:00
[[fromPartial<NormalizedVisit>({ date: '2016-04-01' })], []],
[[fromPartial<NormalizedVisit>({ date: '2016-04-01' })], [fromPartial<NormalizedVisit>({ date: '2016-04-01' })]],
])('renders chart with expected data', (visits, highlightedVisits) => {
const { events } = setUp(visits, highlightedVisits);
2020-05-30 11:41:46 +03:00
expect(events).toBeTruthy();
expect(events).toMatchSnapshot();
2020-05-30 11:41:46 +03:00
});
2020-05-30 18:39:08 +03:00
it('includes stats for visits with no dates if selected', async () => {
const { getEvents, user } = setUp([
2023-04-13 23:47:13 +03:00
fromPartial({ date: '2016-04-01' }),
fromPartial({ date: '2016-01-01' }),
2020-05-30 18:39:08 +03:00
]);
const eventsBefore = getEvents();
await user.click(screen.getByLabelText('Skip dates with no visits'));
expect(eventsBefore).not.toEqual(getEvents());
2020-05-30 18:39:08 +03:00
});
2020-05-30 11:41:46 +03:00
});