95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
|
import Editor from '~/editor/editor_lite';
|
||
|
|
import { initEditor } from '~/snippet/snippet_bundle';
|
||
|
|
import { setHTMLFixture } from 'helpers/fixtures';
|
||
|
|
|
||
|
|
jest.mock('~/editor/editor_lite', () => jest.fn());
|
||
|
|
|
||
|
|
describe('Snippet editor', () => {
|
||
|
|
describe('Monaco editor for Snippets', () => {
|
||
|
|
let oldGon;
|
||
|
|
let editorEl;
|
||
|
|
let contentEl;
|
||
|
|
let fileNameEl;
|
||
|
|
let form;
|
||
|
|
|
||
|
|
const mockName = 'foo.bar';
|
||
|
|
const mockContent = 'Foo Bar';
|
||
|
|
const updatedMockContent = 'New Foo Bar';
|
||
|
|
|
||
|
|
const mockEditor = {
|
||
|
|
createInstance: jest.fn(),
|
||
|
|
updateModelLanguage: jest.fn(),
|
||
|
|
getValue: jest.fn().mockReturnValueOnce(updatedMockContent),
|
||
|
|
};
|
||
|
|
Editor.mockImplementation(() => mockEditor);
|
||
|
|
|
||
|
|
function setUpFixture(name, content) {
|
||
|
|
setHTMLFixture(`
|
||
|
|
<div class="snippet-form-holder">
|
||
|
|
<form>
|
||
|
|
<input class="js-snippet-file-name" type="text" value="${name}">
|
||
|
|
<input class="snippet-file-content" type="hidden" value="${content}">
|
||
|
|
<pre id="editor"></pre>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function bootstrap(name = '', content = '') {
|
||
|
|
setUpFixture(name, content);
|
||
|
|
editorEl = document.getElementById('editor');
|
||
|
|
contentEl = document.querySelector('.snippet-file-content');
|
||
|
|
fileNameEl = document.querySelector('.js-snippet-file-name');
|
||
|
|
form = document.querySelector('.snippet-form-holder form');
|
||
|
|
|
||
|
|
initEditor();
|
||
|
|
}
|
||
|
|
|
||
|
|
function createEvent(name) {
|
||
|
|
return new Event(name, {
|
||
|
|
view: window,
|
||
|
|
bubbles: true,
|
||
|
|
cancelable: true,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
oldGon = window.gon;
|
||
|
|
window.gon = { features: { monacoSnippets: true } };
|
||
|
|
bootstrap(mockName, mockContent);
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
window.gon = oldGon;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('correctly initializes Editor', () => {
|
||
|
|
expect(mockEditor.createInstance).toHaveBeenCalledWith({
|
||
|
|
el: editorEl,
|
||
|
|
blobPath: mockName,
|
||
|
|
blobContent: mockContent,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('listens to file name changes and updates syntax highlighting of code', () => {
|
||
|
|
expect(mockEditor.updateModelLanguage).not.toHaveBeenCalled();
|
||
|
|
|
||
|
|
const event = createEvent('change');
|
||
|
|
|
||
|
|
fileNameEl.value = updatedMockContent;
|
||
|
|
fileNameEl.dispatchEvent(event);
|
||
|
|
|
||
|
|
expect(mockEditor.updateModelLanguage).toHaveBeenCalledWith(updatedMockContent);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('listens to form submit event and populates the hidden field with most recent version of the content', () => {
|
||
|
|
expect(contentEl.value).toBe(mockContent);
|
||
|
|
|
||
|
|
const event = createEvent('submit');
|
||
|
|
|
||
|
|
form.dispatchEvent(event);
|
||
|
|
expect(contentEl.value).toBe(updatedMockContent);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|