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
|
import { GlFormInput, GlFormSelect } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import FlexibleRollout from '~/feature_flags/components/strategies/flexible_rollout.vue';
import ParameterFormGroup from '~/feature_flags/components/strategies/parameter_form_group.vue';
import { PERCENT_ROLLOUT_GROUP_ID } from '~/feature_flags/constants';
import { flexibleRolloutStrategy } from '../../mock_data';
const DEFAULT_PROPS = {
strategy: flexibleRolloutStrategy,
};
describe('feature_flags/components/strategies/flexible_rollout.vue', () => {
let wrapper;
let percentageFormGroup;
let percentageInput;
let stickinessFormGroup;
let stickinessSelect;
const factory = (props = {}) =>
mount(FlexibleRollout, { propsData: { ...DEFAULT_PROPS, ...props } });
afterEach(() => {
if (wrapper?.destroy) {
wrapper.destroy();
}
wrapper = null;
});
describe('with valid percentage', () => {
beforeEach(() => {
wrapper = factory();
percentageFormGroup = wrapper
.find('[data-testid="strategy-flexible-rollout-percentage"]')
.find(ParameterFormGroup);
percentageInput = percentageFormGroup.find(GlFormInput);
stickinessFormGroup = wrapper
.find('[data-testid="strategy-flexible-rollout-stickiness"]')
.find(ParameterFormGroup);
stickinessSelect = stickinessFormGroup.find(GlFormSelect);
});
it('displays the current percentage value', () => {
expect(percentageInput.element.value).toBe(flexibleRolloutStrategy.parameters.rollout);
});
it('displays the current stickiness value', () => {
expect(stickinessSelect.element.value).toBe(flexibleRolloutStrategy.parameters.stickiness);
});
it('emits a change when the percentage value changes', async () => {
percentageInput.setValue('75');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('change')).toEqual([
[
{
parameters: {
rollout: '75',
groupId: PERCENT_ROLLOUT_GROUP_ID,
stickiness: flexibleRolloutStrategy.parameters.stickiness,
},
},
],
]);
});
it('emits a change when the stickiness value changes', async () => {
stickinessSelect.setValue('USERID');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('change')).toEqual([
[
{
parameters: {
rollout: flexibleRolloutStrategy.parameters.rollout,
groupId: PERCENT_ROLLOUT_GROUP_ID,
stickiness: 'USERID',
},
},
],
]);
});
it('does not show errors', () => {
expect(percentageFormGroup.attributes('state')).toBe('true');
});
});
describe('with percentage that is out of range', () => {
beforeEach(() => {
wrapper = factory({ strategy: { parameters: { rollout: '101' } } });
});
it('shows errors', () => {
const formGroup = wrapper
.find('[data-testid="strategy-flexible-rollout-percentage"]')
.find(ParameterFormGroup);
expect(formGroup.attributes('state')).toBeUndefined();
});
});
describe('with percentage that is not an integer number', () => {
beforeEach(() => {
wrapper = factory({ strategy: { parameters: { rollout: '3.14' } } });
});
it('shows errors', () => {
const formGroup = wrapper
.find('[data-testid="strategy-flexible-rollout-percentage"]')
.find(ParameterFormGroup);
expect(formGroup.attributes('state')).toBeUndefined();
});
});
});
|
