Add latest changes from gitlab-org/gitlab@master

2 files changed, 121 insertions, 1 deletions

diff --git a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
index 1926f3e268e..fe20c23e4d7 100644
--- a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
+++ b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
@@ -1,4 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
+import { Emitter } from 'monaco-editor';
+import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -64,7 +66,6 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
 
   afterEach(() => {
     instance.dispose();
-    editorEl.remove();
     mockAxios.restore();
     resetHTMLFixture();
   });
@@ -75,11 +76,47 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
       actions: expect.any(Object),
       shown: false,
       modelChangeListener: undefined,
+      layoutChangeListener: {
+        dispose: expect.anything(),
+      },
       path: previewMarkdownPath,
       actionShowPreviewCondition: expect.any(Object),
     });
   });
 
+  describe('onDidLayoutChange', () => {
+    const emitter = new Emitter();
+    let layoutSpy;
+
+    useFakeRequestAnimationFrame();
+
+    beforeEach(() => {
+      instance.unuse(extension);
+      instance.onDidLayoutChange = emitter.event;
+      extension = instance.use({
+        definition: EditorMarkdownPreviewExtension,
+        setupOptions: { previewMarkdownPath },
+      });
+      layoutSpy = jest.spyOn(instance, 'layout');
+    });
+
+    it('does not trigger the layout when the preview is not active [default]', async () => {
+      expect(instance.markdownPreview.shown).toBe(false);
+      expect(layoutSpy).not.toHaveBeenCalled();
+      await emitter.fire();
+      expect(layoutSpy).not.toHaveBeenCalled();
+    });
+
+    it('triggers the layout if the preview panel is opened', async () => {
+      expect(layoutSpy).not.toHaveBeenCalled();
+      instance.togglePreview();
+      layoutSpy.mockReset();
+
+      await emitter.fire();
+      expect(layoutSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('model change listener', () => {
     let cleanupSpy;
     let actionSpy;
@@ -111,6 +148,9 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
       mockAxios.onPost().reply(200, { body: responseData });
       await togglePreview();
     });
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
 
     it('removes the registered buttons from the toolbar', () => {
       expect(instance.toolbar.removeItems).not.toHaveBeenCalled();
@@ -175,6 +215,31 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
       instance.unuse(extension);
       expect(newWidth === width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH).toBe(true);
     });
+
+    it('disposes the layoutChange listener and does not re-layout on layout changes', () => {
+      expect(instance.markdownPreview.layoutChangeListener).toBeDefined();
+      instance.unuse(extension);
+
+      expect(instance.markdownPreview?.layoutChangeListener).toBeUndefined();
+    });
+
+    it('does not trigger the re-layout after instance is unused', async () => {
+      const emitter = new Emitter();
+
+      instance.unuse(extension);
+      instance.onDidLayoutChange = emitter.event;
+
+      // we have to re-use the extension to pick up the emitter
+      extension = instance.use({
+        definition: EditorMarkdownPreviewExtension,
+        setupOptions: { previewMarkdownPath },
+      });
+      instance.unuse(extension);
+      const layoutSpy = jest.spyOn(instance, 'layout');
+
+      await emitter.fire();
+      expect(layoutSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe('fetchPreview', () => {
diff --git a/spec/frontend/editor/source_editor_webide_ext_spec.js b/spec/frontend/editor/source_editor_webide_ext_spec.js
new file mode 100644
index 00000000000..096b6b1646f
--- /dev/null
+++ b/spec/frontend/editor/source_editor_webide_ext_spec.js
@@ -0,0 +1,55 @@
+import { Emitter } from 'monaco-editor';
+import { setHTMLFixture } from 'helpers/fixtures';
+import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext';
+import SourceEditor from '~/editor/source_editor';
+
+describe('Source Editor Web IDE Extension', () => {
+  let editorEl;
+  let editor;
+  let instance;
+
+  beforeEach(() => {
+    setHTMLFixture('<div id="editor" data-editor-loading></div>');
+    editorEl = document.getElementById('editor');
+    editor = new SourceEditor();
+  });
+  afterEach(() => {});
+
+  describe('onSetup', () => {
+    it.each`
+      width      | renderSideBySide
+      ${'0'}     | ${false}
+      ${'699px'} | ${false}
+      ${'700px'} | ${true}
+    `(
+      "correctly renders the Diff Editor when the parent element's width is $width",
+      ({ width, renderSideBySide }) => {
+        editorEl.style.width = width;
+        instance = editor.createDiffInstance({ el: editorEl });
+
+        const sideBySideSpy = jest.spyOn(instance, 'updateOptions');
+        instance.use({ definition: EditorWebIdeExtension });
+
+        expect(sideBySideSpy).toBeCalledWith({ renderSideBySide });
+      },
+    );
+
+    it('re-renders the Diff Editor when layout of the modified editor is changed', async () => {
+      const emitter = new Emitter();
+      editorEl.style.width = '700px';
+
+      instance = editor.createDiffInstance({ el: editorEl });
+      instance.getModifiedEditor().onDidLayoutChange = emitter.event;
+      instance.use({ definition: EditorWebIdeExtension });
+
+      const sideBySideSpy = jest.spyOn(instance, 'updateOptions');
+      await emitter.fire();
+
+      expect(sideBySideSpy).toBeCalledWith({ renderSideBySide: true });
+
+      editorEl.style.width = '0px';
+      await emitter.fire();
+      expect(sideBySideSpy).toBeCalledWith({ renderSideBySide: false });
+    });
+  });
+});