diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js
index 52a87436..26acc8bc 100644
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -2,6 +2,7 @@ import { Card, CardHeader, CardBody } from 'reactstrap';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import PropTypes from 'prop-types';
import React from 'react';
+import { keys, values } from 'ramda';
const propTypes = {
title: PropTypes.string,
@@ -11,11 +12,11 @@ const propTypes = {
export function GraphCard({ title, isBarChart, stats }) {
const generateGraphData = (stats) => ({
- labels: Object.keys(stats),
+ labels: keys(stats),
datasets: [
{
title,
- data: Object.values(stats),
+ data: values(stats),
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
'#97BBCD',
'#DCDCDC',
diff --git a/test/visits/GraphCard.test.js b/test/visits/GraphCard.test.js
new file mode 100644
index 00000000..fd03c0a9
--- /dev/null
+++ b/test/visits/GraphCard.test.js
@@ -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('', () => {
+ let wrapper;
+ const stats = {
+ foo: 123,
+ bar: 456,
+ };
+
+ afterEach(() => {
+ if (wrapper) {
+ wrapper.unmount();
+ }
+ });
+
+ it('renders Doughnut when is not a bar chart', () => {
+ wrapper = shallow();
+ 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();
+ 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)');
+ });
+});