import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor'; import Editor from '~/editor/editor_lite'; import { DEFAULT_THEME, themes } from '~/ide/lib/themes'; const URI_PREFIX = 'gitlab'; describe('Base editor', () => { let editorEl; let editor; const blobContent = 'Foo Bar'; const blobPath = 'test.md'; const blobGlobalId = 'snippet_777'; const fakeModel = { foo: 'bar', dispose: jest.fn() }; beforeEach(() => { setFixtures('
'); editorEl = document.getElementById('editor'); editor = new Editor(); }); afterEach(() => { editor.dispose(); editorEl.remove(); }); const createUri = (...paths) => Uri.file([URI_PREFIX, ...paths].join('/')); it('initializes Editor with basic properties', () => { expect(editor).toBeDefined(); expect(editor.editorEl).toBe(null); expect(editor.blobContent).toEqual(''); expect(editor.blobPath).toEqual(''); }); it('removes `editor-loading` data attribute from the target DOM element', () => { editor.createInstance({ el: editorEl }); expect(editorEl.dataset.editorLoading).toBeUndefined(); }); describe('instance of the Editor', () => { let modelSpy; let instanceSpy; let setModel; let dispose; beforeEach(() => { setModel = jest.fn(); dispose = jest.fn(); modelSpy = jest.spyOn(monacoEditor, 'createModel').mockImplementation(() => fakeModel); instanceSpy = jest.spyOn(monacoEditor, 'create').mockImplementation(() => ({ setModel, dispose, })); }); it('does nothing if no dom element is supplied', () => { editor.createInstance(); expect(editor.editorEl).toBe(null); expect(editor.blobContent).toEqual(''); expect(editor.blobPath).toEqual(''); expect(modelSpy).not.toHaveBeenCalled(); expect(instanceSpy).not.toHaveBeenCalled(); expect(setModel).not.toHaveBeenCalled(); }); it('creates model to be supplied to Monaco editor', () => { editor.createInstance({ el: editorEl, blobPath, blobContent }); expect(modelSpy).toHaveBeenCalledWith(blobContent, undefined, createUri(blobPath)); expect(setModel).toHaveBeenCalledWith(fakeModel); }); it('initializes the instance on a supplied DOM node', () => { editor.createInstance({ el: editorEl }); expect(editor.editorEl).not.toBe(null); expect(instanceSpy).toHaveBeenCalledWith(editorEl, expect.anything()); }); it('with blobGlobalId, creates model with id in uri', () => { editor.createInstance({ el: editorEl, blobPath, blobContent, blobGlobalId }); expect(modelSpy).toHaveBeenCalledWith( blobContent, undefined, createUri(blobGlobalId, blobPath), ); }); }); describe('implementation', () => { beforeEach(() => { editor.createInstance({ el: editorEl, blobPath, blobContent }); }); it('correctly proxies value from the model', () => { expect(editor.getValue()).toEqual(blobContent); }); it('is capable of changing the language of the model', () => { // ignore warnings and errors Monaco posts during setup // (due to being called from Jest/Node.js environment) jest.spyOn(console, 'warn').mockImplementation(() => {}); jest.spyOn(console, 'error').mockImplementation(() => {}); const blobRenamedPath = 'test.js'; expect(editor.model.getLanguageIdentifier().language).toEqual('markdown'); editor.updateModelLanguage(blobRenamedPath); expect(editor.model.getLanguageIdentifier().language).toEqual('javascript'); }); it('falls back to plaintext if there is no language associated with an extension', () => { const blobRenamedPath = 'test.myext'; const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); editor.updateModelLanguage(blobRenamedPath); expect(spy).not.toHaveBeenCalled(); expect(editor.model.getLanguageIdentifier().language).toEqual('plaintext'); }); }); describe('extensions', () => { const foo1 = jest.fn(); const foo2 = jest.fn(); const bar = jest.fn(); const MyExt1 = { foo: foo1, }; const MyExt2 = { bar, }; const MyExt3 = { foo: foo2, }; beforeEach(() => { editor.createInstance({ el: editorEl, blobPath, blobContent }); }); it('is extensible with the extensions', () => { expect(editor.foo).toBeUndefined(); editor.use(MyExt1); expect(editor.foo).toEqual(foo1); }); it('does not fail if no extensions supplied', () => { const spy = jest.spyOn(global.console, 'error'); editor.use(); expect(spy).not.toHaveBeenCalled(); }); it('is extensible with multiple extensions', () => { expect(editor.foo).toBeUndefined(); expect(editor.bar).toBeUndefined(); editor.use([MyExt1, MyExt2]); expect(editor.foo).toEqual(foo1); expect(editor.bar).toEqual(bar); }); it('uses the last definition of a method in case of an overlap', () => { editor.use([MyExt1, MyExt2, MyExt3]); expect(editor).toEqual( expect.objectContaining({ foo: foo2, bar, }), ); }); it('correctly resolves references withing extensions', () => { const FunctionExt = { inst() { return this.instance; }, mod() { return this.model; }, }; editor.use(FunctionExt); expect(editor.inst()).toEqual(editor.instance); expect(editor.mod()).toEqual(editor.model); }); }); describe('languages', () => { it('registers custom languages defined with Monaco', () => { expect(monacoLanguages.getLanguages()).toEqual( expect.arrayContaining([ expect.objectContaining({ id: 'vue', }), ]), ); }); }); describe('syntax highlighting theme', () => { let themeDefineSpy; let themeSetSpy; let defaultScheme; beforeEach(() => { themeDefineSpy = jest.spyOn(monacoEditor, 'defineTheme').mockImplementation(() => {}); themeSetSpy = jest.spyOn(monacoEditor, 'setTheme').mockImplementation(() => {}); defaultScheme = window.gon.user_color_scheme; }); afterEach(() => { window.gon.user_color_scheme = defaultScheme; }); it('sets default syntax highlighting theme', () => { const expectedTheme = themes.find(t => t.name === DEFAULT_THEME); editor = new Editor(); expect(themeDefineSpy).toHaveBeenCalledWith(DEFAULT_THEME, expectedTheme.data); expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME); }); it('sets correct theme if it is set in users preferences', () => { const expectedTheme = themes.find(t => t.name !== DEFAULT_THEME); expect(expectedTheme.name).not.toBe(DEFAULT_THEME); window.gon.user_color_scheme = expectedTheme.name; editor = new Editor(); expect(themeDefineSpy).toHaveBeenCalledWith(expectedTheme.name, expectedTheme.data); expect(themeSetSpy).toHaveBeenCalledWith(expectedTheme.name); }); it('falls back to default theme if a selected one is not supported yet', () => { const name = 'non-existent-theme'; const nonExistentTheme = { name }; window.gon.user_color_scheme = nonExistentTheme.name; editor = new Editor(); expect(themeDefineSpy).not.toHaveBeenCalled(); expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME); }); }); });