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

78 lines
2.3 KiB
TypeScript
Raw Normal View History

import { screen } from '@testing-library/react';
import { range } from 'ramda';
2023-02-18 13:11:01 +03:00
import type { ReactNode } from 'react';
import { SortableBarChartCard } from '../../../shlink-web-component/visits/charts/SortableBarChartCard';
import type { Stats } from '../../../shlink-web-component/visits/types';
import { rangeOf } from '../../../src/utils/utils';
import { renderWithEvents } from '../../__helpers__/setUpTest';
2019-01-13 01:47:41 +03:00
describe('<SortableBarChartCard />', () => {
2019-01-13 01:47:41 +03:00
const sortingItems = {
name: 'Name',
amount: 'Amount',
};
const stats = {
Foo: 100,
Bar: 50,
};
const setUp = (withPagination = false, extraStats = {}, extra?: (foo?: string[]) => ReactNode) => renderWithEvents(
<SortableBarChartCard
title="Foo"
stats={{ ...stats, ...extraStats }}
sortingItems={sortingItems}
withPagination={withPagination}
extraHeaderContent={extra}
/>,
);
2019-01-13 01:47:41 +03:00
it('renders stats unchanged when no ordering is set', () => {
const { container } = setUp();
2019-01-13 01:47:41 +03:00
expect(container.firstChild).not.toBeNull();
expect(container.firstChild).toMatchSnapshot();
2019-01-13 01:47:41 +03:00
});
it.each([
['Name', 1],
['Amount', 1],
['Name', 2],
['Amount', 2],
])('renders properly ordered stats when ordering is set', async (name, clicks) => {
const { user } = setUp();
2019-01-13 01:47:41 +03:00
await user.click(screen.getByRole('button'));
await Promise.all(rangeOf(clicks, async () => user.click(screen.getByRole('menuitem', { name }))));
2019-01-13 01:47:41 +03:00
expect(screen.getByRole('document')).toMatchSnapshot();
2019-01-13 01:47:41 +03:00
});
it.each([
[0],
[1],
[2],
[3],
])('renders properly paginated stats when pagination is set', async (itemIndex) => {
const { user } = setUp(true, range(1, 159).reduce<Stats>((accum, value) => {
accum[`key_${value}`] = value;
return accum;
}, {}));
await user.click(screen.getAllByRole('button')[1]);
await user.click(screen.getAllByRole('menuitem')[itemIndex]);
expect(screen.getByRole('document')).toMatchSnapshot();
2019-03-10 19:55:02 +03:00
});
it('renders extra header content', () => {
setUp(false, {}, () => (
2019-03-10 19:55:02 +03:00
<span>
<span className="foo-span">Foo in header</span>
<span className="bar-span">Bar in header</span>
</span>
));
2019-01-13 01:47:41 +03:00
expect(screen.getByText('Foo in header')).toHaveClass('foo-span');
expect(screen.getByText('Bar in header')).toHaveClass('bar-span');
2019-01-13 01:47:41 +03:00
});
});