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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
import { transformedAreaChartData, chartOptions } from '../mock_data';
const 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,
},
{
range: 'test range 4',
title: 'title 4',
data: transformedAreaChartData,
},
];
const DEFAULT_PROPS = {
chartOptions,
charts,
};
describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => {
let wrapper;
const createWrapper = (props = {}, slots = {}) =>
shallowMountExtended(CiCdAnalyticsCharts, {
propsData: {
...DEFAULT_PROPS,
...props,
},
scopedSlots: {
...slots,
},
});
afterEach(() => {
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
});
const findMetricsSlot = () => wrapper.findByTestId('metrics-slot');
const findSegmentedControl = () => wrapper.findComponent(SegmentedControlButtonGroup);
describe('segmented control', () => {
beforeEach(() => {
wrapper = createWrapper();
});
it('should default to the 3rd chart (last 90 days)', () => {
expect(findSegmentedControl().props('value')).toBe(2);
});
it('should use the title and index as values', () => {
const options = findSegmentedControl().props('options');
expect(options).toHaveLength(charts.length);
expect(options).toEqual([
{
text: 'title 1',
value: 0,
},
{
text: 'title 2',
value: 1,
},
{
text: 'title 3',
value: 2,
},
{
text: 'title 4',
value: 3,
},
]);
});
it('should select a different chart on change', async () => {
findSegmentedControl().vm.$emit('input', 1);
const chart = wrapper.findComponent(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.findComponent(CiCdAnalyticsAreaChart).exists()).toBe(false);
});
describe('slots', () => {
beforeEach(() => {
wrapper = createWrapper(
{},
{
metrics: '<div data-testid="metrics-slot">selected chart: {{props.selectedChart}}</div>',
},
);
});
it('renders a metrics slot', async () => {
const selectedChart = 1;
findSegmentedControl().vm.$emit('input', selectedChart);
await nextTick();
expect(findMetricsSlot().text()).toBe(`selected chart: ${selectedChart}`);
});
});
});
|
