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
|
import { screen } from '@testing-library/dom';
import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
import * as ideHelper from './helpers/ide_helper';
import startWebIDE from './helpers/start';
describe('IDE: User opens IDE', () => {
useOverclockTimers();
let vm;
let container;
beforeEach(() => {
setFixtures('<div class="webide-container"></div>');
container = document.querySelector('.webide-container');
});
afterEach(() => {
vm.$destroy();
vm = null;
});
it('shows loading indicator while the IDE is loading', async () => {
vm = startWebIDE(container);
expect(container.querySelectorAll('.multi-file-loading-container')).toHaveLength(3);
});
describe('when the project is empty', () => {
beforeEach(() => {
vm = startWebIDE(container, { isRepoEmpty: true });
});
it('shows "No files" in the left sidebar', async () => {
expect(await screen.findByText('No files')).toBeDefined();
});
it('shows a "New file" button', async () => {
const button = await screen.findByTitle('New file');
expect(button.tagName).toEqual('BUTTON');
});
});
describe('when the file tree is loaded', () => {
beforeEach(async () => {
vm = startWebIDE(container);
await screen.findByText('README'); // wait for file tree to load
});
it('shows a list of files in the left sidebar', async () => {
expect(ideHelper.getFilesList()).toEqual(
expect.arrayContaining(['README', 'LICENSE', 'CONTRIBUTING.md']),
);
});
it('shows empty state in the main editor window', async () => {
expect(
await screen.findByText(
"Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes.",
),
).toBeDefined();
});
it('shows commit button in disabled state', async () => {
const button = await screen.findByTestId('begin-commit-button');
expect(button.getAttribute('disabled')).toBeDefined();
});
it('shows branch/MR dropdown with master selected', async () => {
const dropdown = await screen.findByTestId('ide-nav-dropdown');
expect(dropdown.textContent).toContain('master');
});
});
describe('a path to a text file is present in the URL', () => {
beforeEach(async () => {
vm = startWebIDE(container, { path: 'README.md' });
await ideHelper.waitForTabToOpen('README.md');
});
it('opens the file and its contents are shown in Monaco', async () => {
expect(await ideHelper.getEditorValue()).toContain('Sample repo for testing gitlab features');
});
});
describe('a path to a binary file is present in the URL', () => {
beforeEach(async () => {
vm = startWebIDE(container, { path: 'Gemfile.zip' });
await ideHelper.waitForTabToOpen('Gemfile.zip');
});
it('shows download viewer', async () => {
const downloadButton = await screen.findByText('Download');
expect(downloadButton.getAttribute('download')).toEqual('Gemfile.zip');
expect(downloadButton.getAttribute('href')).toContain('/raw/');
});
});
describe('a path to an image is present in the URL', () => {
beforeEach(async () => {
vm = startWebIDE(container, { path: 'files/images/logo-white.png' });
await ideHelper.waitForTabToOpen('logo-white.png');
});
it('shows image viewer', async () => {
const viewer = await screen.findByTestId('image-viewer');
const img = viewer.querySelector('img');
expect(img.src).toContain('logo-white.png');
});
});
describe('path in URL is a directory', () => {
beforeEach(async () => {
vm = startWebIDE(container, { path: 'files/images' });
// wait for folders in left sidebar to be expanded
await screen.findByText('images');
});
it('expands folders in the left sidebar', () => {
expect(ideHelper.getFilesList()).toEqual(
expect.arrayContaining(['files', 'images', 'logo-white.png', 'logo-black.png']),
);
});
it('shows empty state in the main editor window', async () => {
expect(
await screen.findByText(
"Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes.",
),
).toBeDefined();
});
});
describe("a file for path in url doesn't exist in the repo", () => {
beforeEach(async () => {
vm = startWebIDE(container, { path: 'abracadabra/hocus-focus.txt' });
await ideHelper.waitForTabToOpen('hocus-focus.txt');
});
it('create new folders and file in the left sidebar', () => {
expect(ideHelper.getFilesList()).toEqual(
expect.arrayContaining(['abracadabra', 'hocus-focus.txt']),
);
});
it('creates a blank new file', async () => {
expect(await ideHelper.getEditorValue()).toEqual('\n');
});
});
});
|
