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
|
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import ExperimentComponent from '~/experimentation/components/gitlab_experiment.vue';
const defaultProps = { name: 'experiment_name' };
const defaultSlots = {
candidate: `<p>Candidate</p>`,
control: `<p>Control</p>`,
};
describe('ExperimentComponent', () => {
const oldGon = window.gon;
let wrapper;
const createComponent = (propsData = defaultProps, slots = defaultSlots) => {
wrapper = extendedWrapper(shallowMount(ExperimentComponent, { propsData, slots }));
};
const mockVariant = (expectedVariant) => {
window.gon = { experiment: { experiment_name: { variant: expectedVariant } } };
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
window.gon = oldGon;
});
describe('when variant and experiment is set', () => {
it('renders control when it is the active variant', () => {
mockVariant('control');
createComponent();
expect(wrapper.text()).toBe('Control');
});
it('renders candidate when it is the active variant', () => {
mockVariant('candidate');
createComponent();
expect(wrapper.text()).toBe('Candidate');
});
});
describe('when variant or experiment is not set', () => {
it('renders the control slot when no variant is defined', () => {
mockVariant(undefined);
createComponent();
expect(wrapper.text()).toBe('Control');
});
it('renders nothing when behavior is not set for variant', () => {
mockVariant('non-existing-variant');
createComponent(defaultProps, { control: `<p>First</p>`, other: `<p>Other</p>` });
expect(wrapper.text()).toBe('');
});
it('renders nothing when there are no slots', () => {
mockVariant('control');
createComponent(defaultProps, {});
expect(wrapper.text()).toBe('');
});
});
});
|
