mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Created GraphCard test
This commit is contained in:
parent
0c1656285b
commit
eb0f219403
2 changed files with 61 additions and 2 deletions
|
@ -2,6 +2,7 @@ import { Card, CardHeader, CardBody } from 'reactstrap';
|
||||||
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { keys, values } from 'ramda';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
|
@ -11,11 +12,11 @@ const propTypes = {
|
||||||
|
|
||||||
export function GraphCard({ title, isBarChart, stats }) {
|
export function GraphCard({ title, isBarChart, stats }) {
|
||||||
const generateGraphData = (stats) => ({
|
const generateGraphData = (stats) => ({
|
||||||
labels: Object.keys(stats),
|
labels: keys(stats),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
title,
|
title,
|
||||||
data: Object.values(stats),
|
data: values(stats),
|
||||||
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
|
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
|
||||||
'#97BBCD',
|
'#97BBCD',
|
||||||
'#DCDCDC',
|
'#DCDCDC',
|
||||||
|
|
58
test/visits/GraphCard.test.js
Normal file
58
test/visits/GraphCard.test.js
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
||||||
|
import { keys, values } from 'ramda';
|
||||||
|
import { GraphCard } from '../../src/visits/GraphCard';
|
||||||
|
|
||||||
|
describe('<GraphCard />', () => {
|
||||||
|
let wrapper;
|
||||||
|
const stats = {
|
||||||
|
foo: 123,
|
||||||
|
bar: 456,
|
||||||
|
};
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
if (wrapper) {
|
||||||
|
wrapper.unmount();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders Doughnut when is not a bar chart', () => {
|
||||||
|
wrapper = shallow(<GraphCard title="The chart" stats={stats} />);
|
||||||
|
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');
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders HorizontalBar when is not a bar chart', () => {
|
||||||
|
wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} />);
|
||||||
|
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');
|
||||||
|
|
||||||
|
expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
|
||||||
|
expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue