Skip to content

G
gitlab-ce
Commit 4228bd99 authored by David O'Regan's avatar David O'Regan
Browse files
Options

Merge branch '292498/webid-extension' into 'master' 

Introduce WebIDE as an extension for Editor Lite

See merge request gitlab-org/gitlab!51527
parents 03ba8c67 ceed1934
Hide whitespace changes
Inline Side-by-side
Showing with 813 additions and 602 deletions
app/assets/javascripts/editor/constants.js
View file @ 4228bd99
......@@ -16,6 +16,9 @@ export const EDITOR_READY_EVENT = 'editor-ready';
export const EDITOR_TYPE_CODE = 'vs.editor.ICodeEditor';
export const EDITOR_TYPE_DIFF = 'vs.editor.IDiffEditor';
export const EDITOR_CODE_INSTANCE_FN = 'createInstance';
export const EDITOR_DIFF_INSTANCE_FN = 'createDiffInstance';
//
// EXTENSIONS' CONSTANTS
//
......
app/assets/javascripts/editor/extensions/editor_lite_webide_ext.js 0 → 100644
View file @ 4228bd99
import { debounce } from 'lodash';
import { KeyCode, KeyMod, Range } from 'monaco-editor';
import { EDITOR_TYPE_DIFF } from '~/editor/constants';
import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
import Disposable from '~/ide/lib/common/disposable';
import { editorOptions } from '~/ide/lib/editor_options';
import keymap from '~/ide/lib/keymap.json';
const isDiffEditorType = (instance) => {
return instance.getEditorType() === EDITOR_TYPE_DIFF;
};
export const UPDATE_DIMENSIONS_DELAY = 200;
export class EditorWebIdeExtension extends EditorLiteExtension {
constructor({ instance, modelManager, ...options } = {}) {
super({
instance,
...options,
modelManager,
disposable: new Disposable(),
debouncedUpdate: debounce(() => {
instance.updateDimensions();
}, UPDATE_DIMENSIONS_DELAY),
});
window.addEventListener('resize', instance.debouncedUpdate, false);
instance.onDidDispose(() => {
window.removeEventListener('resize', instance.debouncedUpdate);
// catch any potential errors with disposing the error
// this is mainly for tests caused by elements not existing
try {
instance.disposable.dispose();
} catch (e) {
if (process.env.NODE_ENV !== 'test') {
// eslint-disable-next-line no-console
console.error(e);
}
}
});
EditorWebIdeExtension.addActions(instance);
}
static addActions(instance) {
const { store } = instance;
const getKeyCode = (key) => {
const monacoKeyMod = key.indexOf('KEY_') === 0;
return monacoKeyMod ? KeyCode[key] : KeyMod[key];
};
keymap.forEach((command) => {
const { bindings, id, label, action } = command;
const keybindings = bindings.map((binding) => {
const keys = binding.split('+');
// eslint-disable-next-line no-bitwise
return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
});
instance.addAction({
id,
label,
keybindings,
run() {
store.dispatch(action.name, action.params);
return null;
},
});
});
}
createModel(file, head = null) {
return this.modelManager.addModel(file, head);
}
attachModel(model) {
if (isDiffEditorType(this)) {
this.setModel({
original: model.getOriginalModel(),
modified: model.getModel(),
});
return;
}
this.setModel(model.getModel());
this.updateOptions(
editorOptions.reduce((acc, obj) => {
Object.keys(obj).forEach((key) => {
Object.assign(acc, {
[key]: obj[key](model),
});
});
return acc;
}, {}),
);
}
attachMergeRequestModel(model) {
this.setModel({
original: model.getBaseModel(),
modified: model.getModel(),
});
}
updateDimensions() {
this.layout();
this.updateDiffView();
}
setPos({ lineNumber, column }) {
this.revealPositionInCenter({
lineNumber,
column,
});
this.setPosition({
lineNumber,
column,
});
}
onPositionChange(cb) {
if (!this.onDidChangeCursorPosition) {
return;
}
this.disposable.add(this.onDidChangeCursorPosition((e) => cb(this, e)));
}
updateDiffView() {
if (!isDiffEditorType(this)) {
return;
}
this.updateOptions({
renderSideBySide: EditorWebIdeExtension.renderSideBySide(this.getDomNode()),
});
}
replaceSelectedText(text) {
let selection = this.getSelection();
const range = new Range(
selection.startLineNumber,
selection.startColumn,
selection.endLineNumber,
selection.endColumn,
);
this.executeEdits('', [{ range, text }]);
selection = this.getSelection();
this.setPosition({ lineNumber: selection.endLineNumber, column: selection.endColumn });
}
static renderSideBySide(domElement) {
return domElement.offsetWidth >= 700;
}
}
app/assets/javascripts/ide/components/file_templates/bar.vue
View file @ 4228bd99
......@@ -49,7 +49,9 @@ export default {
</script>
<template>
<div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
<div
class="d-flex align-items-center ide-file-templates qa-file-templates-bar gl-relative gl-z-index-1"
>
<strong class="gl-mr-3"> {{ __('File templates') }} </strong>
<dropdown
:data="templateTypes"
......
app/assets/javascripts/ide/components/repo_editor.vue
View file @ 4228bd99
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import {
EDITOR_TYPE_DIFF,
EDITOR_CODE_INSTANCE_FN,
EDITOR_DIFF_INSTANCE_FN,
} from '~/editor/constants';
import EditorLite from '~/editor/editor_lite';
import { EditorWebIdeExtension } from '~/editor/extensions/editor_lite_webide_ext';
import { deprecatedCreateFlash as flash } from '~/flash';
import ModelManager from '~/ide/lib/common/model_manager';
import { defaultDiffEditorOptions, defaultEditorOptions } from '~/ide/lib/editor_options';
import { __ } from '~/locale';
import {
WEBIDE_MARK_FILE_CLICKED,
......@@ -20,7 +29,6 @@ import {
FILE_VIEW_MODE_PREVIEW,
} from '../constants';
import eventHub from '../eventhub';
import Editor from '../lib/editor';
import { getRulesWithTraversal } from '../lib/editorconfig/parser';
import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
import { getFileEditorOrDefault } from '../stores/modules/editor/utils';
......@@ -46,6 +54,9 @@ export default {
content: '',
images: {},
rules: {},
globalEditor: null,
modelManager: new ModelManager(),
isEditorLoading: true,
};
},
computed: {
......@@ -132,6 +143,7 @@ export default {
// Compare key to allow for files opened in review mode to be cached differently
if (oldVal.key !== this.file.key) {
this.isEditorLoading = true;
this.initEditor();
if (this.currentActivityView !== leftSidebarViews.edit.name) {
......@@ -149,6 +161,7 @@ export default {
}
},
viewer() {
this.isEditorLoading = false;
if (!this.file.pending) {
this.createEditorInstance();
}
......@@ -181,11 +194,11 @@ export default {
},
},
beforeDestroy() {
this.editor.dispose();
this.globalEditor.dispose();
},
mounted() {
if (!this.editor) {
this.editor = Editor.create(this.$store, this.editorOptions);
if (!this.globalEditor) {
this.globalEditor = new EditorLite();
}
this.initEditor();
......@@ -211,8 +224,6 @@ export default {
return;
}
this.editor.clearEditor();
this.registerSchemaForFile();
Promise.all([this.fetchFileData(), this.fetchEditorconfigRules()])
......@@ -251,20 +262,45 @@ export default {
return;
}
this.editor.dispose();
const isDiff = this.viewer !== viewerTypes.edit;
const shouldDisposeEditor = isDiff !== (this.editor?.getEditorType() === EDITOR_TYPE_DIFF);
this.$nextTick(() => {
if (this.viewer === viewerTypes.edit) {
this.editor.createInstance(this.$refs.editor);
} else {
this.editor.createDiffInstance(this.$refs.editor);
if (this.editor && !shouldDisposeEditor) {
this.setupEditor();
} else {
if (this.editor && shouldDisposeEditor) {
this.editor.dispose();
}
const instanceOptions = isDiff ? defaultDiffEditorOptions : defaultEditorOptions;
const method = isDiff ? EDITOR_DIFF_INSTANCE_FN : EDITOR_CODE_INSTANCE_FN;
this.setupEditor();
});
this.editor = this.globalEditor[method]({
el: this.$refs.editor,
blobPath: this.file.path,
blobGlobalId: this.file.key,
blobContent: this.content || this.file.content,
...instanceOptions,
...this.editorOptions,
});
this.editor.use(
new EditorWebIdeExtension({
instance: this.editor,
modelManager: this.modelManager,
store: this.$store,
file: this.file,
options: this.editorOptions,
}),
);
this.$nextTick(() => {
this.setupEditor();
});
}
},
setupEditor() {
if (!this.file || !this.editor.instance || this.file.loading) return;
if (!this.file || !this.editor || this.file.loading) return;
const head = this.getStagedFile(this.file.path);
......@@ -279,6 +315,8 @@ export default {
this.editor.attachModel(this.model);
}
this.isEditorLoading = false;
this.model.updateOptions(this.rules);
this.model.onChange((model) => {
......@@ -298,7 +336,7 @@ export default {
});
});
this.editor.setPosition({
this.editor.setPos({
lineNumber: this.fileEditor.editorRow,
column: this.fileEditor.editorColumn,
});
......@@ -308,6 +346,10 @@ export default {
fileLanguage: this.model.language,
});
this.$nextTick(() => {
this.editor.updateDimensions();
});
this.$emit('editorSetup');
if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) {
eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION);
......@@ -344,7 +386,7 @@ export default {
});
},
onPaste(event) {
const editor = this.editor.instance;
const { editor } = this;
const reImage = /^image\/(png|jpg|jpeg|gif)$/;
const file = event.clipboardData.files[0];
......@@ -395,6 +437,7 @@ export default {
<a
href="javascript:void(0);"
role="button"
data-testid="edit-tab"
@click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
>
{{ __('Edit') }}
......@@ -404,6 +447,7 @@ export default {
<a
href="javascript:void(0);"
role="button"
data-testid="preview-tab"
@click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
>{{ previewMode.previewTitle }}</a
>
......@@ -414,6 +458,7 @@ export default {
<div
v-show="showEditor"
ref="editor"
:key="`content-editor`"
:class="{
'is-readonly': isCommitModeActive,
'is-deleted': file.deleted,
......@@ -421,6 +466,8 @@ export default {
}"
class="multi-file-editor-holder"
data-qa-selector="editor_container"
data-testid="editor-container"
:data-editor-loading="isEditorLoading"
@focusout="triggerFilesChange"
></div>
<content-viewer
......
app/assets/stylesheets/framework/editor-lite.scss
View file @ 4228bd99
......@@ -3,6 +3,11 @@
@include gl-display-flex;
@include gl-justify-content-center;
@include gl-align-items-center;
@include gl-z-index-0;
> * {
filter: blur(5px);
}
&::before {
content: '';
......
changelogs/unreleased/292498-webid-extension.yml 0 → 100644
View file @ 4228bd99
---
title: Introduce WebIDE as an extension for Editor Lite
merge_request: 51527
author:
type: changed
spec/frontend/ide/components/repo_editor_spec.js
View file @ 4228bd99
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { Range } from 'monaco-editor';
import { editor as monacoEditor, Range } from 'monaco-editor';
import Vue from 'vue';
import Vuex from 'vuex';
import '~/behaviors/markdown/render_gfm';
import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
import waitForPromises from 'helpers/wait_for_promises';
import waitUsingRealTimer from 'helpers/wait_using_real_timer';
import { exampleConfigs, exampleFiles } from 'jest/ide/lib/editorconfig/mock_data';
import { EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN } from '~/editor/constants';
import EditorLite from '~/editor/editor_lite';
import { EditorWebIdeExtension } from '~/editor/extensions/editor_lite_webide_ext';
import RepoEditor from '~/ide/components/repo_editor.vue';
import {
leftSidebarViews,
......@@ -13,733 +17,723 @@ import {
FILE_VIEW_MODE_PREVIEW,
viewerTypes,
} from '~/ide/constants';
import Editor from '~/ide/lib/editor';
import ModelManager from '~/ide/lib/common/model_manager';
import service from '~/ide/services';
import { createStoreOptions } from '~/ide/stores';
import axios from '~/lib/utils/axios_utils';
import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
import { file } from '../helpers';
import { exampleConfigs, exampleFiles } from '../lib/editorconfig/mock_data';
const defaultFileProps = {
...file('file.txt'),
content: 'hello world',
active: true,
tempFile: true,
};
const createActiveFile = (props) => {
return {
...defaultFileProps,
...props,
};
};
const dummyFile = {
markdown: (() =>
createActiveFile({
projectId: 'namespace/project',
path: 'sample.md',
name: 'sample.md',
}))(),
binary: (() =>
createActiveFile({
name: 'file.dat',
content: '🐱', // non-ascii binary content,
}))(),
empty: (() =>
createActiveFile({
tempFile: false,
content: '',
raw: '',
}))(),
};
const prepareStore = (state, activeFile) => {
const localState = {
openFiles: [activeFile],
projects: {
'gitlab-org/gitlab': {
branches: {
master: {
name: 'master',
commit: {
id: 'abcdefgh',
},
},
},
},
},
currentProjectId: 'gitlab-org/gitlab',
currentBranchId: 'master',
entries: {
[activeFile.path]: activeFile,
},
};
const storeOptions = createStoreOptions();
return new Vuex.Store({
...createStoreOptions(),
state: {
...storeOptions.state,
...localState,
...state,
},
});
};
describe('RepoEditor', () => {
let wrapper;
let vm;
let store;
let createInstanceSpy;
let createDiffInstanceSpy;
let createModelSpy;
const waitForEditorSetup = () =>
new Promise((resolve) => {
vm.$once('editorSetup', resolve);
});
const createComponent = () => {
if (vm) {
throw new Error('vm already exists');
}
vm = createComponentWithStore(Vue.extend(RepoEditor), store, {
file: store.state.openFiles[0],
const createComponent = async ({ state = {}, activeFile = defaultFileProps } = {}) => {
const store = prepareStore(state, activeFile);
wrapper = shallowMount(RepoEditor, {
store,
propsData: {
file: store.state.openFiles[0],
},
mocks: {
ContentViewer,
},
});
await waitForPromises();
vm = wrapper.vm;
jest.spyOn(vm, 'getFileData').mockResolvedValue();
jest.spyOn(vm, 'getRawFileData').mockResolvedValue();
vm.$mount();
};
const createOpenFile = (path) => {
const origFile = store.state.openFiles[0];
const newFile = { ...origFile, path, key: path, name: 'myfile.txt', content: 'hello world' };
store.state.entries[path] = newFile;
store.state.openFiles = [newFile];
};
const findEditor = () => wrapper.find('[data-testid="editor-container"]');
const findTabs = () => wrapper.findAll('.ide-mode-tabs .nav-links li');
const findPreviewTab = () => wrapper.find('[data-testid="preview-tab"]');
beforeEach(() => {
const f = {
...file('file.txt'),
content: 'hello world',
};
const storeOptions = createStoreOptions();
store = new Vuex.Store(storeOptions);
f.active = true;
f.tempFile = true;
store.state.openFiles.push(f);
store.state.projects = {
'gitlab-org/gitlab': {
branches: {
master: {
name: 'master',
commit: {
id: 'abcdefgh',
},
},
},
},
};
store.state.currentProjectId = 'gitlab-org/gitlab';
store.state.currentBranchId = 'master';
Vue.set(store.state.entries, f.path, f);
createInstanceSpy = jest.spyOn(EditorLite.prototype, EDITOR_CODE_INSTANCE_FN);
createDiffInstanceSpy = jest.spyOn(EditorLite.prototype, EDITOR_DIFF_INSTANCE_FN);
createModelSpy = jest.spyOn(monacoEditor, 'createModel');
jest.spyOn(service, 'getFileData').mockResolvedValue();
jest.spyOn(service, 'getRawFileData').mockResolvedValue();
});
afterEach(() => {
vm.$destroy();
vm = null;
Editor.editorInstance.dispose();
jest.clearAllMocks();
// create a new model each time, otherwise tests conflict with each other
// because of same model being used in multiple tests
// eslint-disable-next-line no-undef
monaco.editor.getModels().forEach((model) => model.dispose());
wrapper.destroy();
wrapper = null;
});
const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder');
const changeViewMode = (viewMode) =>
store.dispatch('editor/updateFileEditor', { path: vm.file.path, data: { viewMode } });
describe('default', () => {
beforeEach(() => {
createComponent();
return waitForEditorSetup();
it.each`
boolVal | textVal
${true} | ${'all'}
${false} | ${'none'}
`('sets renderWhitespace to "$textVal"', async ({ boolVal, textVal } = {}) => {
await createComponent({
state: {
renderWhitespaceInCode: boolVal,
},
});
expect(vm.editorOptions.renderWhitespace).toEqual(textVal);
});
it('sets renderWhitespace to `all`', () => {
vm.$store.state.renderWhitespaceInCode = true;
expect(vm.editorOptions.renderWhitespace).toEqual('all');
it('renders an ide container', async () => {
await createComponent();
expect(findEditor().isVisible()).toBe(true);
});
it('sets renderWhitespace to `none`', () => {
vm.$store.state.renderWhitespaceInCode = false;
it('renders only an edit tab', async () => {
await createComponent();
const tabs = findTabs();
expect(vm.editorOptions.renderWhitespace).toEqual('none');
expect(tabs).toHaveLength(1);
expect(tabs.at(0).text()).toBe('Edit');
});
});
it('renders an ide container', () => {
expect(vm.shouldHideEditor).toBeFalsy();
expect(vm.showEditor).toBe(true);
expect(findEditor()).not.toHaveCss({ display: 'none' });
});
describe('when file is markdown', () => {
let mock;
let activeFile;
it('renders only an edit tab', (done) => {
Vue.nextTick(() => {
const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
beforeEach(() => {
activeFile = dummyFile.markdown;
expect(tabs.length).toBe(1);
expect(tabs[0].textContent.trim()).toBe('Edit');
mock = new MockAdapter(axios);
done();
mock.onPost(/(.*)\/preview_markdown/).reply(200, {
body: `<p>${defaultFileProps.content}</p>`,
});
});
describe('when file is markdown', () => {
let mock;
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onPost(/(.*)\/preview_markdown/).reply(200, {
body: '<p>testing 123</p>',
});
Vue.set(vm, 'file', {
...vm.file,
projectId: 'namespace/project',
path: 'sample.md',
name: 'sample.md',
content: 'testing 123',
});
vm.$store.state.entries[vm.file.path] = vm.file;
afterEach(() => {
mock.restore();
});
return vm.$nextTick();
});
it('renders an Edit and a Preview Tab', async () => {
await createComponent({ activeFile });
const tabs = findTabs();
afterEach(() => {
mock.restore();
});
expect(tabs).toHaveLength(2);
expect(tabs.at(0).text()).toBe('Edit');
expect(tabs.at(1).text()).toBe('Preview Markdown');
});
it('renders an Edit and a Preview Tab', (done) => {
Vue.nextTick(() => {
const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li');
it('renders markdown for tempFile', async () => {
// by default files created in the spec are temp: no need for explicitly sending the param
await createComponent({ activeFile });
expect(tabs.length).toBe(2);
expect(tabs[0].textContent.trim()).toBe('Edit');
expect(tabs[1].textContent.trim()).toBe('Preview Markdown');
findPreviewTab().trigger('click');
await waitForPromises();
expect(wrapper.find(ContentViewer).html()).toContain(defaultFileProps.content);
});
done();
});
it('shows no tabs when not in Edit mode', async () => {
await createComponent({
state: {
currentActivityView: leftSidebarViews.review.name,
},
activeFile,
});
expect(findTabs()).toHaveLength(0);
});
});
it('renders markdown for tempFile', (done) => {
vm.file.tempFile = true;
vm.$nextTick()
.then(() => {
vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')[1].click();
})
.then(waitForPromises)
.then(() => {
expect(vm.$el.querySelector('.preview-container').innerHTML).toContain(
'<p>testing 123</p>',
);
})
.then(done)
.catch(done.fail);
});
describe('when file is binary and not raw', () => {
beforeEach(async () => {
const activeFile = dummyFile.binary;
await createComponent({ activeFile });
});
describe('when not in edit mode', () => {
beforeEach(async () => {
await vm.$nextTick();
it('does not render the IDE', () => {
expect(findEditor().isVisible()).toBe(false);
});
vm.$store.state.currentActivityView = leftSidebarViews.review.name;
it('does not create an instance', () => {
expect(createInstanceSpy).not.toHaveBeenCalled();
expect(createDiffInstanceSpy).not.toHaveBeenCalled();
});
});
return vm.$nextTick();
describe('createEditorInstance', () => {
it.each`
viewer | diffInstance
${viewerTypes.edit} | ${undefined}
${viewerTypes.diff} | ${true}
${viewerTypes.mr} | ${true}
`(
'creates instance of correct type when viewer is $viewer',
async ({ viewer, diffInstance }) => {
await createComponent({
state: { viewer },
});
const isDiff = () => {
return diffInstance ? { isDiff: true } : {};
};
expect(createInstanceSpy).toHaveBeenCalledWith(expect.objectContaining(isDiff()));
expect(createDiffInstanceSpy).toHaveBeenCalledTimes((diffInstance && 1) || 0);
},
);
it('shows no tabs', () => {
expect(vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')).toHaveLength(0);
it('installs the WebIDE extension', async () => {
const extensionSpy = jest.spyOn(EditorLite, 'instanceApplyExtension');
await createComponent();
expect(extensionSpy).toHaveBeenCalled();
Reflect.ownKeys(EditorWebIdeExtension.prototype)
.filter((fn) => fn !== 'constructor')
.forEach((fn) => {
expect(vm.editor[fn]).toBe(EditorWebIdeExtension.prototype[fn]);
});
});
});
});
describe('when open file is binary and not raw', () => {
beforeEach((done) => {
vm.file.name = 'file.dat';
vm.file.content = '🐱'; // non-ascii binary content
jest.spyOn(vm.editor, 'createInstance').mockImplementation();
jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation();
vm.$nextTick(done);
});
it('does not render the IDE', () => {
expect(vm.shouldHideEditor).toBeTruthy();
});
it('does not call createInstance', async () => {
// Mirror the act's in the `createEditorInstance`
vm.createEditorInstance();
await vm.$nextTick();
describe('setupEditor', () => {
beforeEach(async () => {
await createComponent();
});
expect(vm.editor.createInstance).not.toHaveBeenCalled();
expect(vm.editor.createDiffInstance).not.toHaveBeenCalled();
});
it('creates new model on load', () => {
// We always create two models per file to be able to build a diff of changes
expect(createModelSpy).toHaveBeenCalledTimes(2);
// The model with the most recent changes is the last one
const [content] = createModelSpy.mock.calls[1];
expect(content).toBe(defaultFileProps.content);
});
describe('createEditorInstance', () => {
it('calls createInstance when viewer is editor', (done) => {
jest.spyOn(vm.editor, 'createInstance').mockImplementation();
it('does not create a new model on subsequent calls to setupEditor and re-uses the already-existing model', () => {
const existingModel = vm.model;
createModelSpy.mockClear();
vm.createEditorInstance();
vm.setupEditor();
vm.$nextTick(() => {
expect(vm.editor.createInstance).toHaveBeenCalled();
expect(createModelSpy).not.toHaveBeenCalled();
expect(vm.model).toBe(existingModel);
});
done();
});
});
it('adds callback methods', () => {
jest.spyOn(vm.editor, 'onPositionChange');
jest.spyOn(vm.model, 'onChange');
jest.spyOn(vm.model, 'updateOptions');
it('calls createDiffInstance when viewer is diff', (done) => {
vm.$store.state.viewer = 'diff';
vm.setupEditor();
jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation();
expect(vm.editor.onPositionChange).toHaveBeenCalledTimes(1);
expect(vm.model.onChange).toHaveBeenCalledTimes(1);
expect(vm.model.updateOptions).toHaveBeenCalledWith(vm.rules);
});
vm.createEditorInstance();
it('updates state with the value of the model', () => {
const newContent = 'As Gregor Samsa\n awoke one morning\n';
vm.model.setValue(newContent);
vm.$nextTick(() => {
expect(vm.editor.createDiffInstance).toHaveBeenCalled();
vm.setupEditor();
done();
});
});
expect(vm.file.content).toBe(newContent);
});
it('calls createDiffInstance when viewer is a merge request diff', (done) => {
vm.$store.state.viewer = 'mrdiff';
it('sets head model as staged file', () => {
vm.modelManager.dispose();
const addModelSpy = jest.spyOn(ModelManager.prototype, 'addModel');
jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation();
vm.$store.state.stagedFiles.push({ ...vm.file, key: 'staged' });
vm.file.staged = true;
vm.file.key = `unstaged-${vm.file.key}`;
vm.createEditorInstance();
vm.setupEditor();
vm.$nextTick(() => {
expect(vm.editor.createDiffInstance).toHaveBeenCalled();
expect(addModelSpy).toHaveBeenCalledWith(vm.file, vm.$store.state.stagedFiles[0]);
});
});
done();
});
});
describe('editor updateDimensions', () => {
let updateDimensionsSpy;
let updateDiffViewSpy;
beforeEach(async () => {
await createComponent();
updateDimensionsSpy = jest.spyOn(vm.editor, 'updateDimensions');
updateDiffViewSpy = jest.spyOn(vm.editor, 'updateDiffView').mockImplementation();
});
describe('setupEditor', () => {
it('creates new model', () => {
jest.spyOn(vm.editor, 'createModel');
it('calls updateDimensions only when panelResizing is false', async () => {
expect(updateDimensionsSpy).not.toHaveBeenCalled();
expect(updateDiffViewSpy).not.toHaveBeenCalled();
expect(vm.$store.state.panelResizing).toBe(false); // default value
Editor.editorInstance.modelManager.dispose();
vm.$store.state.panelResizing = true;
await vm.$nextTick();
vm.setupEditor();
expect(updateDimensionsSpy).not.toHaveBeenCalled();
expect(updateDiffViewSpy).not.toHaveBeenCalled();
expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, null);
expect(vm.model).not.toBeNull();
});
vm.$store.state.panelResizing = false;
await vm.$nextTick();
it('attaches model to editor', () => {
jest.spyOn(vm.editor, 'attachModel');
expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
expect(updateDiffViewSpy).toHaveBeenCalledTimes(1);
Editor.editorInstance.modelManager.dispose();
vm.$store.state.panelResizing = true;
await vm.$nextTick();
vm.setupEditor();
expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
expect(updateDiffViewSpy).toHaveBeenCalledTimes(1);
});
expect(vm.editor.attachModel).toHaveBeenCalledWith(vm.model);
});
it('calls updateDimensions when rightPane is toggled', async () => {
expect(updateDimensionsSpy).not.toHaveBeenCalled();
expect(updateDiffViewSpy).not.toHaveBeenCalled();
expect(vm.$store.state.rightPane.isOpen).toBe(false); // default value
it('attaches model to merge request editor', () => {
vm.$store.state.viewer = 'mrdiff';
vm.file.mrChange = true;
jest.spyOn(vm.editor, 'attachMergeRequestModel').mockImplementation();
vm.$store.state.rightPane.isOpen = true;
await vm.$nextTick();
Editor.editorInstance.modelManager.dispose();
expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
expect(updateDiffViewSpy).toHaveBeenCalledTimes(1);
vm.setupEditor();
vm.$store.state.rightPane.isOpen = false;
await vm.$nextTick();
expect(vm.editor.attachMergeRequestModel).toHaveBeenCalledWith(vm.model);
});
expect(updateDimensionsSpy).toHaveBeenCalledTimes(2);
expect(updateDiffViewSpy).toHaveBeenCalledTimes(2);
});
});
it('does not attach model to merge request editor when not a MR change', () => {
vm.$store.state.viewer = 'mrdiff';
vm.file.mrChange = false;
jest.spyOn(vm.editor, 'attachMergeRequestModel').mockImplementation();
describe('editor tabs', () => {
beforeEach(async () => {
await createComponent();
});
Editor.editorInstance.modelManager.dispose();
it.each`
mode | isVisible
${'edit'} | ${true}
${'review'} | ${false}
${'commit'} | ${false}
`('tabs in $mode are $isVisible', async ({ mode, isVisible } = {}) => {
vm.$store.state.currentActivityView = leftSidebarViews[mode].name;
vm.setupEditor();
await vm.$nextTick();
expect(wrapper.find('.nav-links').exists()).toBe(isVisible);
});
});
expect(vm.editor.attachMergeRequestModel).not.toHaveBeenCalledWith(vm.model);
describe('files in preview mode', () => {
let updateDimensionsSpy;
const changeViewMode = (viewMode) =>
vm.$store.dispatch('editor/updateFileEditor', {
path: vm.file.path,
data: { viewMode },
});
it('adds callback methods', () => {
jest.spyOn(vm.editor, 'onPositionChange');
Editor.editorInstance.modelManager.dispose();
vm.setupEditor();
expect(vm.editor.onPositionChange).toHaveBeenCalled();
expect(vm.model.events.size).toBe(2);
beforeEach(async () => {
await createComponent({
activeFile: dummyFile.markdown,
});
it('updates state with the value of the model', () => {
vm.model.setValue('testing 1234\n');
vm.setupEditor();
expect(vm.file.content).toBe('testing 1234\n');
});
updateDimensionsSpy = jest.spyOn(vm.editor, 'updateDimensions');
it('sets head model as staged file', () => {
jest.spyOn(vm.editor, 'createModel');
changeViewMode(FILE_VIEW_MODE_PREVIEW);
await vm.$nextTick();
});
Editor.editorInstance.modelManager.dispose();
it('do not show the editor', () => {
expect(vm.showEditor).toBe(false);
expect(findEditor().isVisible()).toBe(false);
});
vm.$store.state.stagedFiles.push({ ...vm.file, key: 'staged' });
vm.file.staged = true;
vm.file.key = `unstaged-${vm.file.key}`;
it('updates dimensions when switching view back to edit', async () => {
expect(updateDimensionsSpy).not.toHaveBeenCalled();
vm.setupEditor();
changeViewMode(FILE_VIEW_MODE_EDITOR);
await vm.$nextTick();
expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, vm.$store.state.stagedFiles[0]);
});
expect(updateDimensionsSpy).toHaveBeenCalled();
});
});
describe('editor updateDimensions', () => {
beforeEach(() => {
jest.spyOn(vm.editor, 'updateDimensions');
jest.spyOn(vm.editor, 'updateDiffView').mockImplementation();
});
it('calls updateDimensions when panelResizing is false', (done) => {
vm.$store.state.panelResizing = true;
vm.$nextTick()
.then(() => {
vm.$store.state.panelResizing = false;
})
.then(vm.$nextTick)
.then(() => {
expect(vm.editor.updateDimensions).toHaveBeenCalled();
expect(vm.editor.updateDiffView).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
});
it('does not call updateDimensions when panelResizing is true', (done) => {
vm.$store.state.panelResizing = true;
describe('initEditor', () => {
const hideEditorAndRunFn = async () => {
jest.clearAllMocks();
jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true);
vm.$nextTick(() => {
expect(vm.editor.updateDimensions).not.toHaveBeenCalled();
expect(vm.editor.updateDiffView).not.toHaveBeenCalled();
vm.initEditor();
await vm.$nextTick();
};
done();
});
it('does not fetch file information for temp entries', async () => {
await createComponent({
activeFile: createActiveFile(),
});
it('calls updateDimensions when rightPane is opened', (done) => {
vm.$store.state.rightPane.isOpen = true;
vm.$nextTick(() => {
expect(vm.editor.updateDimensions).toHaveBeenCalled();
expect(vm.editor.updateDiffView).toHaveBeenCalled();
done();
});
});
expect(vm.getFileData).not.toHaveBeenCalled();
});
describe('show tabs', () => {
it('shows tabs in edit mode', () => {
expect(vm.$el.querySelector('.nav-links')).not.toBe(null);
it('is being initialised for files without content even if shouldHideEditor is `true`', async () => {
await createComponent({
activeFile: dummyFile.empty,
});
it('hides tabs in review mode', (done) => {
vm.$store.state.currentActivityView = leftSidebarViews.review.name;
await hideEditorAndRunFn();
vm.$nextTick(() => {
expect(vm.$el.querySelector('.nav-links')).toBe(null);
expect(vm.getFileData).toHaveBeenCalled();
expect(vm.getRawFileData).toHaveBeenCalled();
});
done();
});
it('does not initialize editor for files already with content when shouldHideEditor is `true`', async () => {
await createComponent({
activeFile: createActiveFile(),
});
it('hides tabs in commit mode', (done) => {
vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
await hideEditorAndRunFn();
vm.$nextTick(() => {
expect(vm.$el.querySelector('.nav-links')).toBe(null);
expect(vm.getFileData).not.toHaveBeenCalled();
expect(vm.getRawFileData).not.toHaveBeenCalled();
expect(createInstanceSpy).not.toHaveBeenCalled();
});
});
done();
});
describe('updates on file changes', () => {
beforeEach(async () => {
await createComponent({
activeFile: createActiveFile({
content: 'foo', // need to prevent full cycle of initEditor
}),
});
jest.spyOn(vm, 'initEditor').mockImplementation();
});
describe('when files view mode is preview', () => {
beforeEach((done) => {
jest.spyOn(vm.editor, 'updateDimensions').mockImplementation();
changeViewMode(FILE_VIEW_MODE_PREVIEW);
vm.file.name = 'myfile.md';
vm.file.content = 'hello world';
it('calls removePendingTab when old file is pending', async () => {
jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true);
jest.spyOn(vm, 'removePendingTab').mockImplementation();
vm.$nextTick(done);
});
const origFile = vm.file;
vm.file.pending = true;
await vm.$nextTick();
it('should hide editor', () => {
expect(vm.showEditor).toBe(false);
expect(findEditor()).toHaveCss({ display: 'none' });
wrapper.setProps({
file: file('testing'),
});
vm.file.content = 'foo'; // need to prevent full cycle of initEditor
await vm.$nextTick();
describe('when file view mode changes to editor', () => {
it('should update dimensions', () => {
changeViewMode(FILE_VIEW_MODE_EDITOR);
return vm.$nextTick().then(() => {
expect(vm.editor.updateDimensions).toHaveBeenCalled();
});
});
});
expect(vm.removePendingTab).toHaveBeenCalledWith(origFile);
});
describe('initEditor', () => {
beforeEach(() => {
vm.file.tempFile = false;
jest.spyOn(vm.editor, 'createInstance').mockImplementation();
jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true);
});
it('does not call initEditor if the file did not change', async () => {
Vue.set(vm, 'file', vm.file);
await vm.$nextTick();
it('does not fetch file information for temp entries', (done) => {
vm.file.tempFile = true;
vm.initEditor();
vm.$nextTick()
.then(() => {
expect(vm.getFileData).not.toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
});
it('is being initialised for files without content even if shouldHideEditor is `true`', (done) => {
vm.file.content = '';
vm.file.raw = '';
expect(vm.initEditor).not.toHaveBeenCalled();
});
vm.initEditor();
it('calls initEditor when file key is changed', async () => {
expect(vm.initEditor).not.toHaveBeenCalled();
vm.$nextTick()
.then(() => {
expect(vm.getFileData).toHaveBeenCalled();
expect(vm.getRawFileData).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
wrapper.setProps({
file: {
...vm.file,
key: 'new',
},
});
await vm.$nextTick();
it('does not initialize editor for files already with content', (done) => {
vm.file.content = 'foo';
vm.initEditor();
vm.$nextTick()
.then(() => {
expect(vm.getFileData).not.toHaveBeenCalled();
expect(vm.getRawFileData).not.toHaveBeenCalled();
expect(vm.editor.createInstance).not.toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
});
expect(vm.initEditor).toHaveBeenCalled();
});
});
describe('populates editor with the fetched content', () => {
const createRemoteFile = (name) => ({
...file(name),
tmpFile: false,
});
describe('updates on file changes', () => {
beforeEach(() => {
jest.spyOn(vm, 'initEditor').mockImplementation();
});
beforeEach(async () => {
await createComponent();
vm.getRawFileData.mockRestore();
});
it('calls removePendingTab when old file is pending', (done) => {
jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true);
jest.spyOn(vm, 'removePendingTab').mockImplementation();
it('after switching viewer from edit to diff', async () => {
const f = createRemoteFile('newFile');
Vue.set(vm.$store.state.entries, f.path, f);
vm.file.pending = true;
jest.spyOn(service, 'getRawFileData').mockImplementation(async () => {
expect(vm.file.loading).toBe(true);
vm.$nextTick()
.then(() => {
vm.file = file('testing');
vm.file.content = 'foo'; // need to prevent full cycle of initEditor
// switching from edit to diff mode usually triggers editor initialization
vm.$store.state.viewer = viewerTypes.diff;
return vm.$nextTick();
})
.then(() => {
expect(vm.removePendingTab).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
// we delay returning the file to make sure editor doesn't initialize before we fetch file content
await waitUsingRealTimer(30);
return 'rawFileData123\n';
});
it('does not call initEditor if the file did not change', (done) => {
Vue.set(vm, 'file', vm.file);
vm.$nextTick()
.then(() => {
expect(vm.initEditor).not.toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
wrapper.setProps({
file: f,
});
it('calls initEditor when file key is changed', (done) => {
expect(vm.initEditor).not.toHaveBeenCalled();
await waitForEditorSetup();
expect(vm.model.getModel().getValue()).toBe('rawFileData123\n');
});
Vue.set(vm, 'file', {
...vm.file,
key: 'new',
it('after opening multiple files at the same time', async () => {
const fileA = createRemoteFile('fileA');
const aContent = 'fileA-rawContent\n';
const bContent = 'fileB-rawContent\n';
const fileB = createRemoteFile('fileB');
Vue.set(vm.$store.state.entries, fileA.path, fileA);
Vue.set(vm.$store.state.entries, fileB.path, fileB);
jest
.spyOn(service, 'getRawFileData')
.mockImplementation(async () => {
// opening fileB while the content of fileA is still being fetched
wrapper.setProps({
file: fileB,
});
return aContent;
})
.mockImplementationOnce(async () => {
// we delay returning fileB content to make sure the editor doesn't initialize prematurely
await waitUsingRealTimer(30);
return bContent;
});
vm.$nextTick()
.then(() => {
expect(vm.initEditor).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
wrapper.setProps({
file: fileA,
});
});
describe('populates editor with the fetched content', () => {
beforeEach(() => {
vm.getRawFileData.mockRestore();
});
await waitForEditorSetup();
expect(vm.model.getModel().getValue()).toBe(bContent);
});
});
const createRemoteFile = (name) => ({
...file(name),
tmpFile: false,
describe('onPaste', () => {
const setFileName = (name) =>
createActiveFile({
content: 'hello world\n',
name,
path: `foo/${name}`,
key: 'new',
});
it('after switching viewer from edit to diff', async () => {
jest.spyOn(service, 'getRawFileData').mockImplementation(async () => {
expect(vm.file.loading).toBe(true);
// switching from edit to diff mode usually triggers editor initialization
store.state.viewer = viewerTypes.diff;
const pasteImage = () => {
window.dispatchEvent(
Object.assign(new Event('paste'), {
clipboardData: {
files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
},
}),
);
};
// we delay returning the file to make sure editor doesn't initialize before we fetch file content
await waitUsingRealTimer(30);
return 'rawFileData123\n';
const watchState = (watched) =>
new Promise((resolve) => {
const unwatch = vm.$store.watch(watched, () => {
unwatch();
resolve();
});
const f = createRemoteFile('newFile');
Vue.set(store.state.entries, f.path, f);
vm.file = f;
await waitForEditorSetup();
expect(vm.model.getModel().getValue()).toBe('rawFileData123\n');
});
it('after opening multiple files at the same time', async () => {
const fileA = createRemoteFile('fileA');
const fileB = createRemoteFile('fileB');
Vue.set(store.state.entries, fileA.path, fileA);
Vue.set(store.state.entries, fileB.path, fileB);
jest
.spyOn(service, 'getRawFileData')
.mockImplementationOnce(async () => {
// opening fileB while the content of fileA is still being fetched
vm.file = fileB;
return 'fileA-rawContent\n';
})
.mockImplementationOnce(async () => {
// we delay returning fileB content to make sure the editor doesn't initialize prematurely
await waitUsingRealTimer(30);
return 'fileB-rawContent\n';
});
// Pasting an image does a lot of things like using the FileReader API,
// so, waitForPromises isn't very reliable (and causes a flaky spec)
// Read more about state.watch: https://vuex.vuejs.org/api/#watch
const waitForFileContentChange = () => watchState((s) => s.entries['foo/bar.md'].content);
vm.file = fileA;
await waitForEditorSetup();
expect(vm.model.getModel().getValue()).toBe('fileB-rawContent\n');
beforeEach(async () => {
await createComponent({
state: {
trees: {
'gitlab-org/gitlab': { tree: [] },
},
currentProjectId: 'gitlab-org',
currentBranchId: 'gitlab',
},
activeFile: setFileName('bar.md'),
});
});
describe('onPaste', () => {
const setFileName = (name) => {
Vue.set(vm, 'file', {
...vm.file,
content: 'hello world\n',
name,
path: `foo/${name}`,
key: 'new',
});
vm.$store.state.entries[vm.file.path] = vm.file;
};
vm.setupEditor();
const pasteImage = () => {
window.dispatchEvent(
Object.assign(new Event('paste'), {
clipboardData: {
files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
},
}),
);
};
const watchState = (watched) =>
new Promise((resolve) => {
const unwatch = vm.$store.watch(watched, () => {
unwatch();
resolve();
});
});
await waitForPromises();
// set cursor to line 2, column 1
vm.editor.setSelection(new Range(2, 1, 2, 1));
vm.editor.focus();
// Pasting an image does a lot of things like using the FileReader API,
// so, waitForPromises isn't very reliable (and causes a flaky spec)
// Read more about state.watch: https://vuex.vuejs.org/api/#watch
const waitForFileContentChange = () => watchState((s) => s.entries['foo/bar.md'].content);
beforeEach(() => {
setFileName('bar.md');
vm.$store.state.trees['gitlab-org/gitlab'] = { tree: [] };
vm.$store.state.currentProjectId = 'gitlab-org';
vm.$store.state.currentBranchId = 'gitlab';
// create a new model each time, otherwise tests conflict with each other
// because of same model being used in multiple tests
Editor.editorInstance.modelManager.dispose();
vm.setupEditor();
jest.spyOn(vm.editor, 'hasTextFocus').mockReturnValue(true);
});
return waitForPromises().then(() => {
// set cursor to line 2, column 1
vm.editor.instance.setSelection(new Range(2, 1, 2, 1));
vm.editor.instance.focus();
it('adds an image entry to the same folder for a pasted image in a markdown file', async () => {
pasteImage();
jest.spyOn(vm.editor.instance, 'hasTextFocus').mockReturnValue(true);
});
await waitForFileContentChange();
expect(vm.$store.state.entries['foo/foo.png']).toMatchObject({
path: 'foo/foo.png',
type: 'blob',
content: 'Zm9v',
rawPath: 'data:image/png;base64,Zm9v',
});
});
it('adds an image entry to the same folder for a pasted image in a markdown file', () => {
pasteImage();
return waitForFileContentChange().then(() => {
expect(vm.$store.state.entries['foo/foo.png']).toMatchObject({
path: 'foo/foo.png',
type: 'blob',
content: 'Zm9v',
rawPath: 'data:image/png;base64,Zm9v',
});
});
});
it("adds a markdown image tag to the file's contents", async () => {
pasteImage();
it("adds a markdown image tag to the file's contents", () => {
pasteImage();
await waitForFileContentChange();
expect(vm.file.content).toBe('hello world\n![foo.png](./foo.png)');
});
return waitForFileContentChange().then(() => {
expect(vm.file.content).toBe('hello world\n![foo.png](./foo.png)');
});
it("does not add file to state or set markdown image syntax if the file isn't markdown", async () => {
wrapper.setProps({
file: setFileName('myfile.txt'),
});
pasteImage();
it("does not add file to state or set markdown image syntax if the file isn't markdown", () => {
setFileName('myfile.txt');
pasteImage();
return waitForPromises().then(() => {
expect(vm.$store.state.entries['foo/foo.png']).toBeUndefined();
expect(vm.file.content).toBe('hello world\n');
});
});
await waitForPromises();
expect(vm.$store.state.entries['foo/foo.png']).toBeUndefined();
expect(vm.file.content).toBe('hello world\n');
});
});
describe('fetchEditorconfigRules', () => {
beforeEach(() => {
exampleConfigs.forEach(({ path, content }) => {
store.state.entries[path] = { ...file(), path, content };
});
});
it.each(exampleFiles)(
'does not fetch content from remote for .editorconfig files present locally (case %#)',
({ path, monacoRules }) => {
createOpenFile(path);
createComponent();
return waitForEditorSetup().then(() => {
expect(vm.rules).toEqual(monacoRules);
expect(vm.model.options).toMatchObject(monacoRules);
expect(vm.getFileData).not.toHaveBeenCalled();
expect(vm.getRawFileData).not.toHaveBeenCalled();
async ({ path, monacoRules }) => {
await createComponent({
state: {
entries: (() => {
const res = {};
exampleConfigs.forEach(({ path: configPath, content }) => {
res[configPath] = { ...file(), path: configPath, content };
});
return res;
})(),
},
activeFile: createActiveFile({
path,
key: path,
name: 'myfile.txt',
content: 'hello world',
}),
});
expect(vm.rules).toEqual(monacoRules);
expect(vm.model.options).toMatchObject(monacoRules);
expect(vm.getFileData).not.toHaveBeenCalled();
expect(vm.getRawFileData).not.toHaveBeenCalled();
},
);
it('fetches content from remote for .editorconfig files not available locally', () => {
exampleConfigs.forEach(({ path }) => {
delete store.state.entries[path].content;
delete store.state.entries[path].raw;
it('fetches content from remote for .editorconfig files not available locally', async () => {
const activeFile = createActiveFile({
path: 'foo/bar/baz/test/my_spec.js',
key: 'foo/bar/baz/test/my_spec.js',
name: 'myfile.txt',
content: 'hello world',
});
const expectations = [
'foo/bar/baz/.editorconfig',
'foo/bar/.editorconfig',
'foo/.editorconfig',
'.editorconfig',
];
await createComponent({
state: {
entries: (() => {
const res = {
[activeFile.path]: activeFile,
};
exampleConfigs.forEach(({ path: configPath }) => {
const f = { ...file(), path: configPath };
delete f.content;
delete f.raw;
res[configPath] = f;
});
return res;
})(),
},
activeFile,
});
// Include a "test" directory which does not exist in store. This one should be skipped.
createOpenFile('foo/bar/baz/test/my_spec.js');
createComponent();
return waitForEditorSetup().then(() => {
expect(vm.getFileData.mock.calls.map(([args]) => args)).toEqual([
{ makeFileActive: false, path: 'foo/bar/baz/.editorconfig' },
{ makeFileActive: false, path: 'foo/bar/.editorconfig' },
{ makeFileActive: false, path: 'foo/.editorconfig' },
{ makeFileActive: false, path: '.editorconfig' },
]);
expect(vm.getRawFileData.mock.calls.map(([args]) => args)).toEqual([
{ path: 'foo/bar/baz/.editorconfig' },
{ path: 'foo/bar/.editorconfig' },
{ path: 'foo/.editorconfig' },
{ path: '.editorconfig' },
]);
});
expect(service.getFileData.mock.calls.map(([args]) => args)).toEqual(
expectations.map((expectation) => expect.stringContaining(expectation)),
);
expect(service.getRawFileData.mock.calls.map(([args]) => args)).toEqual(
expectations.map((expectation) => expect.objectContaining({ path: expectation })),
);
});
});
});
spec/frontend_integration/ide/helpers/ide_helper.js
View file @ 4228bd99
......@@ -25,6 +25,9 @@ export const getStatusBar = () => document.querySelector('.ide-status-bar');
export const waitForMonacoEditor = () =>
new Promise((resolve) => window.monaco.editor.onDidCreateEditor(resolve));
export const waitForEditorModelChange = (instance) =>
new Promise((resolve) => instance.onDidChangeModel(resolve));
export const findMonacoEditor = () =>
screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-editor'));
......
spec/frontend_integration/ide/helpers/start.js
View file @ 4228bd99
/* global monaco */
import { TEST_HOST } from 'helpers/test_constants';
import { initIde } from '~/ide';
import Editor from '~/ide/lib/editor';
import extendStore from '~/ide/stores/extend';
import { IDE_DATASET } from './mock_data';
......@@ -18,13 +19,7 @@ export default (container, { isRepoEmpty = false, path = '', mrId = '' } = {}) =
const vm = initIde(el, { extendStore });
// We need to dispose of editor Singleton things or tests will bump into eachother
vm.$on('destroy', () => {
if (Editor.editorInstance) {
Editor.editorInstance.modelManager.dispose();
Editor.editorInstance.dispose();
Editor.editorInstance = null;
}
});
vm.$on('destroy', () => monaco.editor.getModels().forEach((model) => model.dispose()));
return vm;
};
spec/frontend_integration/ide/ide_integration_spec.js
View file @ 4228bd99
......@@ -96,16 +96,6 @@ describe('WebIDE', () => {
let statusBar;
let editor;
const waitForEditor = async () => {
editor = await ideHelper.waitForMonacoEditor();
};
const changeEditorPosition = async (lineNumber, column) => {
editor.setPosition({ lineNumber, column });
await vm.$nextTick();
};
beforeEach(async () => {
vm = startWebIDE(container);
......@@ -134,16 +124,17 @@ describe('WebIDE', () => {
// Need to wait for monaco editor to load so it doesn't through errors on dispose
await ideHelper.openFile('.gitignore');
await ideHelper.waitForMonacoEditor();
await ideHelper.waitForEditorModelChange(editor);
await ideHelper.openFile('README.md');
await ideHelper.waitForMonacoEditor();
await ideHelper.waitForEditorModelChange(editor);
expect(el).toHaveText(markdownPreview);
});
describe('when editor position changes', () => {
beforeEach(async () => {
await changeEditorPosition(4, 10);
editor.setPosition({ lineNumber: 4, column: 10 });
await vm.$nextTick();
});
it('shows new line position', () => {
......@@ -153,7 +144,8 @@ describe('WebIDE', () => {
it('updates after rename', async () => {
await ideHelper.renameFile('README.md', 'READMEZ.txt');
await waitForEditor();
await ideHelper.waitForEditorModelChange(editor);
await vm.$nextTick();
expect(statusBar).toHaveText('1:1');
expect(statusBar).toHaveText('plaintext');
......@@ -161,10 +153,10 @@ describe('WebIDE', () => {
it('persists position after opening then rename', async () => {
await ideHelper.openFile('files/js/application.js');
await waitForEditor();
await ideHelper.waitForEditorModelChange(editor);
await ideHelper.renameFile('README.md', 'READING_RAINBOW.md');
await ideHelper.openFile('READING_RAINBOW.md');
await waitForEditor();
await ideHelper.waitForEditorModelChange(editor);
expect(statusBar).toHaveText('4:10');
expect(statusBar).toHaveText('markdown');
......@@ -173,7 +165,8 @@ describe('WebIDE', () => {
it('persists position after closing', async () => {
await ideHelper.closeFile('README.md');
await ideHelper.openFile('README.md');
await waitForEditor();
await ideHelper.waitForMonacoEditor();
await vm.$nextTick();
expect(statusBar).toHaveText('4:10');
expect(statusBar).toHaveText('markdown');
......
spec/frontend_integration/ide/user_opens_mr_spec.js
View file @ 4228bd99
......@@ -24,11 +24,11 @@ describe('IDE: User opens Merge Request', () => {
vm = startWebIDE(container, { mrId });
await ideHelper.waitForTabToOpen(basename(changes[0].new_path));
await ideHelper.waitForMonacoEditor();
const editor = await ideHelper.waitForMonacoEditor();
await ideHelper.waitForEditorModelChange(editor);
});
afterEach(async () => {
afterEach(() => {
vm.$destroy();
vm = null;
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7