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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { GlCollapse, GlIcon } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { stubTransition } from 'helpers/stub_transition';
import createMockApollo from 'helpers/mock_apollo_helper';
import { __, s__ } from '~/locale';
import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
import DeployBoard from '~/environments/components/deploy_board.vue';
import setEnvironmentToChangeCanaryMutation from '~/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql';
import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
Vue.use(VueApollo);
describe('~/environments/components/deploy_board_wrapper.vue', () => {
let wrapper;
let mockApollo;
const findDeployBoard = () => wrapper.findComponent(DeployBoard);
const createWrapper = ({ propsData = {} } = {}) => {
mockApollo = createMockApollo();
return mountExtended(DeployBoardWrapper, {
propsData: { environment: resolvedEnvironment, rolloutStatus, ...propsData },
provide: { helpPagePath: '/help' },
stubs: { transition: stubTransition() },
apolloProvider: mockApollo,
});
};
const expandCollapsedSection = async () => {
const button = wrapper.findByRole('button', { name: __('Expand') });
await button.trigger('click');
return button;
};
afterEach(() => {
wrapper?.destroy();
});
it('is labeled Kubernetes Pods', () => {
wrapper = createWrapper();
expect(wrapper.findByText(s__('DeployBoard|Kubernetes Pods')).exists()).toBe(true);
});
describe('collapse', () => {
let icon;
let collapse;
beforeEach(() => {
wrapper = createWrapper();
collapse = wrapper.findComponent(GlCollapse);
icon = wrapper.findComponent(GlIcon);
});
it('is collapsed by default', () => {
expect(collapse.attributes('visible')).toBeUndefined();
expect(icon.props('name')).toBe('chevron-lg-right');
});
it('opens on click', async () => {
const button = await expandCollapsedSection();
expect(button.attributes('aria-label')).toBe(__('Collapse'));
expect(collapse.attributes('visible')).toBe('visible');
expect(icon.props('name')).toBe('chevron-lg-down');
const deployBoard = findDeployBoard();
expect(deployBoard.exists()).toBe(true);
});
});
describe('deploy board', () => {
it('passes the rollout status on and sets graphql to true', async () => {
wrapper = createWrapper();
await expandCollapsedSection();
const deployBoard = findDeployBoard();
expect(deployBoard.props('deployBoardData')).toEqual(rolloutStatus);
expect(deployBoard.props('graphql')).toBe(true);
});
it('sets the update to the canary via graphql', () => {
wrapper = createWrapper();
jest.spyOn(mockApollo.defaultClient, 'mutate');
const deployBoard = findDeployBoard();
deployBoard.vm.$emit('changeCanaryWeight', 15);
expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith({
mutation: setEnvironmentToChangeCanaryMutation,
variables: { environment: resolvedEnvironment, weight: 15 },
});
});
describe('is loading', () => {
it('should set the loading prop', async () => {
wrapper = createWrapper({
propsData: { rolloutStatus: { ...rolloutStatus, status: 'loading' } },
});
await expandCollapsedSection();
const deployBoard = findDeployBoard();
expect(deployBoard.props('isLoading')).toBe(true);
});
});
describe('is empty', () => {
it('should set the empty prop', async () => {
wrapper = createWrapper({
propsData: { rolloutStatus: { ...rolloutStatus, status: 'not_found' } },
});
await expandCollapsedSection();
const deployBoard = findDeployBoard();
expect(deployBoard.props('isEmpty')).toBe(true);
});
});
});
});
|
