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
|
import { mount } from '@vue/test-utils';
import { zip } from 'lodash';
import { trimText } from 'helpers/text_helper';
import Deployment from '~/vue_merge_request_widget/components/deployment/deployment.vue';
import DeploymentList from '~/vue_merge_request_widget/components/deployment/deployment_list.vue';
import MrCollapsibleExtension from '~/vue_merge_request_widget/components/mr_collapsible_extension.vue';
import { mockStore } from '../mock_data';
const DEFAULT_PROPS = {
hasDeploymentMetrics: false,
deploymentClass: 'js-pre-deployment',
};
describe('~/vue_merge_request_widget/components/deployment/deployment_list.vue', () => {
let wrapper;
let propsData;
const factory = (props = {}) => {
propsData = {
...DEFAULT_PROPS,
deployments: mockStore.deployments,
...props,
};
wrapper = mount(DeploymentList, {
propsData,
});
};
afterEach(() => {
wrapper?.destroy?.();
wrapper = null;
});
describe('with few deployments', () => {
beforeEach(() => {
factory();
});
it('shows all deployments', () => {
const deploymentWrappers = wrapper.findAllComponents(Deployment);
expect(wrapper.findComponent(MrCollapsibleExtension).exists()).toBe(false);
expect(deploymentWrappers).toHaveLength(propsData.deployments.length);
zip(deploymentWrappers.wrappers, propsData.deployments).forEach(
([deploymentWrapper, deployment]) => {
expect(deploymentWrapper.props('deployment')).toEqual(deployment);
expect(deploymentWrapper.props()).toMatchObject({
showMetrics: DEFAULT_PROPS.hasDeploymentMetrics,
});
expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
expect(deploymentWrapper.text()).toEqual(expect.any(String));
expect(deploymentWrapper.text()).not.toBe('');
},
);
});
});
describe('with many deployments', () => {
let deployments;
let collapsibleExtension;
beforeEach(() => {
deployments = [
...mockStore.deployments,
...mockStore.deployments.map((deployment) => ({
...deployment,
id: deployment.id + mockStore.deployments.length,
})),
];
factory({ deployments });
collapsibleExtension = wrapper.findComponent(MrCollapsibleExtension);
});
it('shows collapsed deployments', () => {
expect(collapsibleExtension.exists()).toBe(true);
expect(trimText(collapsibleExtension.text())).toBe(
`${deployments.length} environments impacted. View all environments.`,
);
});
it('shows all deployments on click', async () => {
await collapsibleExtension.find('button').trigger('click');
const deploymentWrappers = wrapper.findAllComponents(Deployment);
expect(deploymentWrappers).toHaveLength(deployments.length);
zip(deploymentWrappers.wrappers, propsData.deployments).forEach(
([deploymentWrapper, deployment]) => {
expect(deploymentWrapper.props('deployment')).toEqual(deployment);
expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
expect(deploymentWrapper.text()).toEqual(expect.any(String));
expect(deploymentWrapper.text()).not.toBe('');
},
);
});
});
});
|
