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
|
import { shallowMount } from '@vue/test-utils';
import ActionsButton from '~/vue_shared/components/actions_button.vue';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
const TEST_EDIT_URL = '/gitlab-test/test/-/edit/main/';
const TEST_WEB_IDE_URL = '/-/ide/project/gitlab-test/test/edit/main/-/';
const TEST_GITPOD_URL = 'https://gitpod.test/';
const ACTION_EDIT = {
href: TEST_EDIT_URL,
key: 'edit',
text: 'Edit',
secondaryText: 'Edit this file only.',
tooltip: '',
attrs: {
'data-qa-selector': 'edit_button',
'data-track-action': 'click_consolidated_edit',
'data-track-label': 'edit',
},
};
const ACTION_EDIT_CONFIRM_FORK = {
...ACTION_EDIT,
href: '#modal-confirm-fork-edit',
handle: expect.any(Function),
};
const ACTION_WEB_IDE = {
href: TEST_WEB_IDE_URL,
key: 'webide',
secondaryText: 'Quickly and easily edit multiple files in your project.',
tooltip: '',
text: 'Web IDE',
attrs: {
'data-qa-selector': 'web_ide_button',
'data-track-action': 'click_consolidated_edit_ide',
'data-track-label': 'web_ide',
},
};
const ACTION_WEB_IDE_CONFIRM_FORK = {
...ACTION_WEB_IDE,
href: '#modal-confirm-fork-webide',
handle: expect.any(Function),
};
const ACTION_WEB_IDE_EDIT_FORK = { ...ACTION_WEB_IDE, text: 'Edit fork in Web IDE' };
const ACTION_GITPOD = {
href: TEST_GITPOD_URL,
key: 'gitpod',
secondaryText: 'Launch a ready-to-code development environment for your project.',
tooltip: 'Launch a ready-to-code development environment for your project.',
text: 'Gitpod',
attrs: {
'data-qa-selector': 'gitpod_button',
},
};
const ACTION_GITPOD_ENABLE = {
...ACTION_GITPOD,
href: '#modal-enable-gitpod',
handle: expect.any(Function),
};
describe('Web IDE link component', () => {
let wrapper;
function createComponent(props) {
wrapper = shallowMount(WebIdeLink, {
propsData: {
editUrl: TEST_EDIT_URL,
webIdeUrl: TEST_WEB_IDE_URL,
gitpodUrl: TEST_GITPOD_URL,
...props,
},
});
}
afterEach(() => {
wrapper.destroy();
});
const findActionsButton = () => wrapper.find(ActionsButton);
const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
it.each([
{
props: {},
expectedActions: [ACTION_WEB_IDE, ACTION_EDIT],
},
{
props: { isFork: true },
expectedActions: [ACTION_WEB_IDE_EDIT_FORK, ACTION_EDIT],
},
{
props: { needsToFork: true },
expectedActions: [ACTION_WEB_IDE_CONFIRM_FORK, ACTION_EDIT_CONFIRM_FORK],
},
{
props: { showWebIdeButton: false, showGitpodButton: true, gitpodEnabled: true },
expectedActions: [ACTION_EDIT, ACTION_GITPOD],
},
{
props: { showWebIdeButton: false, showGitpodButton: true, gitpodEnabled: false },
expectedActions: [ACTION_EDIT, ACTION_GITPOD_ENABLE],
},
{
props: { showGitpodButton: true, gitpodEnabled: false },
expectedActions: [ACTION_WEB_IDE, ACTION_EDIT, ACTION_GITPOD_ENABLE],
},
{
props: { showEditButton: false },
expectedActions: [ACTION_WEB_IDE],
},
])('renders actions with appropriately for given props', ({ props, expectedActions }) => {
createComponent(props);
expect(findActionsButton().props('actions')).toEqual(expectedActions);
});
describe('with multiple actions', () => {
beforeEach(() => {
createComponent({
showEditButton: false,
showWebIdeButton: true,
showGitpodButton: true,
gitpodEnabled: true,
});
});
it('selected Web IDE by default', () => {
expect(findActionsButton().props()).toMatchObject({
actions: [ACTION_WEB_IDE, ACTION_GITPOD],
selectedKey: ACTION_WEB_IDE.key,
});
});
it('should set selection with local storage value', async () => {
expect(findActionsButton().props('selectedKey')).toBe(ACTION_WEB_IDE.key);
findLocalStorageSync().vm.$emit('input', ACTION_GITPOD.key);
await wrapper.vm.$nextTick();
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
});
it('should update local storage when selection changes', async () => {
expect(findLocalStorageSync().props('value')).toBe(ACTION_WEB_IDE.key);
findActionsButton().vm.$emit('select', ACTION_GITPOD.key);
await wrapper.vm.$nextTick();
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
expect(findLocalStorageSync().props('value')).toBe(ACTION_GITPOD.key);
});
});
});
|
