2018-09-08 10:06:18 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { shallow } from 'enzyme';
|
|
|
|
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
|
|
|
import { keys, values } from 'ramda';
|
2018-10-19 20:04:22 +03:00
|
|
|
import GraphCard from '../../src/visits/GraphCard';
|
2018-09-08 10:06:18 +03:00
|
|
|
|
|
|
|
describe('<GraphCard />', () => {
|
|
|
|
let wrapper;
|
|
|
|
const stats = {
|
|
|
|
foo: 123,
|
|
|
|
bar: 456,
|
|
|
|
};
|
|
|
|
|
2018-10-28 23:26:47 +03:00
|
|
|
afterEach(() => wrapper && wrapper.unmount());
|
2018-09-08 10:06:18 +03:00
|
|
|
|
|
|
|
it('renders Doughnut when is not a bar chart', () => {
|
2020-04-04 13:09:17 +03:00
|
|
|
wrapper = shallow(<GraphCard title="The chart" stats={stats} />);
|
2018-09-08 10:06:18 +03:00
|
|
|
const doughnut = wrapper.find(Doughnut);
|
|
|
|
const horizontal = wrapper.find(HorizontalBar);
|
|
|
|
|
|
|
|
expect(doughnut).toHaveLength(1);
|
|
|
|
expect(horizontal).toHaveLength(0);
|
|
|
|
|
|
|
|
const { labels, datasets: [{ title, data, backgroundColor, borderColor }] } = doughnut.prop('data');
|
2018-09-08 21:34:04 +03:00
|
|
|
const { legend, scales } = doughnut.prop('options');
|
2018-09-08 10:06:18 +03:00
|
|
|
|
|
|
|
expect(title).toEqual('The chart');
|
|
|
|
expect(labels).toEqual(keys(stats));
|
|
|
|
expect(data).toEqual(values(stats));
|
|
|
|
expect(backgroundColor).toEqual([
|
|
|
|
'#97BBCD',
|
|
|
|
'#DCDCDC',
|
|
|
|
'#F7464A',
|
|
|
|
'#46BFBD',
|
|
|
|
'#FDB45C',
|
|
|
|
'#949FB1',
|
|
|
|
'#4D5360',
|
|
|
|
]);
|
|
|
|
expect(borderColor).toEqual('white');
|
2018-09-08 21:34:04 +03:00
|
|
|
expect(legend).toEqual({ position: 'right' });
|
2019-03-16 11:02:10 +03:00
|
|
|
expect(scales).toBeUndefined();
|
2018-09-08 10:06:18 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders HorizontalBar when is not a bar chart', () => {
|
2020-04-04 13:09:17 +03:00
|
|
|
wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} />);
|
2018-09-08 10:06:18 +03:00
|
|
|
const doughnut = wrapper.find(Doughnut);
|
|
|
|
const horizontal = wrapper.find(HorizontalBar);
|
|
|
|
|
|
|
|
expect(doughnut).toHaveLength(0);
|
|
|
|
expect(horizontal).toHaveLength(1);
|
|
|
|
|
|
|
|
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
|
2018-09-08 21:34:04 +03:00
|
|
|
const { legend, scales } = horizontal.prop('options');
|
2018-09-08 10:06:18 +03:00
|
|
|
|
|
|
|
expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
|
|
|
|
expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
|
2018-09-08 21:34:04 +03:00
|
|
|
expect(legend).toEqual({ display: false });
|
|
|
|
expect(scales).toEqual({
|
|
|
|
xAxes: [
|
|
|
|
{
|
|
|
|
ticks: { beginAtZero: true },
|
2020-04-04 21:16:20 +03:00
|
|
|
stacked: true,
|
2018-09-08 21:34:04 +03:00
|
|
|
},
|
|
|
|
],
|
2020-04-04 21:16:20 +03:00
|
|
|
yAxes: [{ stacked: true }],
|
2018-09-08 21:34:04 +03:00
|
|
|
});
|
2018-09-08 10:06:18 +03:00
|
|
|
});
|
|
|
|
});
|