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
|
import { GlBreadcrumb } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { assignGitlabExperiment } from 'helpers/experimentation_helper';
import App from '~/projects/experiment_new_project_creation/components/app.vue';
import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue';
import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue';
describe('Experimental new project creation app', () => {
let wrapper;
const createComponent = (propsData) => {
wrapper = shallowMount(App, { propsData });
};
afterEach(() => {
wrapper.destroy();
window.location.hash = '';
wrapper = null;
});
const findWelcomePage = () => wrapper.findComponent(WelcomePage);
const findPanel = (panelName) =>
findWelcomePage()
.props()
.panels.find((p) => p.name === panelName);
const findPanelHeader = () => wrapper.find('h4');
describe('new_repo experiment', () => {
describe('when in the candidate variant', () => {
assignGitlabExperiment('new_repo', 'candidate');
it('has "repository" in the panel title', () => {
createComponent();
expect(findPanel('blank_project').title).toBe('Create blank project/repository');
});
describe('when hash is not empty on load', () => {
beforeEach(() => {
window.location.hash = '#blank_project';
createComponent();
});
it('renders "project/repository"', () => {
expect(findPanelHeader().text()).toBe('Create blank project/repository');
});
});
});
describe('when in the control variant', () => {
assignGitlabExperiment('new_repo', 'control');
it('has "project" in the panel title', () => {
createComponent();
expect(findPanel('blank_project').title).toBe('Create blank project');
});
describe('when hash is not empty on load', () => {
beforeEach(() => {
window.location.hash = '#blank_project';
createComponent();
});
it('renders "project"', () => {
expect(findPanelHeader().text()).toBe('Create blank project');
});
});
});
});
describe('with empty hash', () => {
beforeEach(() => {
createComponent();
});
it('renders welcome page', () => {
expect(wrapper.find(WelcomePage).exists()).toBe(true);
});
it('does not render breadcrumbs', () => {
expect(wrapper.find(GlBreadcrumb).exists()).toBe(false);
});
});
it('renders blank project container if there are errors', () => {
createComponent({ hasErrors: true });
expect(wrapper.find(WelcomePage).exists()).toBe(false);
expect(wrapper.find(LegacyContainer).exists()).toBe(true);
});
describe('when hash is not empty on load', () => {
beforeEach(() => {
window.location.hash = '#blank_project';
createComponent();
});
it('renders relevant container', () => {
expect(wrapper.find(WelcomePage).exists()).toBe(false);
expect(wrapper.find(LegacyContainer).exists()).toBe(true);
});
it('renders breadcrumbs', () => {
expect(wrapper.find(GlBreadcrumb).exists()).toBe(true);
});
});
describe('display custom new project guideline text', () => {
beforeEach(() => {
window.location.hash = '#blank_project';
});
it('does not render new project guideline if undefined', () => {
createComponent();
expect(wrapper.find('div#new-project-guideline').exists()).toBe(false);
});
it('render new project guideline if defined', () => {
const guidelineSelector = 'div#new-project-guideline';
createComponent({
newProjectGuidelines: '<h4>Internal Guidelines</h4><p>lorem ipsum</p>',
});
expect(wrapper.find(guidelineSelector).exists()).toBe(true);
expect(wrapper.find(guidelineSelector).html()).toContain('<h4>Internal Guidelines</h4>');
expect(wrapper.find(guidelineSelector).html()).toContain('<p>lorem ipsum</p>');
});
});
it('renders relevant container when hash changes', () => {
createComponent();
expect(wrapper.find(WelcomePage).exists()).toBe(true);
window.location.hash = '#blank_project';
const ev = document.createEvent('HTMLEvents');
ev.initEvent('hashchange', false, false);
window.dispatchEvent(ev);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(WelcomePage).exists()).toBe(false);
expect(wrapper.find(LegacyContainer).exists()).toBe(true);
});
});
});
|
