diff --git a/src/visits/helpers/LineChartCard.tsx b/src/visits/helpers/LineChartCard.tsx index 8cca1e9f..f6a8bcd3 100644 --- a/src/visits/helpers/LineChartCard.tsx +++ b/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 = () => ( {/* 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 && } - {highlightedVisits.length === 0 && } + {highlightedVisits.length > 0 && renderLineChart()} + {highlightedVisits.length === 0 && renderLineChart()} ); diff --git a/test/visits/helpers/DefaultChart.test.tsx b/test/visits/helpers/DefaultChart.test.tsx index 2e3a2e7b..fc7a6488 100644 --- a/test/visits/helpers/DefaultChart.test.tsx +++ b/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('', () => { afterEach(() => wrapper?.unmount()); it('renders Doughnut when is not a bar chart', () => { - wrapper = shallow(); + wrapper = shallow(); 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 [{ title, data, backgroundColor, borderColor }] = datasets; - const { legend, scales, ...options } = doughnut.prop('options') ?? {}; + const { labels, datasets } = doughnut.prop('data'); + const [{ data, backgroundColor, borderColor }] = datasets; + 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('', () => { '#463730', ]); expect(borderColor).toEqual('white'); - expect(legend).toEqual({ display: false }); - expect(typeof options.legendCallback).toEqual('function'); + expect(plugins.legend).toEqual({ display: false }); expect(scales).toBeUndefined(); expect(cols).toHaveLength(2); }); it('renders HorizontalBar when is not a bar chart', () => { - wrapper = shallow(); + wrapper = shallow(); 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 { legend, scales, ...options } = horizontal.prop('options') ?? {}; + const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data'); + const { plugins, scales } = horizontal.prop('options') ?? {}; expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA); expect(borderColor).toEqual(MAIN_COLOR); - expect(legend).toEqual({ display: false }); - expect(typeof options.legendCallback).toEqual('boolean'); + expect(plugins.legend).toEqual({ display: false }); expect(scales).toEqual({ - xAxes: [ - { - ticks: { beginAtZero: true, precision: 0, callback: prettify }, - stacked: true, + x: { + beginAtZero: true, + stacked: true, + ticks: { + precision: 0, + callback: prettify, }, - ], - yAxes: [{ stacked: true }], + }, + y: { stacked: true }, }); expect(cols).toHaveLength(1); }); @@ -86,12 +85,12 @@ describe('', () => { [{ bar: 20, foo: 13 }, [ 110, 436 ], [ 13, 20 ]], [ undefined, [ 123, 456 ], undefined ], ])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => { - wrapper = shallow(); - const horizontal = wrapper.find(HorizontalBar); + wrapper = shallow(); + 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(); diff --git a/test/visits/helpers/LineChartCard.test.tsx b/test/visits/helpers/LineChartCard.test.tsx index f7948102..0ef89866 100644 --- a/test/visits/helpers/LineChartCard.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -54,23 +55,27 @@ describe('', () => { expect(chart.prop('options')).toEqual(expect.objectContaining({ maintainAspectRatio: false, - legend: { display: false }, - scales: { - yAxes: [ - { - ticks: { beginAtZero: true, precision: 0, callback: prettify }, - }, - ], - xAxes: [ - { - scaleLabel: { display: true, labelString: 'Month' }, - }, - ], + plugins: { + legend: { display: false }, + tooltip: { + intersect: false, + axis: 'x', + callbacks: { label: renderChartLabel }, + }, }, - tooltips: expect.objectContaining({ - intersect: false, - axis: 'x', - }), + scales: { + y: { + beginAtZero: true, + ticks: { + precision: 0, + callback: prettify, + }, + }, + x: { + title: { display: true, text: 'Month' }, + }, + }, + onHover: pointerOnHover, })); }); @@ -80,7 +85,7 @@ describe('', () => { ])('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('', () => { Mock.of({ 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); }); });