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
93
94
|
import { GlSegmentedControl } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
import { transformedAreaChartData, chartOptions } from '../mock_data';
const DEFAULT_PROPS = {
chartOptions,
charts: [
{
range: 'test range 1',
title: 'title 1',
data: transformedAreaChartData,
},
{
range: 'test range 2',
title: 'title 2',
data: transformedAreaChartData,
},
{
range: 'test range 3',
title: 'title 3',
data: transformedAreaChartData,
},
],
};
describe('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => {
let wrapper;
const createWrapper = (props = {}) =>
shallowMount(CiCdAnalyticsCharts, {
propsData: {
...DEFAULT_PROPS,
...props,
},
});
afterEach(() => {
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
});
describe('segmented control', () => {
let segmentedControl;
beforeEach(() => {
wrapper = createWrapper();
segmentedControl = wrapper.find(GlSegmentedControl);
});
it('should default to the first chart', () => {
expect(segmentedControl.props('checked')).toBe(0);
});
it('should use the title and index as values', () => {
const options = segmentedControl.props('options');
expect(options).toHaveLength(3);
expect(options).toEqual([
{
text: 'title 1',
value: 0,
},
{
text: 'title 2',
value: 1,
},
{
text: 'title 3',
value: 2,
},
]);
});
it('should select a different chart on change', async () => {
segmentedControl.vm.$emit('input', 1);
const chart = wrapper.find(CiCdAnalyticsAreaChart);
await nextTick();
expect(chart.props('chartData')).toEqual(transformedAreaChartData);
expect(chart.text()).toBe('Date range: test range 2');
});
});
it('should not display charts if there are no charts', () => {
wrapper = createWrapper({ charts: [] });
expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
});
});
|
