2022-05-28 13:54:33 +03:00
|
|
|
import { screen } from '@testing-library/react';
|
|
|
|
import userEvent from '@testing-library/user-event';
|
2021-06-24 21:13:06 +03:00
|
|
|
import { formatISO, subDays, subMonths, subYears } from 'date-fns';
|
2020-09-04 19:43:26 +03:00
|
|
|
import { Mock } from 'ts-mockery';
|
2022-05-28 11:34:12 +03:00
|
|
|
import { LineChartCard } from '../../../src/visits/charts/LineChartCard';
|
2023-02-18 12:40:37 +03:00
|
|
|
import type { NormalizedVisit } from '../../../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 />', () => {
|
2022-05-28 13:54:33 +03:00
|
|
|
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', () => {
|
2022-05-28 13:54:33 +03:00
|
|
|
setUp();
|
|
|
|
expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
|
2020-05-30 11:41:46 +03:00
|
|
|
});
|
|
|
|
|
2020-05-31 21:03:59 +03:00
|
|
|
it.each([
|
2022-05-28 13:54:33 +03:00
|
|
|
[[], 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,
|
|
|
|
) => {
|
|
|
|
const { user } = setUp(visits.map((visit) => Mock.of<NormalizedVisit>(visit)));
|
2020-05-30 11:41:46 +03:00
|
|
|
|
2022-05-28 13:54:33 +03:00
|
|
|
await user.click(screen.getByRole('button', { name: /Group by/ }));
|
2020-05-30 11:41:46 +03:00
|
|
|
|
2022-05-28 13:54:33 +03:00
|
|
|
const items = screen.getAllByRole('menuitem');
|
2020-05-30 11:41:46 +03:00
|
|
|
|
2022-05-28 13:54:33 +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([
|
2022-05-28 13:54:33 +03:00
|
|
|
[undefined, undefined],
|
|
|
|
[[], []],
|
|
|
|
[[Mock.of<NormalizedVisit>({ date: '2016-04-01' })], []],
|
|
|
|
[[Mock.of<NormalizedVisit>({ date: '2016-04-01' })], [Mock.of<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
|
|
|
|
2022-05-28 13:54:33 +03:00
|
|
|
expect(events).toBeTruthy();
|
|
|
|
expect(events).toMatchSnapshot();
|
2020-05-30 11:41:46 +03:00
|
|
|
});
|
2020-05-30 18:39:08 +03:00
|
|
|
|
2022-05-28 13:54:33 +03:00
|
|
|
it('includes stats for visits with no dates if selected', async () => {
|
|
|
|
const { getEvents, user } = setUp([
|
2020-09-17 19:05:26 +03:00
|
|
|
Mock.of<NormalizedVisit>({ date: '2016-04-01' }),
|
|
|
|
Mock.of<NormalizedVisit>({ date: '2016-01-01' }),
|
2020-05-30 18:39:08 +03:00
|
|
|
]);
|
|
|
|
|
2022-05-28 13:54:33 +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
|
|
|
});
|