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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
import {
findAllByText,
fireEvent,
getByLabelText,
findByTestId,
getByText,
screen,
findByText,
} from '@testing-library/dom';
const isFolderRowOpen = (row) => row.matches('.folder.is-open');
const getLeftSidebar = () => screen.getByTestId('left-sidebar');
export const switchLeftSidebarTab = (name) => {
const sidebar = getLeftSidebar();
const button = getByLabelText(sidebar, name);
button.click();
};
export const getStatusBar = () => document.querySelector('.ide-status-bar');
export const waitForMonacoEditor = () =>
new Promise((resolve) => window.monaco.editor.onDidCreateEditor(resolve));
export const findMonacoEditor = () =>
screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-editor'));
export const findMonacoDiffEditor = () =>
screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-diff-editor'));
export const findAndSetEditorValue = async (value) => {
const editor = await findMonacoEditor();
const uri = editor.getAttribute('data-uri');
window.monaco.editor.getModel(uri).setValue(value);
};
export const getEditorValue = async () => {
const editor = await findMonacoEditor();
const uri = editor.getAttribute('data-uri');
return window.monaco.editor.getModel(uri).getValue();
};
const findTreeBody = () => screen.findByTestId('ide-tree-body');
const findRootActions = () => screen.findByTestId('ide-root-actions');
const findFileRowContainer = (row = null) =>
row ? Promise.resolve(row.parentElement) : findTreeBody();
const findFileChild = async (row, name, index = 0) => {
const container = await findFileRowContainer(row);
const children = await findAllByText(container, name, { selector: '.file-row-name' });
return children
.map((x) => x.closest('.file-row'))
.find((x) => x.dataset.level === index.toString());
};
const openFileRow = (row) => {
if (!row || isFolderRowOpen(row)) {
return;
}
row.click();
};
const findAndTraverseToPath = async (path, index = 0, row = null) => {
if (!path) {
return row;
}
const [name, ...restOfPath] = path.split('/');
openFileRow(row);
const child = await findFileChild(row, name, index);
return findAndTraverseToPath(restOfPath.join('/'), index + 1, child);
};
const clickFileRowAction = (row, name) => {
fireEvent.mouseOver(row);
const dropdownButton = getByLabelText(row, 'Create new file or directory');
dropdownButton.click();
const dropdownAction = getByLabelText(dropdownButton.parentNode, name);
dropdownAction.click();
};
const fillFileNameModal = async (value, submitText = 'Create file') => {
const modal = await screen.findByTestId('ide-new-entry');
const nameField = await findByTestId(modal, 'file-name-field');
fireEvent.input(nameField, { target: { value } });
const createButton = getByText(modal, submitText, { selector: 'button' });
createButton.click();
};
const findAndClickRootAction = async (name) => {
const container = await findRootActions();
const button = getByLabelText(container, name);
button.click();
};
export const clickPreviewMarkdown = () => {
screen.getByText('Preview Markdown').click();
};
export const openFile = async (path) => {
const row = await findAndTraverseToPath(path);
openFileRow(row);
};
export const waitForTabToOpen = (fileName) =>
findByText(document.querySelector('.multi-file-edit-pane'), fileName);
export const createFile = async (path, content) => {
const parentPath = path.split('/').slice(0, -1).join('/');
const parentRow = await findAndTraverseToPath(parentPath);
if (parentRow) {
clickFileRowAction(parentRow, 'New file');
} else {
await findAndClickRootAction('New file');
}
await fillFileNameModal(path);
await findAndSetEditorValue(content);
};
export const updateFile = async (path, content) => {
await openFile(path);
await findAndSetEditorValue(content);
};
export const getFilesList = () => {
return screen.getAllByTestId('file-row-name-container').map((e) => e.textContent.trim());
};
export const deleteFile = async (path) => {
const row = await findAndTraverseToPath(path);
clickFileRowAction(row, 'Delete');
};
export const renameFile = async (path, newPath) => {
const row = await findAndTraverseToPath(path);
clickFileRowAction(row, 'Rename/Move');
await fillFileNameModal(newPath, 'Rename file');
};
export const closeFile = async (path) => {
const button = await screen.getByLabelText(`Close ${path}`, {
selector: '.multi-file-tabs button',
});
button.click();
};
/**
* Fill out and submit the commit form in the Web IDE
*
* @param {Object} options - Used to fill out the commit form in the IDE
* @param {Boolean} options.newBranch - Flag for the "Create a new branch" radio.
* @param {Boolean} options.newMR - Flag for the "Start a new merge request" checkbox.
* @param {String} options.newBranchName - Value to put in the new branch name input field. The Web IDE supports leaving this field blank.
*/
export const commit = async ({ newBranch = false, newMR = false, newBranchName = '' } = {}) => {
switchLeftSidebarTab('Commit');
screen.getByTestId('begin-commit-button').click();
if (!newBranch) {
const option = await screen.findByLabelText(/Commit to .+ branch/);
option.click();
} else {
const option = await screen.findByLabelText('Create a new branch');
option.click();
const branchNameInput = await screen.findByTestId('ide-new-branch-name');
fireEvent.input(branchNameInput, { target: { value: newBranchName } });
const mrCheck = await screen.findByLabelText('Start a new merge request');
if (Boolean(mrCheck.checked) !== newMR) {
mrCheck.click();
}
}
screen.getByText('Commit').click();
};
|
