Replace promise chains with async/await

Clean code by putting mock promises
in the beforeEach and using
async await syntax.

spec/frontend/pipelines/components/dag/dag_spec.js

@@ -84,21 +84,20 @@ describe('Pipeline DAG graph wrapper', () => {
 
   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);
       });
-      });
 
       it('does not render the empty state', () => {
         expect(getEmptyState().exists()).toBe(false);
@@ -106,21 +105,20 @@ describe('Pipeline DAG graph wrapper', () => {
     });
 
     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);
       });
-      });
 
       it('does not render the empty state', () => {
         expect(getEmptyState().exists()).toBe(false);
@@ -128,133 +126,103 @@ describe('Pipeline DAG graph wrapper', () => {
     });
 
     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(() => {
+      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', () => {
-        return wrapper.vm
-          .$nextTick()
-          .then(waitForPromises)
-          .then(() => {
         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);
       });
-      });
 
       it('does not show the empty dag graph state', () => {
-        return wrapper.vm
-          .$nextTick()
-          .then(waitForPromises)
-          .then(() => {
         expect(getEmptyState().exists()).toBe(false);
       });
     });
-    });
 
-    describe('the data fetch and parse succeeds, but the resulting graph is empty', () => {
-      beforeEach(() => {
+    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', () => {
-        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(false);
       });
-      });
 
       it('shows the empty dag graph state', () => {
-        return wrapper.vm
-          .$nextTick()
-          .then(waitForPromises)
-          .then(() => {
         expect(getEmptyState().exists()).toBe(true);
       });
     });
   });
-  });
 
   describe('annotations', () => {
-    beforeEach(() => {
+    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', () => {
+    it('toggles on link mouseover and mouseout', async () => {
       const currentNote = singleNote['dag-link103'];
 
       expect(getNotes().exists()).toBe(false);
 
-      return wrapper.vm
-        .$nextTick()
-        .then(waitForPromises)
-        .then(() => {
       getGraph().vm.$emit('update-annotation', { type: ADD_NOTE, data: currentNote });
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await wrapper.vm.$nextTick();
       expect(getNotes().exists()).toBe(true);
+
       getGraph().vm.$emit('update-annotation', { type: REMOVE_NOTE, data: currentNote });
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await wrapper.vm.$nextTick();
       expect(getNotes().exists()).toBe(false);
     });
-    });
 
-    it('toggles on node and link click', () => {
+    it('toggles on node and link click', async () => {
       expect(getNotes().exists()).toBe(false);
 
-      return wrapper.vm
-        .$nextTick()
-        .then(waitForPromises)
-        .then(() => {
       getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: multiNote });
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await wrapper.vm.$nextTick();
       expect(getNotes().exists()).toBe(true);
+
       getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: {} });
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await wrapper.vm.$nextTick();
       expect(getNotes().exists()).toBe(false);
     });
   });
-  });
 });