shlink-web-client/test/visits/helpers/DefaultChart.test.tsx

99 lines
3.2 KiB
TypeScript
Raw Normal View History

2020-09-03 21:34:22 +03:00
import { shallow, ShallowWrapper } from 'enzyme';
2021-09-18 14:17:04 +03:00
import { Doughnut, Bar } from 'react-chartjs-2';
2018-09-08 10:06:18 +03:00
import { keys, values } from 'ramda';
import DefaultChart from '../../../src/visits/helpers/DefaultChart';
2020-09-17 19:05:26 +03:00
import { prettify } from '../../../src/utils/helpers/numbers';
2020-12-20 14:17:12 +03:00
import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
2018-09-08 10:06:18 +03:00
describe('<DefaultChart />', () => {
2020-09-03 21:34:22 +03:00
let wrapper: ShallowWrapper;
2018-09-08 10:06:18 +03:00
const stats = {
foo: 123,
bar: 456,
};
2020-09-03 21:34:22 +03:00
afterEach(() => wrapper?.unmount());
2018-09-08 10:06:18 +03:00
it('renders Doughnut when is not a bar chart', () => {
2021-09-18 14:17:04 +03:00
wrapper = shallow(<DefaultChart stats={stats} />);
2018-09-08 10:06:18 +03:00
const doughnut = wrapper.find(Doughnut);
2021-09-18 14:17:04 +03:00
const horizontal = wrapper.find(Bar);
const cols = wrapper.find('.col-sm-12');
2018-09-08 10:06:18 +03:00
expect(doughnut).toHaveLength(1);
expect(horizontal).toHaveLength(0);
2021-09-18 14:17:04 +03:00
const { labels, datasets } = doughnut.prop('data');
const [{ data, backgroundColor, borderColor }] = datasets;
const { plugins, scales } = doughnut.prop('options') ?? {};
2018-09-08 10:06:18 +03:00
expect(labels).toEqual(keys(stats));
expect(data).toEqual(values(stats));
expect(datasets).toHaveLength(1);
2018-09-08 10:06:18 +03:00
expect(backgroundColor).toEqual([
'#97BBCD',
'#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#57A773',
'#414066',
'#08B2E3',
'#B6C454',
'#DCDCDC',
'#463730',
2018-09-08 10:06:18 +03:00
]);
expect(borderColor).toEqual('white');
2021-09-18 14:17:04 +03:00
expect(plugins.legend).toEqual({ display: false });
expect(scales).toBeUndefined();
expect(cols).toHaveLength(2);
2018-09-08 10:06:18 +03:00
});
it('renders HorizontalBar when is not a bar chart', () => {
2021-09-18 14:17:04 +03:00
wrapper = shallow(<DefaultChart isBarChart stats={stats} />);
2018-09-08 10:06:18 +03:00
const doughnut = wrapper.find(Doughnut);
2021-09-18 14:17:04 +03:00
const horizontal = wrapper.find(Bar);
const cols = wrapper.find('.col-sm-12');
2018-09-08 10:06:18 +03:00
expect(doughnut).toHaveLength(0);
expect(horizontal).toHaveLength(1);
2021-09-18 14:17:04 +03:00
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
const { plugins, scales } = horizontal.prop('options') ?? {};
2018-09-08 10:06:18 +03:00
2020-12-20 14:17:12 +03:00
expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
expect(borderColor).toEqual(MAIN_COLOR);
2021-09-18 14:17:04 +03:00
expect(plugins.legend).toEqual({ display: false });
2018-09-08 21:34:04 +03:00
expect(scales).toEqual({
2021-09-18 14:17:04 +03:00
x: {
beginAtZero: true,
stacked: true,
ticks: {
precision: 0,
callback: prettify,
2018-09-08 21:34:04 +03:00
},
2021-09-18 14:17:04 +03:00
},
y: { stacked: true },
2018-09-08 21:34:04 +03:00
});
expect(cols).toHaveLength(1);
2018-09-08 10:06:18 +03:00
});
it.each([
[{ foo: 23 }, [ 100, 456 ], [ 23, 0 ]],
[{ foo: 50 }, [ 73, 456 ], [ 50, 0 ]],
[{ bar: 45 }, [ 123, 411 ], [ 0, 45 ]],
[{ bar: 20, foo: 13 }, [ 110, 436 ], [ 13, 20 ]],
[ undefined, [ 123, 456 ], undefined ],
])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => {
2021-09-18 14:17:04 +03:00
wrapper = shallow(<DefaultChart isBarChart stats={stats} highlightedStats={highlightedStats} />);
const horizontal = wrapper.find(Bar);
2021-09-18 14:17:04 +03:00
const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');
2021-09-18 14:17:04 +03:00
expect(label).toEqual('Visits');
expect(data).toEqual(expectedData);
expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData);
!expectedHighlightedData && expect(highlightedData).toBeUndefined();
});
2018-09-08 10:06:18 +03:00
});