1 files changed, 131 insertions, 40 deletions
diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js
index 666b4cfaa2f..7dea6d819b9 100644
--- a/spec/frontend/pipelines/components/dag/dag_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_spec.js
@@ -2,17 +2,28 @@ 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 { GlAlert, GlEmptyState } from '@gitlab/ui';
 import Dag from '~/pipelines/components/dag/dag.vue';
 import DagGraph from '~/pipelines/components/dag/dag_graph.vue';
+import DagAnnotations from '~/pipelines/components/dag/dag_annotations.vue';
 
 import {
+  ADD_NOTE,
+  REMOVE_NOTE,
+  REPLACE_NOTES,
   DEFAULT,
   PARSE_FAILURE,
   LOAD_FAILURE,
   UNSUPPORTED_DATA,
 } from '~/pipelines/components/dag//constants';
-import { mockBaseData, tooSmallGraph, unparseableGraph } from './mock_data';
+import {
+  mockBaseData,
+  tooSmallGraph,
+  unparseableGraph,
+  graphWithoutDependencies,
+  singleNote,
+  multiNote,
+} from './mock_data';
 
 describe('Pipeline DAG graph wrapper', () => {
   let wrapper;
@@ -20,7 +31,9 @@ describe('Pipeline DAG graph wrapper', () => {
   const getAlert = () => wrapper.find(GlAlert);
   const getAllAlerts = () => wrapper.findAll(GlAlert);
   const getGraph = () => wrapper.find(DagGraph);
+  const getNotes = () => wrapper.find(DagAnnotations);
   const getErrorText = type => wrapper.vm.$options.errorTexts[type];
+  const getEmptyState = () => wrapper.find(GlEmptyState);
 
   const dataPath = '/root/test/pipelines/90/dag.json';
 
@@ -30,7 +43,11 @@ describe('Pipeline DAG graph wrapper', () => {
     }
 
     wrapper = method(Dag, {
-      propsData,
+      propsData: {
+        emptySvgPath: '/my-svg',
+        dagDocPath: '/my-doc',
+        ...propsData,
+      },
       data() {
         return {
           showFailureAlert: false,
@@ -59,79 +76,153 @@ describe('Pipeline DAG graph wrapper', () => {
       expect(getAlert().text()).toBe(getErrorText(DEFAULT));
       expect(getGraph().exists()).toBe(false);
     });
+
+    it('does not render the empty state', () => {
+      expect(getEmptyState().exists()).toBe(false);
+    });
   });
 
   describe('when there is a dataUrl', () => {
     describe('but the data fetch fails', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mock.onGet(dataPath).replyOnce(500);
         createComponent({ graphUrl: dataPath });
+
+        await wrapper.vm.$nextTick();
+
+        return waitForPromises();
       });
 
       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);
-          });
+        expect(getAlert().exists()).toBe(true);
+        expect(getAlert().text()).toBe(getErrorText(LOAD_FAILURE));
+        expect(getGraph().exists()).toBe(false);
+      });
+
+      it('does not render the empty state', () => {
+        expect(getEmptyState().exists()).toBe(false);
       });
     });
 
     describe('the data fetch succeeds but the parse fails', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mock.onGet(dataPath).replyOnce(200, unparseableGraph);
         createComponent({ graphUrl: dataPath });
+
+        await wrapper.vm.$nextTick();
+
+        return waitForPromises();
       });
 
       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);
-          });
+        expect(getAlert().exists()).toBe(true);
+        expect(getAlert().text()).toBe(getErrorText(PARSE_FAILURE));
+        expect(getGraph().exists()).toBe(false);
+      });
+
+      it('does not render the empty state', () => {
+        expect(getEmptyState().exists()).toBe(false);
       });
     });
 
     describe('and the data fetch and parse succeeds', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mock.onGet(dataPath).replyOnce(200, mockBaseData);
         createComponent({ graphUrl: dataPath }, mount);
+
+        await wrapper.vm.$nextTick();
+
+        return waitForPromises();
       });
 
-      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);
-          });
+      it('shows the graph and the beta alert', () => {
+        expect(getAllAlerts().length).toBe(1);
+        expect(getAlert().text()).toContain('This feature is currently in beta.');
+        expect(getGraph().exists()).toBe(true);
+      });
+
+      it('does not render the empty state', () => {
+        expect(getEmptyState().exists()).toBe(false);
       });
     });
 
     describe('the data fetch and parse succeeds, but the resulting graph is too small', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mock.onGet(dataPath).replyOnce(200, tooSmallGraph);
         createComponent({ graphUrl: dataPath });
+
+        await wrapper.vm.$nextTick();
+
+        return waitForPromises();
       });
 
       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);
-          });
+        expect(getAlert().exists()).toBe(true);
+        expect(getAlert().text()).toBe(getErrorText(UNSUPPORTED_DATA));
+        expect(getGraph().exists()).toBe(false);
+      });
+
+      it('does not show the empty dag graph state', () => {
+        expect(getEmptyState().exists()).toBe(false);
+      });
+    });
+
+    describe('the data fetch succeeds but the returned data is empty', () => {
+      beforeEach(async () => {
+        mock.onGet(dataPath).replyOnce(200, graphWithoutDependencies);
+        createComponent({ graphUrl: dataPath }, mount);
+
+        await wrapper.vm.$nextTick();
+
+        return waitForPromises();
+      });
+
+      it('does not render an error alert or the graph', () => {
+        expect(getAllAlerts().length).toBe(1);
+        expect(getAlert().text()).toContain('This feature is currently in beta.');
+        expect(getGraph().exists()).toBe(false);
       });
+
+      it('shows the empty dag graph state', () => {
+        expect(getEmptyState().exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('annotations', () => {
+    beforeEach(async () => {
+      mock.onGet(dataPath).replyOnce(200, mockBaseData);
+      createComponent({ graphUrl: dataPath }, mount);
+
+      await wrapper.vm.$nextTick();
+
+      return waitForPromises();
+    });
+
+    it('toggles on link mouseover and mouseout', async () => {
+      const currentNote = singleNote['dag-link103'];
+
+      expect(getNotes().exists()).toBe(false);
+
+      getGraph().vm.$emit('update-annotation', { type: ADD_NOTE, data: currentNote });
+      await wrapper.vm.$nextTick();
+      expect(getNotes().exists()).toBe(true);
+
+      getGraph().vm.$emit('update-annotation', { type: REMOVE_NOTE, data: currentNote });
+      await wrapper.vm.$nextTick();
+      expect(getNotes().exists()).toBe(false);
+    });
+
+    it('toggles on node and link click', async () => {
+      expect(getNotes().exists()).toBe(false);
+
+      getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: multiNote });
+      await wrapper.vm.$nextTick();
+      expect(getNotes().exists()).toBe(true);
+
+      getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: {} });
+      await wrapper.vm.$nextTick();
+      expect(getNotes().exists()).toBe(false);
     });
   });
 });