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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
import { GlButton, GlDropdown, GlDropdownItem, GlTooltip } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '~/clusters_list/constants';
describe('ClustersActionsComponent', () => {
let wrapper;
const addClusterPath = 'path/to/connect/existing/cluster';
const newClusterDocsPath = 'path/to/create/new/cluster';
const defaultProvide = {
addClusterPath,
newClusterDocsPath,
canAddCluster: true,
displayClusterAgents: true,
certificateBasedClustersEnabled: true,
};
const findButton = () => wrapper.findComponent(GlButton);
const findDropdown = () => wrapper.findComponent(GlDropdown);
const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
const findTooltip = () => wrapper.findComponent(GlTooltip);
const findDropdownItemIds = () =>
findDropdownItems().wrappers.map((x) => x.attributes('data-testid'));
const findDropdownItemTexts = () => findDropdownItems().wrappers.map((x) => x.text());
const findNewClusterDocsLink = () => wrapper.findByTestId('create-cluster-link');
const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
const createWrapper = (provideData = {}) => {
wrapper = shallowMountExtended(ClustersActions, {
provide: {
...defaultProvide,
...provideData,
},
directives: {
GlModalDirective: createMockDirective('gl-modal-directive'),
},
});
};
beforeEach(() => {
createWrapper();
});
describe('when the certificate based clusters are enabled', () => {
it('renders actions menu', () => {
expect(findDropdown().exists()).toBe(true);
});
it('shows split button in dropdown', () => {
expect(findDropdown().props('split')).toBe(true);
});
it("doesn't show the tooltip", () => {
expect(findTooltip().exists()).toBe(false);
});
describe('when on project level', () => {
it(`displays default action as ${CLUSTERS_ACTIONS.connectWithAgent}`, () => {
expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectWithAgent);
});
it('renders correct modal id for the default action', () => {
const binding = getBinding(findDropdown().element, 'gl-modal-directive');
expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
});
it('renders a dropdown with 2 actions items', () => {
expect(findDropdownItemIds()).toEqual(['create-cluster-link', 'connect-cluster-link']);
});
it('renders correct texts for the dropdown items', () => {
expect(findDropdownItemTexts()).toEqual([
CLUSTERS_ACTIONS.createCluster,
CLUSTERS_ACTIONS.connectClusterCertificate,
]);
});
it('renders correct href attributes for the links', () => {
expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
});
describe('when user cannot add clusters', () => {
beforeEach(() => {
createWrapper({ canAddCluster: false });
});
it('disables dropdown', () => {
expect(findDropdown().props('disabled')).toBe(true);
});
it('shows tooltip explaining why dropdown is disabled', () => {
expect(findTooltip().attributes('title')).toBe(CLUSTERS_ACTIONS.actionsDisabledHint);
});
it('does not bind split dropdown button', () => {
const binding = getBinding(findDropdown().element, 'gl-modal-directive');
expect(binding.value).toBe(false);
});
});
});
describe('when on group or admin level', () => {
beforeEach(() => {
createWrapper({ displayClusterAgents: false });
});
it("doesn't render a dropdown", () => {
expect(findDropdown().exists()).toBe(false);
});
it('render an action button', () => {
expect(findButton().exists()).toBe(true);
});
it(`displays default action as ${CLUSTERS_ACTIONS.connectClusterDeprecated}`, () => {
expect(findButton().text()).toBe(CLUSTERS_ACTIONS.connectClusterDeprecated);
});
it('renders correct href attribute for the button', () => {
expect(findButton().attributes('href')).toBe(addClusterPath);
});
describe('when user cannot add clusters', () => {
beforeEach(() => {
createWrapper({ displayClusterAgents: false, canAddCluster: false });
});
it('disables action button', () => {
expect(findButton().props('disabled')).toBe(true);
});
it('shows tooltip explaining why dropdown is disabled', () => {
expect(findTooltip().attributes('title')).toBe(CLUSTERS_ACTIONS.actionsDisabledHint);
});
});
});
});
describe('when the certificate based clusters not enabled', () => {
beforeEach(() => {
createWrapper({ certificateBasedClustersEnabled: false });
});
it(`displays default action as ${CLUSTERS_ACTIONS.connectCluster}`, () => {
expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectCluster);
});
it('renders correct modal id for the default action', () => {
const binding = getBinding(findDropdown().element, 'gl-modal-directive');
expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
});
it('renders a dropdown with 1 action item', () => {
expect(findDropdownItemIds()).toEqual(['create-cluster-link']);
});
it('renders correct text for the dropdown item', () => {
expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createCluster]);
});
it('renders correct href attributes for the links', () => {
expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
});
});
});
|
