debian-mirror-gitlab/spec/frontend/snippet/snippet_bundle_spec.js

86 lines
2.3 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import Editor from '~/editor/editor_lite';
2020-05-24 23:13:21 +05:30
import initEditor from '~/snippet/snippet_bundle';
2020-04-08 14:13:33 +05:30
import { setHTMLFixture } from 'helpers/fixtures';
jest.mock('~/editor/editor_lite', () => jest.fn());
describe('Snippet editor', () => {
2020-05-24 23:13:21 +05:30
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,
2020-04-08 14:13:33 +05:30
});
2020-05-24 23:13:21 +05:30
}
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
beforeEach(() => {
bootstrap(mockName, mockContent);
});
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
it('correctly initializes Editor', () => {
expect(mockEditor.createInstance).toHaveBeenCalledWith({
el: editorEl,
blobPath: mockName,
blobContent: mockContent,
2020-04-08 14:13:33 +05:30
});
2020-05-24 23:13:21 +05:30
});
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
it('listens to file name changes and updates syntax highlighting of code', () => {
expect(mockEditor.updateModelLanguage).not.toHaveBeenCalled();
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
const event = createEvent('change');
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
fileNameEl.value = updatedMockContent;
fileNameEl.dispatchEvent(event);
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
expect(mockEditor.updateModelLanguage).toHaveBeenCalledWith(updatedMockContent);
});
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
it('listens to form submit event and populates the hidden field with most recent version of the content', () => {
expect(contentEl.value).toBe(mockContent);
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
const event = createEvent('submit');
2020-04-08 14:13:33 +05:30
2020-05-24 23:13:21 +05:30
form.dispatchEvent(event);
expect(contentEl.value).toBe(updatedMockContent);
2020-04-08 14:13:33 +05:30
});
});