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 { GlAlert } from '@gitlab/ui';
import { sprintf } from '~/locale';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
import { EXCEEDS_VARIABLE_LIMIT_TEXT, projectString } from '~/ci_variable_list/constants';
import { mockVariables } from '../mocks';
describe('Ci variable table', () => {
let wrapper;
const defaultProps = {
entity: 'project',
isLoading: false,
maxVariableLimit: mockVariables(projectString).length + 1,
variables: mockVariables(projectString),
};
const mockMaxVariableLimit = defaultProps.variables.length;
const createComponent = ({ props = {} } = {}) => {
wrapper = mountExtended(CiVariableTable, {
attachTo: document.body,
propsData: {
...defaultProps,
...props,
},
});
};
const findRevealButton = () => wrapper.findByText('Reveal values');
const findAddButton = () => wrapper.findByLabelText('Add');
const findEditButton = () => wrapper.findByLabelText('Edit');
const findEmptyVariablesPlaceholder = () => wrapper.findByText('There are no variables yet.');
const findHiddenValues = () => wrapper.findAllByTestId('hiddenValue');
const findLimitReachedAlerts = () => wrapper.findAllComponents(GlAlert);
const findRevealedValues = () => wrapper.findAllByTestId('revealedValue');
const findOptionsValues = (rowIndex) =>
wrapper.findAllByTestId('ci-variable-table-row-options').at(rowIndex).text();
const generateExceedsVariableLimitText = (entity, currentVariableCount, maxVariableLimit) => {
return sprintf(EXCEEDS_VARIABLE_LIMIT_TEXT, { entity, currentVariableCount, maxVariableLimit });
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('When table is empty', () => {
beforeEach(() => {
createComponent({ props: { variables: [] } });
});
it('displays empty message', () => {
expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
});
it('hides the reveal button', () => {
expect(findRevealButton().exists()).toBe(false);
});
});
describe('When table has variables', () => {
beforeEach(() => {
createComponent();
});
it('does not display the empty message', () => {
expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
});
it('displays the reveal button', () => {
expect(findRevealButton().exists()).toBe(true);
});
it('displays the correct amount of variables', async () => {
expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(defaultProps.variables.length);
});
it('displays the correct variable options', async () => {
expect(findOptionsValues(0)).toBe('Protected, Expanded');
expect(findOptionsValues(1)).toBe('Masked');
});
it('enables the Add Variable button', () => {
expect(findAddButton().props('disabled')).toBe(false);
});
});
describe('When variables have exceeded the max limit', () => {
beforeEach(() => {
createComponent({ props: { maxVariableLimit: mockVariables(projectString).length } });
});
it('disables the Add Variable button', () => {
expect(findAddButton().props('disabled')).toBe(true);
});
});
describe('max limit reached alert', () => {
describe('when there is no variable limit', () => {
beforeEach(() => {
createComponent({
props: { maxVariableLimit: 0 },
});
});
it('hides alert', () => {
expect(findLimitReachedAlerts().length).toBe(0);
});
});
describe('when variable limit exists', () => {
it('hides alert when limit has not been reached', () => {
createComponent();
expect(findLimitReachedAlerts().length).toBe(0);
});
it('shows alert when limit has been reached', () => {
const exceedsVariableLimitText = generateExceedsVariableLimitText(
defaultProps.entity,
defaultProps.variables.length,
mockMaxVariableLimit,
);
createComponent({
props: { maxVariableLimit: mockMaxVariableLimit },
});
expect(findLimitReachedAlerts().length).toBe(2);
expect(findLimitReachedAlerts().at(0).props('dismissible')).toBe(false);
expect(findLimitReachedAlerts().at(0).text()).toContain(exceedsVariableLimitText);
expect(findLimitReachedAlerts().at(1).props('dismissible')).toBe(false);
expect(findLimitReachedAlerts().at(1).text()).toContain(exceedsVariableLimitText);
});
});
});
describe('Table click actions', () => {
beforeEach(() => {
createComponent();
});
it('reveals secret values when button is clicked', async () => {
expect(findHiddenValues()).toHaveLength(defaultProps.variables.length);
expect(findRevealedValues()).toHaveLength(0);
await findRevealButton().trigger('click');
expect(findHiddenValues()).toHaveLength(0);
expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
});
it('dispatches `setSelectedVariable` with correct variable to edit', async () => {
await findEditButton().trigger('click');
expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
});
it('dispatches `setSelectedVariable` with no variable when adding a new one', async () => {
await findAddButton().trigger('click');
expect(wrapper.emitted('set-selected-variable')).toEqual([[null]]);
});
});
});
|
