1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ContributorAreaChart from '~/contributors/components/contributor_area_chart.vue';
describe('Contributor area chart', () => {
let wrapper;
const defaultProps = {
data: [
{
name: 'Commits',
data: [
['2015-01-01', 1],
['2015-01-02', 2],
['2015-01-03', 3],
],
},
],
height: 100,
option: {
xAxis: { name: '', type: 'time' },
yAxis: { name: 'Number of commits' },
grid: {
top: 10,
bottom: 10,
left: 10,
right: 10,
},
},
};
const createWrapper = (props = {}) => {
wrapper = shallowMountExtended(ContributorAreaChart, {
propsData: { ...defaultProps, ...props },
});
};
const findAreaChart = () => wrapper.findComponent(GlAreaChart);
const findTooltipTitle = () => wrapper.findByTestId('tooltip-title').text();
const findTooltipLabel = () => wrapper.findByTestId('tooltip-label').text();
const findTooltipValue = () => wrapper.findByTestId('tooltip-value').text();
const setTooltipData = async (title, value) => {
findAreaChart().vm.formatTooltipText({ seriesData: [{ data: [title, value] }] });
await nextTick();
};
describe('default inputs', () => {
beforeEach(() => {
createWrapper();
});
it('renders the area chart', () => {
expect(findAreaChart().exists()).toBe(true);
expect(findAreaChart().props()).toMatchObject(defaultProps);
});
it('emits the area chart created event', () => {
const payload = 'test';
findAreaChart().vm.$emit('created', payload);
expect(wrapper.emitted('created')).toHaveLength(1);
expect(wrapper.emitted('created')[0]).toEqual([payload]);
});
it('shows the tooltip with the formatted chart data', async () => {
await setTooltipData('01-01-2000', 10);
expect(findTooltipTitle()).toEqual('Jan 01, 2000');
expect(findTooltipLabel()).toEqual(defaultProps.option.yAxis.name);
expect(findTooltipValue()).toEqual('10');
});
});
describe('Y axis has no name', () => {
beforeEach(() => {
createWrapper({
option: {
...defaultProps.option,
yAxis: {},
},
});
});
it('shows a default tooltip label if the Y axis name is missing', async () => {
await setTooltipData('01-01-2000', 10);
expect(findTooltipLabel()).toEqual('Value');
});
});
});
|
