Fixed tests

src/visits/helpers/LineChartCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, FC } from 'react';
+import { useState, useMemo } from 'react';
 import {
   Card,
   CardHeader,
@@ -220,7 +220,7 @@ const LineChartCard = (
     },
     onHover: pointerOnHover,
   };
-  const LineChart: FC = () => (
+  const renderLineChart = () => (
     <Line
       data={generateChartData()}
       options={options}
@@ -255,8 +255,8 @@ const LineChartCard = (
       <CardBody className="line-chart-card__body">
         {/* It's VERY IMPORTANT to render two different components here, as one has 1 dataset and the other has 2 */}
         {/* Using the same component causes a crash when switching from 1 to 2 datasets, and then back to 1 dataset */}
-        {highlightedVisits.length > 0 && <LineChart />}
+        {highlightedVisits.length > 0 && renderLineChart()}
-        {highlightedVisits.length === 0 && <LineChart />}
+        {highlightedVisits.length === 0 && renderLineChart()}
       </CardBody>
     </Card>
   );

test/visits/helpers/DefaultChart.test.tsx

@@ -1,5 +1,5 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Doughnut, HorizontalBar } from 'react-chartjs-2';
+import { Doughnut, Bar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import DefaultChart from '../../../src/visits/helpers/DefaultChart';
 import { prettify } from '../../../src/utils/helpers/numbers';
@@ -15,19 +15,18 @@ describe('<DefaultChart />', () => {
   afterEach(() => wrapper?.unmount());
 
   it('renders Doughnut when is not a bar chart', () => {
-    wrapper = shallow(<DefaultChart title="The chart" stats={stats} />);
+    wrapper = shallow(<DefaultChart stats={stats} />);
     const doughnut = wrapper.find(Doughnut);
-    const horizontal = wrapper.find(HorizontalBar);
+    const horizontal = wrapper.find(Bar);
     const cols = wrapper.find('.col-sm-12');
 
     expect(doughnut).toHaveLength(1);
     expect(horizontal).toHaveLength(0);
 
-    const { labels, datasets } = doughnut.prop('data') as any;
+    const { labels, datasets } = doughnut.prop('data');
-    const [{ title, data, backgroundColor, borderColor }] = datasets;
+    const [{ data, backgroundColor, borderColor }] = datasets;
-    const { legend, scales, ...options } = doughnut.prop('options') ?? {};
+    const { plugins, scales } = doughnut.prop('options') ?? {};
 
-    expect(title).toEqual('The chart');
     expect(labels).toEqual(keys(stats));
     expect(data).toEqual(values(stats));
     expect(datasets).toHaveLength(1);
@@ -45,36 +44,36 @@ describe('<DefaultChart />', () => {
       '#463730',
     ]);
     expect(borderColor).toEqual('white');
-    expect(legend).toEqual({ display: false });
+    expect(plugins.legend).toEqual({ display: false });
-    expect(typeof options.legendCallback).toEqual('function');
     expect(scales).toBeUndefined();
     expect(cols).toHaveLength(2);
   });
 
   it('renders HorizontalBar when is not a bar chart', () => {
-    wrapper = shallow(<DefaultChart isBarChart title="The chart" stats={stats} />);
+    wrapper = shallow(<DefaultChart isBarChart stats={stats} />);
     const doughnut = wrapper.find(Doughnut);
-    const horizontal = wrapper.find(HorizontalBar);
+    const horizontal = wrapper.find(Bar);
     const cols = wrapper.find('.col-sm-12');
 
     expect(doughnut).toHaveLength(0);
     expect(horizontal).toHaveLength(1);
 
-    const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
+    const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
-    const { legend, scales, ...options } = horizontal.prop('options') ?? {};
+    const { plugins, scales } = horizontal.prop('options') ?? {};
 
     expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
     expect(borderColor).toEqual(MAIN_COLOR);
-    expect(legend).toEqual({ display: false });
+    expect(plugins.legend).toEqual({ display: false });
-    expect(typeof options.legendCallback).toEqual('boolean');
     expect(scales).toEqual({
-      xAxes: [
+      x: {
-        {
+        beginAtZero: true,
-          ticks: { beginAtZero: true, precision: 0, callback: prettify },
+        stacked: true,
-          stacked: true,
+        ticks: {
+          precision: 0,
+          callback: prettify,
         },
-      ],
+      },
-      yAxes: [{ stacked: true }],
+      y: { stacked: true },
     });
     expect(cols).toHaveLength(1);
   });
@@ -86,12 +85,12 @@ describe('<DefaultChart />', () => {
     [{ bar: 20, foo: 13 }, [ 110, 436 ], [ 13, 20 ]],
     [ undefined, [ 123, 456 ], undefined ],
   ])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => {
-    wrapper = shallow(<DefaultChart isBarChart title="The chart" stats={stats} highlightedStats={highlightedStats} />);
+    wrapper = shallow(<DefaultChart isBarChart stats={stats} highlightedStats={highlightedStats} />);
-    const horizontal = wrapper.find(HorizontalBar);
+    const horizontal = wrapper.find(Bar);
 
-    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data') as any;
+    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');
 
-    expect(label).toEqual(highlightedStats ? 'Non-selected' : 'Visits');
+    expect(label).toEqual('Visits');
     expect(data).toEqual(expectedData);
     expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData);
     !expectedHighlightedData && expect(highlightedData).toBeUndefined();

test/visits/helpers/LineChartCard.test.tsx

@@ -7,6 +7,7 @@ import LineChartCard from '../../../src/visits/helpers/LineChartCard';
 import ToggleSwitch from '../../../src/utils/ToggleSwitch';
 import { NormalizedVisit } from '../../../src/visits/types';
 import { prettify } from '../../../src/utils/helpers/numbers';
+import { pointerOnHover, renderChartLabel } from '../../../src/utils/helpers/charts';
 
 describe('<LineChartCard />', () => {
   let wrapper: ShallowWrapper;
@@ -54,23 +55,27 @@ describe('<LineChartCard />', () => {
 
     expect(chart.prop('options')).toEqual(expect.objectContaining({
       maintainAspectRatio: false,
-      legend: { display: false },
+      plugins: {
-      scales: {
+        legend: { display: false },
-        yAxes: [
+        tooltip: {
-          {
+          intersect: false,
-            ticks: { beginAtZero: true, precision: 0, callback: prettify },
+          axis: 'x',
-          },
+          callbacks: { label: renderChartLabel },
-        ],
+        },
-        xAxes: [
-          {
-            scaleLabel: { display: true, labelString: 'Month' },
-          },
-        ],
       },
-      tooltips: expect.objectContaining({
+      scales: {
-        intersect: false,
+        y: {
-        axis: 'x',
+          beginAtZero: true,
-      }),
+          ticks: {
+            precision: 0,
+            callback: prettify,
+          },
+        },
+        x: {
+          title: { display: true, text: 'Month' },
+        },
+      },
+      onHover: pointerOnHover,
     }));
   });
 
@@ -80,7 +85,7 @@ describe('<LineChartCard />', () => {
   ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => {
     const wrapper = createWrapper(visits, highlightedVisits);
     const chart = wrapper.find(Line);
-    const { datasets } = chart.prop('data') as any;
+    const { datasets } = chart.prop('data');
 
     expect(datasets).toHaveLength(expectedLines);
   });
@@ -91,8 +96,8 @@ describe('<LineChartCard />', () => {
       Mock.of<NormalizedVisit>({ date: '2016-01-01' }),
     ]);
 
-    expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(2);
+    expect(wrapper.find(Line).prop('data').labels).toHaveLength(2);
     wrapper.find(ToggleSwitch).simulate('change');
-    expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(4);
+    expect(wrapper.find(Line).prop('data').labels).toHaveLength(4);
   });
 });