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
|
import { shallowMount } from '@vue/test-utils';
import { GlButton, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import Success from '~/static_site_editor/pages/success.vue';
import { savedContentMeta, returnUrl, sourcePath } from '../mock_data';
import { HOME_ROUTE } from '~/static_site_editor/router/constants';
describe('~/static_site_editor/pages/success.vue', () => {
const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
let wrapper;
let router;
const buildRouter = () => {
router = {
push: jest.fn(),
};
};
const buildWrapper = (data = {}, appData = {}) => {
wrapper = shallowMount(Success, {
mocks: {
$router: router,
},
stubs: {
GlButton,
GlEmptyState,
GlLoadingIcon,
},
propsData: {
mergeRequestsIllustrationPath,
},
data() {
return {
savedContentMeta,
appData: {
returnUrl,
sourcePath,
hasSubmittedChanges: true,
...appData,
},
...data,
};
},
});
};
const findReturnUrlButton = () => wrapper.find(GlButton);
const findEmptyState = () => wrapper.find(GlEmptyState);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
beforeEach(() => {
buildRouter();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when savedContentMeta is valid', () => {
it('renders empty state with a link to the created merge request', () => {
buildWrapper();
expect(findEmptyState().exists()).toBe(true);
expect(findEmptyState().props()).toMatchObject({
primaryButtonText: 'View merge request',
primaryButtonLink: savedContentMeta.mergeRequest.url,
title: 'Your merge request has been created',
svgPath: mergeRequestsIllustrationPath,
svgHeight: 146,
});
});
it('displays merge request instructions in the empty state', () => {
buildWrapper();
expect(findEmptyState().text()).toContain(
'To see your changes live you will need to do the following things:',
);
expect(findEmptyState().text()).toContain('1. Add a clear title to describe the change.');
expect(findEmptyState().text()).toContain(
'2. Add a description to explain why the change is being made.',
);
expect(findEmptyState().text()).toContain(
'3. Assign a person to review and accept the merge request.',
);
});
it('displays return to site button', () => {
buildWrapper();
expect(findReturnUrlButton().text()).toBe('Return to site');
expect(findReturnUrlButton().attributes().href).toBe(returnUrl);
});
it('displays source path', () => {
buildWrapper();
expect(wrapper.text()).toContain(`Update ${sourcePath} file`);
});
});
describe('when savedContentMeta is invalid', () => {
it('renders empty state with a loader', () => {
buildWrapper({ savedContentMeta: null });
expect(findEmptyState().exists()).toBe(true);
expect(findEmptyState().props()).toMatchObject({
title: 'Creating your merge request',
svgPath: mergeRequestsIllustrationPath,
});
expect(findLoadingIcon().exists()).toBe(true);
});
it('displays helper info in the empty state', () => {
buildWrapper({ savedContentMeta: null });
expect(findEmptyState().text()).toContain(
'You can set an assignee to get your changes reviewed and deployed once your merge request is created',
);
expect(findEmptyState().text()).toContain(
'A link to view the merge request will appear once ready',
);
});
it('redirects to the HOME route when content has not been submitted', () => {
buildWrapper({ savedContentMeta: null }, { hasSubmittedChanges: false });
expect(router.push).toHaveBeenCalledWith(HOME_ROUTE);
});
});
});
|
