1 files changed, 139 insertions, 0 deletions
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
new file mode 100644
index 00000000000..46523baadf3
--- /dev/null
+++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
@@ -0,0 +1,139 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+
+import { mockProjectPath, mockDefaultBranch, mockCiConfigPath, mockCiYml } from './mock_data';
+import TextEditor from '~/pipeline_editor/components/text_editor.vue';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
+import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
+
+describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
+  let wrapper;
+
+  const createComponent = (
+    { props = {}, data = {}, loading = false } = {},
+    mountFn = shallowMount,
+  ) => {
+    wrapper = mountFn(PipelineEditorApp, {
+      propsData: {
+        projectPath: mockProjectPath,
+        defaultBranch: mockDefaultBranch,
+        ciConfigPath: mockCiConfigPath,
+        ...props,
+      },
+      data() {
+        return data;
+      },
+      stubs: {
+        GlTabs,
+        TextEditor,
+      },
+      mocks: {
+        $apollo: {
+          queries: {
+            content: {
+              loading,
+            },
+          },
+        },
+      },
+    });
+  };
+
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findAlert = () => wrapper.find(GlAlert);
+  const findTabAt = i => wrapper.findAll(GlTab).at(i);
+  const findEditorLite = () => wrapper.find(EditorLite);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays content', () => {
+    createComponent({ data: { content: mockCiYml } });
+
+    expect(findLoadingIcon().exists()).toBe(false);
+    expect(findEditorLite().props('value')).toBe(mockCiYml);
+  });
+
+  it('displays a loading icon if the query is loading', () => {
+    createComponent({ loading: true });
+
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
+
+  describe('tabs', () => {
+    it('displays tabs and their content', () => {
+      createComponent({ data: { content: mockCiYml } });
+
+      expect(
+        findTabAt(0)
+          .find(EditorLite)
+          .exists(),
+      ).toBe(true);
+      expect(
+        findTabAt(1)
+          .find(PipelineGraph)
+          .exists(),
+      ).toBe(true);
+    });
+
+    it('displays editor tab lazily, until editor is ready', async () => {
+      createComponent({ data: { content: mockCiYml } });
+
+      expect(findTabAt(0).attributes('lazy')).toBe('true');
+
+      findEditorLite().vm.$emit('editor-ready');
+      await nextTick();
+
+      expect(findTabAt(0).attributes('lazy')).toBe(undefined);
+    });
+  });
+
+  describe('when in error state', () => {
+    class MockError extends Error {
+      constructor(message, data) {
+        super(message);
+        if (data) {
+          this.networkError = {
+            response: { data },
+          };
+        }
+      }
+    }
+
+    it('shows a generic error', () => {
+      const error = new MockError('An error message');
+      createComponent({ data: { error } });
+
+      expect(findAlert().text()).toBe('CI file could not be loaded: An error message');
+    });
+
+    it('shows a ref missing error state', () => {
+      const error = new MockError('Ref missing!', {
+        error: 'ref is missing, ref is empty',
+      });
+      createComponent({ data: { error } });
+
+      expect(findAlert().text()).toMatch(
+        'CI file could not be loaded: ref is missing, ref is empty',
+      );
+    });
+
+    it('shows a file missing error state', async () => {
+      const error = new MockError('File missing!', {
+        message: 'file not found',
+      });
+
+      await wrapper.setData({ error });
+
+      expect(findAlert().text()).toMatch('CI file could not be loaded: file not found');
+    });
+  });
+});