2022-05-28 13:33:50 +03:00
|
|
|
import { render, screen } from '@testing-library/react';
|
2023-04-13 23:47:13 +03:00
|
|
|
import { fromPartial } from '@total-typescript/shoehorn';
|
2023-02-18 12:40:37 +03:00
|
|
|
import type { Chart, ChartDataset } from 'chart.js';
|
2023-07-16 09:47:10 +03:00
|
|
|
import { DoughnutChartLegend } from '../../../src/shlink-web-component/visits/charts/DoughnutChartLegend';
|
2021-09-18 13:59:54 +03:00
|
|
|
|
2021-09-18 20:05:28 +03:00
|
|
|
describe('<DoughnutChartLegend />', () => {
|
2022-03-26 14:17:42 +03:00
|
|
|
const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2'];
|
2022-05-28 13:33:50 +03:00
|
|
|
const colors = ['green', 'blue', 'yellow'];
|
2021-09-18 13:59:54 +03:00
|
|
|
const defaultColor = 'red';
|
2023-04-13 23:47:13 +03:00
|
|
|
const datasets = [fromPartial<ChartDataset>({ backgroundColor: colors })];
|
|
|
|
const chart = fromPartial<Chart>({
|
2021-09-18 13:59:54 +03:00
|
|
|
config: {
|
|
|
|
data: { labels, datasets },
|
|
|
|
options: { defaultColor } as any,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-09-20 23:00:34 +03:00
|
|
|
it('renders the expected amount of items with expected colors and labels', () => {
|
2022-05-28 13:33:50 +03:00
|
|
|
render(<DoughnutChartLegend chart={chart} />);
|
|
|
|
|
|
|
|
const items = screen.getAllByRole('listitem');
|
2021-09-18 13:59:54 +03:00
|
|
|
|
|
|
|
expect.assertions(labels.length * 2 + 1);
|
|
|
|
expect(items).toHaveLength(labels.length);
|
2022-05-28 13:33:50 +03:00
|
|
|
|
2021-09-18 13:59:54 +03:00
|
|
|
labels.forEach((label, index) => {
|
2022-05-28 13:33:50 +03:00
|
|
|
const item = items[index];
|
2021-09-18 13:59:54 +03:00
|
|
|
|
2022-05-28 13:33:50 +03:00
|
|
|
expect(item.querySelector('.doughnut-chart-legend__item-color')).toHaveAttribute(
|
|
|
|
'style',
|
|
|
|
`background-color: ${colors[index] ?? defaultColor};`,
|
|
|
|
);
|
|
|
|
expect(item.querySelector('.doughnut-chart-legend__item-text')).toHaveTextContent(label);
|
2021-09-18 13:59:54 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|