2 files changed, 208 insertions, 0 deletions
diff --git a/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js b/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
new file mode 100644
index 00000000000..866069f337b
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
@@ -0,0 +1,88 @@
+import { GlAlert, GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import { EDITOR_READY_EVENT } from '~/editor/constants';
+import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
+import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import { INVALID_CI_CONFIG } from '~/pipelines/constants';
+import { mockLintResponse, mockCiConfigPath } from '../../mock_data';
+
+describe('Text editor component', () => {
+  let wrapper;
+
+  const MockEditorLite = {
+    template: '<div/>',
+    props: ['value', 'fileName', 'editorOptions'],
+    mounted() {
+      this.$emit(EDITOR_READY_EVENT);
+    },
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(CiConfigMergedPreview, {
+      propsData: {
+        ciConfigData: mockLintResponse,
+        ...props,
+      },
+      provide: {
+        ciConfigPath: mockCiConfigPath,
+      },
+      stubs: {
+        EditorLite: MockEditorLite,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findEditor = () => wrapper.findComponent(MockEditorLite);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when status is invalid', () => {
+    beforeEach(() => {
+      createComponent({ props: { ciConfigData: { status: CI_CONFIG_STATUS_INVALID } } });
+    });
+
+    it('show an error message', () => {
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[INVALID_CI_CONFIG]);
+    });
+
+    it('hides the editor', () => {
+      expect(findEditor().exists()).toBe(false);
+    });
+  });
+
+  describe('when status is valid', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows an information message that the section is not editable', () => {
+      expect(findIcon().exists()).toBe(true);
+      expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.viewOnlyMessage);
+    });
+
+    it('contains an editor', () => {
+      expect(findEditor().exists()).toBe(true);
+    });
+
+    it('editor contains the value provided', () => {
+      expect(findEditor().props('value')).toBe(mockLintResponse.mergedYaml);
+    });
+
+    it('editor is configured for the CI config path', () => {
+      expect(findEditor().props('fileName')).toBe(mockCiConfigPath);
+    });
+
+    it('editor is readonly', () => {
+      expect(findEditor().props('editorOptions')).toMatchObject({
+        readOnly: true,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js b/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
new file mode 100644
index 00000000000..3bf5a291c69
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
@@ -0,0 +1,120 @@
+import { shallowMount } from '@vue/test-utils';
+
+import { EDITOR_READY_EVENT } from '~/editor/constants';
+import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
+import {
+  mockCiConfigPath,
+  mockCiYml,
+  mockCommitSha,
+  mockProjectPath,
+  mockProjectNamespace,
+} from '../../mock_data';
+
+describe('Pipeline Editor | Text editor component', () => {
+  let wrapper;
+
+  let editorReadyListener;
+  let mockUse;
+  let mockRegisterCiSchema;
+
+  const MockEditorLite = {
+    template: '<div/>',
+    props: ['value', 'fileName'],
+    mounted() {
+      this.$emit(EDITOR_READY_EVENT);
+    },
+    methods: {
+      getEditor: () => ({
+        use: mockUse,
+        registerCiSchema: mockRegisterCiSchema,
+      }),
+    },
+  };
+
+  const createComponent = (opts = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(TextEditor, {
+      provide: {
+        projectPath: mockProjectPath,
+        projectNamespace: mockProjectNamespace,
+        ciConfigPath: mockCiConfigPath,
+      },
+      attrs: {
+        value: mockCiYml,
+      },
+      // Simulate graphQL client query result
+      data() {
+        return {
+          commitSha: mockCommitSha,
+        };
+      },
+      listeners: {
+        [EDITOR_READY_EVENT]: editorReadyListener,
+      },
+      stubs: {
+        EditorLite: MockEditorLite,
+      },
+      ...opts,
+    });
+  };
+
+  const findEditor = () => wrapper.findComponent(MockEditorLite);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+
+    mockUse.mockClear();
+    mockRegisterCiSchema.mockClear();
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      editorReadyListener = jest.fn();
+      mockUse = jest.fn();
+      mockRegisterCiSchema = jest.fn();
+
+      createComponent();
+    });
+
+    it('contains an editor', () => {
+      expect(findEditor().exists()).toBe(true);
+    });
+
+    it('editor contains the value provided', () => {
+      expect(findEditor().props('value')).toBe(mockCiYml);
+    });
+
+    it('editor is configured for the CI config path', () => {
+      expect(findEditor().props('fileName')).toBe(mockCiConfigPath);
+    });
+
+    it('bubbles up events', () => {
+      findEditor().vm.$emit(EDITOR_READY_EVENT);
+
+      expect(editorReadyListener).toHaveBeenCalled();
+    });
+  });
+
+  describe('register CI schema', () => {
+    beforeEach(async () => {
+      createComponent();
+
+      // 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);
+    });
+
+    it('configures editor with syntax highlight', async () => {
+      expect(mockUse).toHaveBeenCalledTimes(1);
+      expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
+      expect(mockRegisterCiSchema).toHaveBeenCalledWith({
+        projectNamespace: mockProjectNamespace,
+        projectPath: mockProjectPath,
+        ref: mockCommitSha,
+      });
+    });
+  });
+});