Fixed tests

This commit is contained in:
Alejandro Celaya 2021-09-18 13:17:04 +02:00
parent 7e5397dd38
commit a15917b1ae
3 changed files with 52 additions and 48 deletions

View file

@ -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 && <LineChart />}
{highlightedVisits.length > 0 && renderLineChart()}
{highlightedVisits.length === 0 && renderLineChart()}
</CardBody>
</Card>
);

View file

@ -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 [{ 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('<DefaultChart />', () => {
'#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(<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 { 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('<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} />);
const horizontal = wrapper.find(HorizontalBar);
wrapper = shallow(<DefaultChart isBarChart stats={stats} highlightedStats={highlightedStats} />);
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();

View file

@ -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 },
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('<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);
});
});