1 files changed, 55 insertions, 0 deletions
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 });
+    });
+  });
+});