1 files changed, 49 insertions, 68 deletions
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index adec9ef469d..d79dde84d46 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -74,7 +74,7 @@ describe('Design management design presentation component', () => {
       .mockReturnValue((childDimensions.height - viewportDimensions.height) * scrollTopPerc);
   }
 
-  function clickDragExplore(startCoords, endCoords, { useTouchEvents, mouseup } = {}) {
+  async function clickDragExplore(startCoords, endCoords, { useTouchEvents, mouseup } = {}) {
     const event = useTouchEvents
       ? {
           mousedown: 'touchstart',
@@ -96,24 +96,17 @@ describe('Design management design presentation component', () => {
       clientX: startCoords.clientX,
       clientY: startCoords.clientY,
     });
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
-        addCommentOverlay.trigger(event.mousemove, {
-          clientX: endCoords.clientX,
-          clientY: endCoords.clientY,
-        });
-
-        return nextTick();
-      })
-      .then(() => {
-        if (mouseup) {
-          addCommentOverlay.trigger(event.mouseup);
-          return nextTick();
-        }
+    await nextTick();
+    addCommentOverlay.trigger(event.mousemove, {
+      clientX: endCoords.clientX,
+      clientY: endCoords.clientY,
+    });
 
-        return undefined;
-      });
+    await nextTick();
+    if (mouseup) {
+      addCommentOverlay.trigger(event.mouseup);
+      await nextTick();
+    }
   }
 
   beforeEach(() => {
@@ -125,7 +118,7 @@ describe('Design management design presentation component', () => {
     window.gon = originalGon;
   });
 
-  it('renders image and overlay when image provided', () => {
+  it('renders image and overlay when image provided', async () => {
     createComponent(
       {
         image: 'test.jpg',
@@ -134,20 +127,18 @@ describe('Design management design presentation component', () => {
       mockOverlayData,
     );
 
-    return nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders empty state when no image provided', () => {
+  it('renders empty state when no image provided', async () => {
     createComponent();
 
-    return nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('openCommentForm event emits correct data', () => {
+  it('openCommentForm event emits correct data', async () => {
     createComponent(
       {
         image: 'test.jpg',
@@ -158,15 +149,14 @@ describe('Design management design presentation component', () => {
 
     wrapper.vm.openCommentForm({ x: 1, y: 1 });
 
-    return nextTick().then(() => {
-      expect(wrapper.emitted('openCommentForm')).toEqual([
-        [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
-      ]);
-    });
+    await nextTick();
+    expect(wrapper.emitted('openCommentForm')).toEqual([
+      [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
+    ]);
   });
 
   describe('currentCommentForm', () => {
-    it('is null when isAnnotating is false', () => {
+    it('is null when isAnnotating is false', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -175,13 +165,12 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toBeNull();
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toBeNull();
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('is null when isAnnotating is true but annotation position is falsey', () => {
+    it('is null when isAnnotating is true but annotation position is falsey', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -191,13 +180,12 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toBeNull();
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toBeNull();
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('is equal to current annotation position when isAnnotating is true', () => {
+    it('is equal to current annotation position when isAnnotating is true', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -215,15 +203,14 @@ describe('Design management design presentation component', () => {
         },
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toEqual({
-          x: 1,
-          y: 1,
-          width: 100,
-          height: 100,
-        });
-        expect(wrapper.element).toMatchSnapshot();
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toEqual({
+        x: 1,
+        y: 1,
+        width: 100,
+        height: 100,
       });
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 
@@ -388,7 +375,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('onImageResize', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -401,7 +388,7 @@ describe('Design management design presentation component', () => {
       jest.spyOn(wrapper.vm, 'scaleZoomFocalPoint');
       jest.spyOn(wrapper.vm, 'scrollToFocalPoint');
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return nextTick();
+      await nextTick();
     });
 
     it('sets zoom focal point on initial load', () => {
@@ -409,12 +396,11 @@ describe('Design management design presentation component', () => {
       expect(wrapper.vm.initialLoad).toBe(false);
     });
 
-    it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', () => {
+    it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', async () => {
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return nextTick().then(() => {
-        expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
-        expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
+      expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
     });
   });
 
@@ -498,7 +484,7 @@ describe('Design management design presentation component', () => {
       );
     });
 
-    it('opens a comment form if design was not dragged', () => {
+    it('opens a comment form if design was not dragged', async () => {
       const addCommentOverlay = findOverlayCommentButton();
       const startCoords = {
         clientX: 1,
@@ -510,15 +496,10 @@ describe('Design management design presentation component', () => {
         clientY: startCoords.clientY,
       });
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          addCommentOverlay.trigger('mouseup');
-          return nextTick();
-        })
-        .then(() => {
-          expect(wrapper.emitted('openCommentForm')).toBeDefined();
-        });
+      await nextTick();
+      addCommentOverlay.trigger('mouseup');
+      await nextTick();
+      expect(wrapper.emitted('openCommentForm')).toBeDefined();
     });
 
     describe('when clicking and dragging', () => {