1 files changed, 137 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js
new file mode 100644
index 00000000000..666b4cfaa2f
--- /dev/null
+++ b/spec/frontend/pipelines/components/dag/dag_spec.js
@@ -0,0 +1,137 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import waitForPromises from 'helpers/wait_for_promises';
+import { GlAlert } from '@gitlab/ui';
+import Dag from '~/pipelines/components/dag/dag.vue';
+import DagGraph from '~/pipelines/components/dag/dag_graph.vue';
+
+import {
+  DEFAULT,
+  PARSE_FAILURE,
+  LOAD_FAILURE,
+  UNSUPPORTED_DATA,
+} from '~/pipelines/components/dag//constants';
+import { mockBaseData, tooSmallGraph, unparseableGraph } from './mock_data';
+
+describe('Pipeline DAG graph wrapper', () => {
+  let wrapper;
+  let mock;
+  const getAlert = () => wrapper.find(GlAlert);
+  const getAllAlerts = () => wrapper.findAll(GlAlert);
+  const getGraph = () => wrapper.find(DagGraph);
+  const getErrorText = type => wrapper.vm.$options.errorTexts[type];
+
+  const dataPath = '/root/test/pipelines/90/dag.json';
+
+  const createComponent = (propsData = {}, method = shallowMount) => {
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+    }
+
+    wrapper = method(Dag, {
+      propsData,
+      data() {
+        return {
+          showFailureAlert: false,
+        };
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when there is no dataUrl', () => {
+    beforeEach(() => {
+      createComponent({ graphUrl: undefined });
+    });
+
+    it('shows the DEFAULT alert and not the graph', () => {
+      expect(getAlert().exists()).toBe(true);
+      expect(getAlert().text()).toBe(getErrorText(DEFAULT));
+      expect(getGraph().exists()).toBe(false);
+    });
+  });
+
+  describe('when there is a dataUrl', () => {
+    describe('but the data fetch fails', () => {
+      beforeEach(() => {
+        mock.onGet(dataPath).replyOnce(500);
+        createComponent({ graphUrl: dataPath });
+      });
+
+      it('shows the LOAD_FAILURE alert and not the graph', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getAlert().exists()).toBe(true);
+            expect(getAlert().text()).toBe(getErrorText(LOAD_FAILURE));
+            expect(getGraph().exists()).toBe(false);
+          });
+      });
+    });
+
+    describe('the data fetch succeeds but the parse fails', () => {
+      beforeEach(() => {
+        mock.onGet(dataPath).replyOnce(200, unparseableGraph);
+        createComponent({ graphUrl: dataPath });
+      });
+
+      it('shows the PARSE_FAILURE alert and not the graph', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getAlert().exists()).toBe(true);
+            expect(getAlert().text()).toBe(getErrorText(PARSE_FAILURE));
+            expect(getGraph().exists()).toBe(false);
+          });
+      });
+    });
+
+    describe('and the data fetch and parse succeeds', () => {
+      beforeEach(() => {
+        mock.onGet(dataPath).replyOnce(200, mockBaseData);
+        createComponent({ graphUrl: dataPath }, mount);
+      });
+
+      it('shows the graph and not the beta alert', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getAllAlerts().length).toBe(1);
+            expect(getAlert().text()).toContain('This feature is currently in beta.');
+            expect(getGraph().exists()).toBe(true);
+          });
+      });
+    });
+
+    describe('the data fetch and parse succeeds, but the resulting graph is too small', () => {
+      beforeEach(() => {
+        mock.onGet(dataPath).replyOnce(200, tooSmallGraph);
+        createComponent({ graphUrl: dataPath });
+      });
+
+      it('shows the UNSUPPORTED_DATA alert and not the graph', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getAlert().exists()).toBe(true);
+            expect(getAlert().text()).toBe(getErrorText(UNSUPPORTED_DATA));
+            expect(getGraph().exists()).toBe(false);
+          });
+      });
+    });
+  });
+});