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
129
130
|
import { merge } from 'lodash';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import { GlTabs, GlTab } from '@gitlab/ui';
import createMockApollo from 'helpers/mock_apollo_helper';
import Component from '~/projects/pipelines/charts/components/app.vue';
import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
const projectPath = 'gitlab-org/gitlab';
const localVue = createLocalVue();
localVue.use(VueApollo);
const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
describe('ProjectsPipelinesChartsApp', () => {
let wrapper;
function createMockApolloProvider() {
const requestHandlers = [
[getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
[getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
];
return createMockApollo(requestHandlers);
}
function createComponent(mountOptions = {}) {
wrapper = shallowMount(
Component,
merge(
{},
{
provide: {
projectPath,
shouldRenderDeploymentFrequencyCharts: false,
},
localVue,
apolloProvider: createMockApolloProvider(),
stubs: {
DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
},
},
mountOptions,
),
);
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('pipelines charts', () => {
it('displays the pipeline charts', () => {
const chart = wrapper.find(PipelineCharts);
const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
const {
totalPipelines: total,
successfulPipelines: success,
failedPipelines: failed,
} = mockPipelineCount.data.project;
expect(chart.exists()).toBe(true);
expect(chart.props()).toMatchObject({
counts: {
failed: failed.count,
success: success.count,
total: total.count,
successRatio: (success.count / (success.count + failed.count)) * 100,
},
lastWeek: {
labels: analytics.weekPipelinesLabels,
totals: analytics.weekPipelinesTotals,
success: analytics.weekPipelinesSuccessful,
},
lastMonth: {
labels: analytics.monthPipelinesLabels,
totals: analytics.monthPipelinesTotals,
success: analytics.monthPipelinesSuccessful,
},
lastYear: {
labels: analytics.yearPipelinesLabels,
totals: analytics.yearPipelinesTotals,
success: analytics.yearPipelinesSuccessful,
},
timesChart: {
labels: analytics.pipelineTimesLabels,
values: analytics.pipelineTimesValues,
},
});
});
});
const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
const findGlTabs = () => wrapper.find(GlTabs);
const findAllGlTab = () => wrapper.findAll(GlTab);
const findGlTabAt = (i) => findAllGlTab().at(i);
describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
beforeEach(() => {
createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
});
it('renders the deployment frequency charts in a tab', () => {
expect(findGlTabs().exists()).toBe(true);
expect(findGlTabAt(0).attributes('title')).toBe('Pipelines');
expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
expect(findDeploymentFrequencyCharts().exists()).toBe(true);
});
});
describe('when shouldRenderDeploymentFrequencyCharts is false', () => {
beforeEach(() => {
createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } });
});
it('does not render the deployment frequency charts in a tab', () => {
expect(findGlTabs().exists()).toBe(false);
expect(findDeploymentFrequencyCharts().exists()).toBe(false);
});
});
});
|
