Improve design presentation specs for click drag

- test onPresentationMousedown in place of is DesignOverflowing
- minor cleanup

ee/app/assets/javascripts/design_management/components/design_overlay.vue

@@ -39,13 +39,14 @@ export default {
   },
   computed: {
     overlayStyle() {
-      const baseStyle = {
+      const cursor = this.disableCommenting ? 'unset' : undefined;
+
+      return {
+        cursor,
         width: `${this.dimensions.width}px`,
         height: `${this.dimensions.height}px`,
         ...this.position,
       };
-
-      return this.disableCommenting ? Object.assign(baseStyle, { cursor: 'unset' }) : baseStyle;
     },
     isMovingCurrentComment() {
       return Boolean(this.movingNoteStartPosition && !this.movingNoteStartPosition.noteId);

ee/app/assets/javascripts/design_management/components/design_presentation.vue

@@ -47,7 +47,6 @@ export default {
       },
       initialLoad: true,
       lastDragPosition: null,
-      isDraggingDesign: false,
     };
   },
   computed: {
@@ -58,11 +57,12 @@ export default {
       return (this.isAnnotating && this.currentAnnotationPosition) || null;
     },
     presentationStyle() {
-      return this.isDraggingDesign
-        ? {
-            cursor: 'grabbing',
-          }
-        : undefined;
+      return {
+        cursor: this.isDraggingDesign ? 'grabbing' : undefined,
+      };
+    },
+    isDraggingDesign() {
+      return Boolean(this.lastDragPosition);
     },
   },
   beforeDestroy() {
@@ -225,7 +225,6 @@ export default {
     },
     onPresentationMousemove({ clientX, clientY }) {
       if (!this.lastDragPosition) return;
-      this.isDraggingDesign = true;
 
       const { presentationViewport } = this.$refs;
       if (!presentationViewport) return;
@@ -242,7 +241,6 @@ export default {
     },
     onPresentationMouseup() {
       this.lastDragPosition = null;
-      this.isDraggingDesign = false;
     },
     isDesignOverflowing() {
       const { presentationContainer } = this.$refs;

ee/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design management design presentation component currentCommentForm currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = `
+exports[`Design management design presentation component currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = `
 <div
   class="h-100 w-100 p-3 overflow-auto position-relative"
 >
@@ -23,7 +23,7 @@ exports[`Design management design presentation component currentCommentForm curr
 </div>
 `;
 
-exports[`Design management design presentation component currentCommentForm currentCommentForm is null when isAnnotating is false 1`] = `
+exports[`Design management design presentation component currentCommentForm is null when isAnnotating is false 1`] = `
 <div
   class="h-100 w-100 p-3 overflow-auto position-relative"
 >
@@ -45,7 +45,7 @@ exports[`Design management design presentation component currentCommentForm curr
 </div>
 `;
 
-exports[`Design management design presentation component currentCommentForm currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = `
+exports[`Design management design presentation component currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = `
 <div
   class="h-100 w-100 p-3 overflow-auto position-relative"
 >

ee/spec/frontend/design_management/components/design_presentation_spec.js

@@ -128,7 +128,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('currentCommentForm', () => {
-    it('currentCommentForm is null when isAnnotating is false', () => {
+    it('is null when isAnnotating is false', () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -143,7 +143,7 @@ describe('Design management design presentation component', () => {
       });
     });
 
-    it('currentCommentForm is null when isAnnotating is true but annotation position is falsey', () => {
+    it('is null when isAnnotating is true but annotation position is falsey', () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -159,7 +159,7 @@ describe('Design management design presentation component', () => {
       });
     });
 
-    it('currentCommentForm is equal to current annotation position when isAnnotating is true', () => {
+    it('is equal to current annotation position when isAnnotating is true', () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -176,6 +176,7 @@ describe('Design management design presentation component', () => {
           },
         },
       );
+
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toEqual({
           x: 1,
@@ -384,21 +385,43 @@ describe('Design management design presentation component', () => {
     });
   });
 
-  describe('isDesignOverflowing', () => {
+  describe('onPresentationMousedown', () => {
     it.each`
-      scenario                        | width  | height | isOverflowing
-      ${'width overflows'}            | ${101} | ${100} | ${true}
-      ${'height overflows'}           | ${100} | ${101} | ${true}
-      ${'width and height overflows'} | ${200} | ${200} | ${true}
-      ${'is smaller than container'}  | ${100} | ${100} | ${false}
-    `('returns $isOverflowing when design $scenario', ({ width, height, isOverflowing }) => {
+      scenario                        | width  | height
+      ${'width overflows'}            | ${101} | ${100}
+      ${'height overflows'}           | ${100} | ${101}
+      ${'width and height overflows'} | ${200} | ${200}
+    `('sets lastDragPosition when design $scenario', ({ width, height }) => {
       createComponent();
       mockRefDimensions(
         wrapper.vm.$refs.presentationContainer,
         { width: 100, height: 100 },
         { width, height },
       );
-      expect(wrapper.vm.isDesignOverflowing()).toBe(isOverflowing);
+
+      const newLastDragPosition = { x: 2, y: 2 };
+      wrapper.vm.onPresentationMousedown({
+        clientX: newLastDragPosition.x,
+        clientY: newLastDragPosition.y,
+      });
+
+      expect(wrapper.vm.lastDragPosition).toStrictEqual(newLastDragPosition);
+    });
+
+    it('does not set lastDragPosition if design does not overflow', () => {
+      const lastDragPosition = { x: 1, y: 1 };
+
+      createComponent({}, { lastDragPosition });
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationContainer,
+        { width: 100, height: 100 },
+        { width: 50, height: 50 },
+      );
+
+      wrapper.vm.onPresentationMousedown({ clientX: 2, clientY: 2 });
+
+      // check lastDragPosition is unchanged
+      expect(wrapper.vm.lastDragPosition).toStrictEqual(lastDragPosition);
     });
   });
 
@@ -416,7 +439,7 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
       mockRefDimensions(
-        wrapper.vm.$refs.presentationViewport,
+        wrapper.vm.$refs.presentationContainer,
         { width: 10, height: 10 },
         { width: 20, height: 20 },
         0,
@@ -424,7 +447,6 @@ describe('Design management design presentation component', () => {
       );
 
       wrapper.element.scrollTo = jest.fn();
-      wrapper.vm.isDesignOverflowing = jest.fn().mockReturnValue(true);
       return clickDragExplore(
         { clientX: 0, clientY: 0 },
         { clientX: 10, clientY: 10 },