Commit b2c4afbc authored by Jacques Erasmus's avatar Jacques Erasmus

Merge branch 'dmishunov-editor-fix-rendering' into 'master'

Reset editor's layout after StartupCSS

See merge request gitlab-org/gitlab!61426
parents 41762757 1b954408
import { Range } from 'monaco-editor';
import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
import { ERROR_INSTANCE_REQUIRED_FOR_EXTENSION, EDITOR_TYPE_CODE } from '../constants';
const hashRegexp = new RegExp('#?L', 'g');
......@@ -25,11 +26,18 @@ export class EditorLiteExtension {
if (instance.getEditorType && instance.getEditorType() === EDITOR_TYPE_CODE) {
EditorLiteExtension.setupLineLinking(instance);
}
EditorLiteExtension.deferRerender(instance);
} else if (Object.entries(options).length) {
throw new Error(ERROR_INSTANCE_REQUIRED_FOR_EXTENSION);
}
}
static deferRerender(instance) {
waitForCSSLoaded(() => {
instance.layout();
});
}
static highlightLines(instance) {
const { hash } = window.location;
if (!hash) {
......
---
title: Reset Source Editor's layout after Startup CSS
merge_request: 61426
author:
type: fixed
......@@ -7,6 +7,21 @@ import {
} from '~/editor/constants';
import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
jest.mock('~/helpers/startup_css_helper', () => {
return {
waitForCSSLoaded: jest.fn().mockImplementation((cb) => {
// We have to artificially put the callback's execution
// to the end of the current call stack to be able to
// test that the callback is called after waitForCSSLoaded.
// setTimeout with 0 delay does exactly that.
// Otherwise we might end up with false positive results
setTimeout(() => {
cb.apply();
}, 0);
}),
};
});
describe('The basis for an Editor Lite extension', () => {
const defaultLine = 3;
let ext;
......@@ -44,6 +59,19 @@ describe('The basis for an Editor Lite extension', () => {
});
describe('constructor', () => {
it('resets the layout in waitForCSSLoaded callback', async () => {
const instance = {
layout: jest.fn(),
};
ext = new EditorLiteExtension({ instance });
expect(instance.layout).not.toHaveBeenCalled();
// We're waiting for the waitForCSSLoaded mock to kick in
await jest.runOnlyPendingTimers();
expect(instance.layout).toHaveBeenCalled();
});
it.each`
description | instance | options
${'accepts configuration options and instance'} | ${{}} | ${defaultOptions}
......@@ -51,6 +79,7 @@ describe('The basis for an Editor Lite extension', () => {
${'does not fail if both instance and the options are omitted'} | ${undefined} | ${undefined}
${'throws if only options are passed'} | ${undefined} | ${defaultOptions}
`('$description', ({ instance, options } = {}) => {
EditorLiteExtension.deferRerender = jest.fn();
const originalInstance = { ...instance };
if (instance) {
......@@ -82,12 +111,14 @@ describe('The basis for an Editor Lite extension', () => {
});
it('initializes the line highlighting', () => {
EditorLiteExtension.deferRerender = jest.fn();
const spy = jest.spyOn(EditorLiteExtension, 'highlightLines');
ext = new EditorLiteExtension({ instance: {} });
expect(spy).toHaveBeenCalled();
});
it('sets up the line linking for code instance', () => {
EditorLiteExtension.deferRerender = jest.fn();
const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
const instance = {
getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_CODE),
......@@ -99,6 +130,7 @@ describe('The basis for an Editor Lite extension', () => {
});
it('does not set up the line linking for diff instance', () => {
EditorLiteExtension.deferRerender = jest.fn();
const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
const instance = {
getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_DIFF),
......
import { shallowMount } from '@vue/test-utils';
import { EDITOR_READY_EVENT } from '~/editor/constants';
import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
import {
mockCiConfigPath,
......@@ -59,6 +60,10 @@ describe('Pipeline Editor | Text editor component', () => {
const findEditor = () => wrapper.findComponent(MockEditorLite);
beforeEach(() => {
EditorLiteExtension.deferRerender = jest.fn();
});
afterEach(() => {
wrapper.destroy();
wrapper = 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