Fix schema registration in the pipeline editor

Changelog: fixed

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

@@ -15,12 +15,10 @@ export default {
     onCiConfigUpdate(content) {
       this.$emit('updateCiConfig', content);
     },
-    registerCiSchema() {
+    registerCiSchema({ detail: { instance } }) {
       if (this.glFeatures.schemaLinting) {
-        const editorInstance = this.$refs.editor.getEditor();
-
-        editorInstance.use({ definition: CiSchemaExtension });
-        editorInstance.registerCiSchema();
+        instance.use({ definition: CiSchemaExtension });
+        instance.registerCiSchema();
       }
     },
   },
@@ -33,7 +31,7 @@ export default {
       ref="editor"
       :file-name="ciConfigPath"
       v-bind="$attrs"
-      @[$options.readyEvent]="registerCiSchema"
+      @[$options.readyEvent]="registerCiSchema($event)"
       @input="onCiConfigUpdate"
       v-on="$listeners"
     />

app/assets/javascripts/vue_shared/components/source_editor.vue

@@ -97,7 +97,7 @@ export default {
     ref="editor"
     data-editor-loading
     data-qa-selector="source_editor_container"
-    @[$options.readyEvent]="$emit($options.readyEvent)"
+    @[$options.readyEvent]="$emit($options.readyEvent, $event)"
   >
     <pre class="editor-loading-content">{{ value }}</pre>
   </div>

spec/frontend/pipeline_editor/components/editor/text_editor_spec.js

@@ -17,19 +17,12 @@ describe('Pipeline Editor | Text editor component', () => {
   let editorReadyListener;
   let mockUse;
   let mockRegisterCiSchema;
+  let mockEditorInstance;
+  let editorInstanceDetail;
 
   const MockSourceEditor = {
     template: '<div/>',
     props: ['value', 'fileName'],
-    mounted() {
-      this.$emit(EDITOR_READY_EVENT);
-    },
-    methods: {
-      getEditor: () => ({
-        use: mockUse,
-        registerCiSchema: mockRegisterCiSchema,
-      }),
-    },
   };
 
   const createComponent = (glFeatures = {}, mountFn = shallowMount) => {
@@ -58,6 +51,21 @@ describe('Pipeline Editor | Text editor component', () => {
 
   const findEditor = () => wrapper.findComponent(MockSourceEditor);
 
+  beforeEach(() => {
+    editorReadyListener = jest.fn();
+    mockUse = jest.fn();
+    mockRegisterCiSchema = jest.fn();
+    mockEditorInstance = {
+      use: mockUse,
+      registerCiSchema: mockRegisterCiSchema,
+    };
+    editorInstanceDetail = {
+      detail: {
+        instance: mockEditorInstance,
+      },
+    };
+  });
+
   afterEach(() => {
     wrapper.destroy();
 
@@ -67,10 +75,6 @@ describe('Pipeline Editor | Text editor component', () => {
 
   describe('template', () => {
     beforeEach(() => {
-      editorReadyListener = jest.fn();
-      mockUse = jest.fn();
-      mockRegisterCiSchema = jest.fn();
-
       createComponent();
     });
 
@@ -87,7 +91,7 @@ describe('Pipeline Editor | Text editor component', () => {
     });
 
     it('bubbles up events', () => {
-      findEditor().vm.$emit(EDITOR_READY_EVENT);
+      findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
 
       expect(editorReadyListener).toHaveBeenCalled();
     });
@@ -97,11 +101,7 @@ describe('Pipeline Editor | Text editor component', () => {
     describe('when `schema_linting` feature flag is on', () => {
       beforeEach(() => {
         createComponent({ schemaLinting: true });
-        // Since the editor will have already mounted, the event will have fired.
-        // To ensure we properly test this, we clear the mock and re-remit the event.
-        mockRegisterCiSchema.mockClear();
-        mockUse.mockClear();
-        findEditor().vm.$emit(EDITOR_READY_EVENT);
+        findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
       });
 
       it('configures editor with syntax highlight', () => {
@@ -113,7 +113,7 @@ describe('Pipeline Editor | Text editor component', () => {
     describe('when `schema_linting` feature flag is off', () => {
       beforeEach(() => {
         createComponent();
-        findEditor().vm.$emit(EDITOR_READY_EVENT);
+        findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
       });
 
       it('does not call the register CI schema function', () => {