mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-10 18:27:25 +03:00
Fixed tests
This commit is contained in:
parent
7e5397dd38
commit
a15917b1ae
3 changed files with 52 additions and 48 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue