From c5cb0dcb263e624027f23e8341216f81b6c1b7ac Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 30 May 2020 10:41:46 +0200
Subject: [PATCH] Added test for LineChartCard

---
 src/visits/helpers/LineChartCard.js       | 20 ++-----
 test/visits/helpers/LineChartCard.test.js | 66 +++++++++++++++++++++++
 2 files changed, 70 insertions(+), 16 deletions(-)
 create mode 100644 test/visits/helpers/LineChartCard.test.js

diff --git a/src/visits/helpers/LineChartCard.js b/src/visits/helpers/LineChartCard.js
index 59437d14..b856ee2f 100644
--- a/src/visits/helpers/LineChartCard.js
+++ b/src/visits/helpers/LineChartCard.js
@@ -23,22 +23,10 @@ const propTypes = {
 };
 
 const steps = [
-  {
-    value: 'monthly',
-    menuText: 'Month',
-  },
-  {
-    value: 'weekly',
-    menuText: 'Week',
-  },
-  {
-    value: 'daily',
-    menuText: 'Day',
-  },
-  {
-    value: 'hourly',
-    menuText: 'Hour',
-  },
+  { value: 'monthly', menuText: 'Month' },
+  { value: 'weekly', menuText: 'Week' },
+  { value: 'daily', menuText: 'Day' },
+  { value: 'hourly', menuText: 'Hour' },
 ];
 
 const STEP_TO_DATE_FORMAT = {
diff --git a/test/visits/helpers/LineChartCard.test.js b/test/visits/helpers/LineChartCard.test.js
new file mode 100644
index 00000000..1c6bf376
--- /dev/null
+++ b/test/visits/helpers/LineChartCard.test.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CardHeader, DropdownItem } from 'reactstrap';
+import { Line } from 'react-chartjs-2';
+import LineChartCard from '../../../src/visits/helpers/LineChartCard';
+
+describe('<LineCHartCard />', () => {
+  let wrapper;
+  const createWrapper = (visits = [], highlightedVisits = []) => {
+    wrapper = shallow(<LineChartCard title="Cool title" visits={visits} highlightedVisits={highlightedVisits} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('renders provided title', () => {
+    const wrapper = createWrapper();
+    const header = wrapper.find(CardHeader);
+
+    expect(header.html()).toContain('Cool title');
+  });
+
+  it('renders group menu and selects active grouping item', () => {
+    const wrapper = createWrapper();
+    const items = wrapper.find(DropdownItem);
+
+    expect(items).toHaveLength(4);
+    expect(items.at(0).prop('children')).toEqual('Month');
+    expect(items.at(0).prop('active')).toEqual(true);
+    expect(items.at(1).prop('children')).toEqual('Week');
+    expect(items.at(1).prop('active')).toEqual(false);
+    expect(items.at(2).prop('children')).toEqual('Day');
+    expect(items.at(2).prop('active')).toEqual(false);
+    expect(items.at(3).prop('children')).toEqual('Hour');
+    expect(items.at(3).prop('active')).toEqual(false);
+  });
+
+  it('renders chart with expected options', () => {
+    const wrapper = createWrapper();
+    const chart = wrapper.find(Line);
+
+    expect(chart.prop('options')).toEqual({
+      maintainAspectRatio: false,
+      legend: { display: false },
+      scales: {
+        yAxes: [
+          {
+            ticks: { beginAtZero: true, precision: 0 },
+          },
+        ],
+      },
+    });
+  });
+
+  it.each([
+    [[{}], [], 1 ],
+    [[{}], [{}], 2 ],
+  ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => {
+    const wrapper = createWrapper(visits, highlightedVisits);
+    const chart = wrapper.find(Line);
+    const { datasets } = chart.prop('data');
+
+    expect(datasets).toHaveLength(expectedLines);
+  });
+});