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
|
import MockAdapter from 'axios-mock-adapter';
import { Emitter } from 'monaco-editor';
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import waitForPromises from 'helpers/wait_for_promises';
import EditBlob from '~/blob_edit/edit_blob';
import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext';
import { SecurityPolicySchemaExtension } from '~/editor/extensions/source_editor_security_policy_schema_ext';
import { EditorMarkdownPreviewExtension } from '~/editor/extensions/source_editor_markdown_livepreview_ext';
import { ToolbarExtension } from '~/editor/extensions/source_editor_toolbar_ext';
import SourceEditor from '~/editor/source_editor';
import axios from '~/lib/utils/axios_utils';
jest.mock('~/editor/source_editor');
jest.mock('~/editor/extensions/source_editor_extension_base');
jest.mock('~/editor/extensions/source_editor_file_template_ext');
jest.mock('~/editor/extensions/source_editor_markdown_ext');
jest.mock('~/editor/extensions/source_editor_markdown_livepreview_ext');
jest.mock('~/editor/extensions/source_editor_toolbar_ext');
jest.mock('~/editor/extensions/source_editor_security_policy_schema_ext');
const PREVIEW_MARKDOWN_PATH = '/foo/bar/preview_markdown';
const defaultExtensions = [
{ definition: ToolbarExtension },
{ definition: SourceEditorExtension },
{ definition: FileTemplateExtension },
];
const markdownExtensions = [
{ definition: EditorMarkdownExtension },
{
definition: EditorMarkdownPreviewExtension,
setupOptions: { previewMarkdownPath: PREVIEW_MARKDOWN_PATH },
},
];
describe('Blob Editing', () => {
let blobInstance;
let mock;
const useMock = jest.fn(() => markdownExtensions);
const unuseMock = jest.fn();
const emitter = new Emitter();
const mockInstance = {
use: useMock,
unuse: unuseMock,
setValue: jest.fn(),
getValue: jest.fn().mockReturnValue('test value'),
focus: jest.fn(),
onDidChangeModelLanguage: emitter.event,
updateModelLanguage: jest.fn(),
};
beforeEach(() => {
mock = new MockAdapter(axios);
setHTMLFixture(`
<div class="js-edit-mode-pane"></div>
<div class="js-edit-mode"><a href="#write">Write</a><a href="#preview">Preview</a></div>
<form class="js-edit-blob-form">
<div id="file_path"></div>
<div id="editor"></div>
<textarea id="file-content"></textarea>
</form>
`);
jest.spyOn(SourceEditor.prototype, 'createInstance').mockReturnValue(mockInstance);
});
afterEach(() => {
mock.restore();
unuseMock.mockClear();
useMock.mockClear();
resetHTMLFixture();
});
const editorInst = ({ isMarkdown = false, isSecurityPolicy = false }) => {
blobInstance = new EditBlob({
isMarkdown,
previewMarkdownPath: PREVIEW_MARKDOWN_PATH,
filePath: isSecurityPolicy ? '.gitlab/security-policies/policy.yml' : '',
projectPath: 'path/to/project',
});
return blobInstance;
};
const initEditor = async ({ isMarkdown = false, isSecurityPolicy = false } = {}) => {
editorInst({ isMarkdown, isSecurityPolicy });
await waitForPromises();
};
it('loads SourceEditorExtension and FileTemplateExtension by default', async () => {
await initEditor();
expect(useMock).toHaveBeenCalledWith(defaultExtensions);
});
describe('Markdown', () => {
it('does not load MarkdownExtensions by default', async () => {
await initEditor();
expect(EditorMarkdownExtension).not.toHaveBeenCalled();
expect(EditorMarkdownPreviewExtension).not.toHaveBeenCalled();
});
it('loads MarkdownExtension only for the markdown files', async () => {
await initEditor({ isMarkdown: true });
expect(useMock).toHaveBeenCalledTimes(2);
expect(useMock.mock.calls[1]).toEqual([markdownExtensions]);
});
it('correctly handles switching from markdown and un-uses markdown extensions', async () => {
await initEditor({ isMarkdown: true });
expect(unuseMock).not.toHaveBeenCalled();
await emitter.fire({ newLanguage: 'plaintext', oldLanguage: 'markdown' });
expect(unuseMock).toHaveBeenCalledWith(markdownExtensions);
});
it('correctly handles switching from non-markdown to markdown extensions', async () => {
const mdSpy = jest.fn();
await initEditor();
blobInstance.fetchMarkdownExtension = mdSpy;
expect(mdSpy).not.toHaveBeenCalled();
await emitter.fire({ newLanguage: 'markdown', oldLanguage: 'plaintext' });
expect(mdSpy).toHaveBeenCalled();
});
});
describe('Security Policy Yaml', () => {
it('does not load SecurityPolicySchemaExtension by default', async () => {
await initEditor();
expect(SecurityPolicySchemaExtension).not.toHaveBeenCalled();
});
it('loads SecurityPolicySchemaExtension only for the security policies yml', async () => {
await initEditor({ isSecurityPolicy: true });
expect(useMock).toHaveBeenCalledTimes(2);
expect(useMock.mock.calls[1]).toEqual([[{ definition: SecurityPolicySchemaExtension }]]);
});
});
describe('correctly handles toggling the live-preview panel for different file types', () => {
it.each`
desc | isMarkdown | isPreviewOpened | tabToClick | shouldOpenPreview | shouldClosePreview | expectedDesc
${'not markdown with preview closed'} | ${false} | ${false} | ${'#write'} | ${false} | ${false} | ${'not toggle preview'}
${'not markdown with preview closed'} | ${false} | ${false} | ${'#preview'} | ${false} | ${false} | ${'not toggle preview'}
${'markdown with preview closed'} | ${true} | ${false} | ${'#write'} | ${false} | ${false} | ${'not toggle preview'}
${'markdown with preview closed'} | ${true} | ${false} | ${'#preview'} | ${true} | ${false} | ${'open preview'}
${'markdown with preview opened'} | ${true} | ${true} | ${'#write'} | ${false} | ${true} | ${'close preview'}
${'markdown with preview opened'} | ${true} | ${true} | ${'#preview'} | ${false} | ${false} | ${'not toggle preview'}
`(
'when $desc, clicking $tabToClick should $expectedDesc',
async ({
isMarkdown,
isPreviewOpened,
tabToClick,
shouldOpenPreview,
shouldClosePreview,
}) => {
const fire = jest.fn();
SourceEditor.prototype.createInstance = jest.fn().mockReturnValue({
...mockInstance,
markdownPreview: {
eventEmitter: {
fire,
},
},
});
await initEditor({ isMarkdown });
blobInstance.markdownLivePreviewOpened = isPreviewOpened;
const elToClick = document.querySelector(`a[href='${tabToClick}']`);
elToClick.dispatchEvent(new Event('click'));
if (shouldOpenPreview || shouldClosePreview) {
expect(fire).toHaveBeenCalled();
} else {
expect(fire).not.toHaveBeenCalled();
}
},
);
});
it('adds trailing newline to the blob content on submit', async () => {
const form = document.querySelector('.js-edit-blob-form');
const fileContentEl = document.getElementById('file-content');
await initEditor();
form.dispatchEvent(new Event('submit'));
expect(fileContentEl.value).toBe('test value\n');
});
});
|
