forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-12 18:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated DoughnutChartLegend test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-05-28 12:33:50 +02:00
parent 56150e8707
commit 89f830d9bb
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
test/visits/charts/DoughnutChartLegend.test.tsx
View File

@@ -1,11 +1,11 @@
import { shallow } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { Chart, ChartDataset } from 'chart.js'; import { Chart, ChartDataset } from 'chart.js';
import { DoughnutChartLegend } from '../../../src/visits/charts/DoughnutChartLegend'; import { DoughnutChartLegend } from '../../../src/visits/charts/DoughnutChartLegend';
describe('<DoughnutChartLegend />', () => { describe('<DoughnutChartLegend />', () => {
const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2']; const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2'];
const colors = ['foo_color', 'bar_color', 'baz_color']; const colors = ['green', 'blue', 'yellow'];
const defaultColor = 'red'; const defaultColor = 'red';
const datasets = [Mock.of<ChartDataset>({ backgroundColor: colors })]; const datasets = [Mock.of<ChartDataset>({ backgroundColor: colors })];
const chart = Mock.of<Chart>({ const chart = Mock.of<Chart>({
@@ -16,18 +16,21 @@ describe('<DoughnutChartLegend />', () => {
}); });
it('renders the expected amount of items with expected colors and labels', () => { it('renders the expected amount of items with expected colors and labels', () => {
const wrapper = shallow(<DoughnutChartLegend chart={chart} />); render(<DoughnutChartLegend chart={chart} />);
const items = wrapper.find('li');
const items = screen.getAllByRole('listitem');
expect.assertions(labels.length * 2 + 1); expect.assertions(labels.length * 2 + 1);
expect(items).toHaveLength(labels.length); expect(items).toHaveLength(labels.length);
labels.forEach((label, index) => {
const item = items.at(index);
expect(item.find('.doughnut-chart-legend__item-color').prop('style')).toEqual({ labels.forEach((label, index) => {
backgroundColor: colors[index] ?? defaultColor, const item = items[index];
});
expect(item.find('.doughnut-chart-legend__item-text').text()).toEqual(label); 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);
}); });
}); });
}); });