2 files changed, 31 insertions, 23 deletions

diff --git a/spec/frontend/pipeline_wizard/components/commit_spec.js b/spec/frontend/pipeline_wizard/components/commit_spec.js
index 7095525e948..bb9a4b85e0e 100644
--- a/spec/frontend/pipeline_wizard/components/commit_spec.js
+++ b/spec/frontend/pipeline_wizard/components/commit_spec.js
@@ -141,10 +141,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       it('emits a done event', () => {
         expect(wrapper.emitted().done.length).toBe(1);
       });
-
-      afterEach(() => {
-        jest.clearAllMocks();
-      });
     });
 
     describe('failed commit', () => {
@@ -167,10 +163,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       it('will not emit a done event', () => {
         expect(wrapper.emitted().done?.length).toBeUndefined();
       });
-
-      afterEach(() => {
-        jest.clearAllMocks();
-      });
     });
   });
 
diff --git a/spec/frontend/pipeline_wizard/components/editor_spec.js b/spec/frontend/pipeline_wizard/components/editor_spec.js
index 6d7d4363189..2284c875f58 100644
--- a/spec/frontend/pipeline_wizard/components/editor_spec.js
+++ b/spec/frontend/pipeline_wizard/components/editor_spec.js
@@ -1,42 +1,58 @@
 import { mount } from '@vue/test-utils';
 import { Document } from 'yaml';
 import YamlEditor from '~/pipeline_wizard/components/editor.vue';
+import SourceEditor from '~/editor/source_editor';
 
 describe('Pages Yaml Editor wrapper', () => {
   let wrapper;
 
+  const defaultDoc = new Document({ foo: 'bar' });
+
   const defaultOptions = {
-    propsData: { doc: new Document({ foo: 'bar' }), filename: 'foo.yml' },
+    propsData: { doc: defaultDoc, filename: 'foo.yml' },
+  };
+
+  const getLatestValue = () => {
+    const latest = wrapper.emitted('update:yaml').pop();
+    return latest[0];
   };
 
   describe('mount hook', () => {
     beforeEach(() => {
+      jest.spyOn(SourceEditor.prototype, 'createInstance');
+
       wrapper = mount(YamlEditor, defaultOptions);
     });
 
-    it('editor is mounted', () => {
-      expect(wrapper.vm.editor).not.toBeUndefined();
-      expect(wrapper.find('.gl-source-editor').exists()).toBe(true);
+    it('creates a source editor instance', () => {
+      expect(SourceEditor.prototype.createInstance).toHaveBeenCalledWith({
+        el: wrapper.element,
+        blobPath: 'foo.yml',
+        language: 'yaml',
+      });
+    });
+
+    it('editor is mounted in the wrapper', () => {
+      expect(wrapper.find('.gl-source-editor.monaco-editor').exists()).toBe(true);
+    });
+
+    it("causes the editor's value to be set to the stringified document", () => {
+      expect(getLatestValue()).toEqual(defaultDoc.toString());
     });
   });
 
   describe('watchers', () => {
+    beforeEach(() => {
+      wrapper = mount(YamlEditor, defaultOptions);
+    });
+
     describe('doc', () => {
       const doc = new Document({ baz: ['bar'] });
 
-      beforeEach(() => {
-        wrapper = mount(YamlEditor, defaultOptions);
-      });
-
-      it("causes the editor's value to be set to the stringified document", async () => {
-        await wrapper.setProps({ doc });
-        expect(wrapper.vm.editor.getValue()).toEqual(doc.toString());
-      });
-
       it('emits an update:yaml event with the yaml representation of doc', async () => {
         await wrapper.setProps({ doc });
-        const changeEvents = wrapper.emitted('update:yaml');
-        expect(changeEvents[2]).toEqual([doc.toString()]);
+
+        expect(getLatestValue()).toEqual(doc.toString());
       });
 
       it('does not cause the touch event to be emitted', () => {