Test design presentation click drag

- Test isDesignOverflowing
- Test click and drag
- Test touch events

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

@@ -39,16 +39,13 @@ export default {
   },
   computed: {
     overlayStyle() {
-      const style = {
+      const baseStyle = {
         width: `${this.dimensions.width}px`,
         height: `${this.dimensions.height}px`,
         ...this.position,
       };
 
-      if (this.disableCommenting) {
-        style.cursor = 'unset';
-      }
-      return style;
+      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

@@ -46,7 +46,6 @@ export default {
         height: 0,
       },
       initialLoad: true,
-      mousedown: false,
       lastDragPosition: null,
       isDraggingDesign: false,
     };
@@ -234,7 +233,6 @@ export default {
       const { scrollLeft, scrollTop } = presentationViewport;
       const deltaX = this.lastDragPosition.x - clientX;
       const deltaY = this.lastDragPosition.y - clientY;
-
       presentationViewport.scrollTo(scrollLeft + deltaX, scrollTop + deltaY);
 
       this.lastDragPosition = {
@@ -244,7 +242,6 @@ export default {
     },
     onPresentationMouseup() {
       this.lastDragPosition = null;
-      this.mousedown = null;
       this.isDraggingDesign = false;
     },
     isDesignOverflowing() {

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

@@ -31,6 +31,58 @@ describe('Design management design presentation component', () => {
     wrapper.setData(data);
   }
 
+  /**
+   * Spy on $refs and mock given values
+   * @param {Object} viewportDimensions {width, height}
+   * @param {Object} childDimensions {width, height}
+   * @param {Float} scrollTopPerc 0 < x < 1
+   * @param {Float} scrollLeftPerc  0 < x < 1
+   */
+  function mockRefDimensions(
+    ref,
+    viewportDimensions,
+    childDimensions,
+    scrollTopPerc,
+    scrollLeftPerc,
+  ) {
+    jest.spyOn(ref, 'scrollWidth', 'get').mockReturnValue(childDimensions.width);
+    jest.spyOn(ref, 'scrollHeight', 'get').mockReturnValue(childDimensions.height);
+    jest.spyOn(ref, 'offsetWidth', 'get').mockReturnValue(viewportDimensions.width);
+    jest.spyOn(ref, 'offsetHeight', 'get').mockReturnValue(viewportDimensions.height);
+    jest
+      .spyOn(ref, 'scrollLeft', 'get')
+      .mockReturnValue((childDimensions.width - viewportDimensions.width) * scrollLeftPerc);
+    jest
+      .spyOn(ref, 'scrollTop', 'get')
+      .mockReturnValue((childDimensions.height - viewportDimensions.height) * scrollTopPerc);
+  }
+
+  function clickDragExplore(startCoords, endCoords, { useTouchEvents } = {}) {
+    const event = useTouchEvents
+      ? {
+          mousedown: 'touchstart',
+          mousemove: 'touchmove',
+          mouseup: 'touchend',
+        }
+      : {
+          mousedown: 'mousedown',
+          mousemove: 'mousemove',
+          mouseup: 'mouseup',
+        };
+
+    wrapper.trigger(event.mousedown, {
+      clientX: startCoords.clientX,
+      clientY: startCoords.clientY,
+    });
+    return wrapper.vm.$nextTick().then(() => {
+      wrapper.trigger(event.mousemove, {
+        clientX: endCoords.clientX,
+        clientY: endCoords.clientY,
+      });
+      return wrapper.vm.$nextTick();
+    });
+  }
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -190,39 +242,6 @@ describe('Design management design presentation component', () => {
   });
 
   describe('getViewportCenter', () => {
-    /**
-     * Spy on $refs.presentationViewport with given values
-     * @param {Object} viewportDimensions {width, height}
-     * @param {Object} childDimensions {width, height}
-     * @param {Float} scrollTopPerc 0 < x < 1
-     * @param {Float} scrollLeftPerc  0 < x < 1
-     */
-    const spyOnPresentationViewport = (
-      viewportDimensions,
-      childDimensions,
-      scrollTopPerc,
-      scrollLeftPerc,
-    ) => {
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'scrollWidth', 'get')
-        .mockReturnValue(childDimensions.width);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'scrollHeight', 'get')
-        .mockReturnValue(childDimensions.height);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get')
-        .mockReturnValue(viewportDimensions.width);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get')
-        .mockReturnValue(viewportDimensions.height);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'scrollLeft', 'get')
-        .mockReturnValue((childDimensions.width - viewportDimensions.width) * scrollLeftPerc);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationViewport, 'scrollTop', 'get')
-        .mockReturnValue((childDimensions.height - viewportDimensions.height) * scrollTopPerc);
-    };
-
     beforeEach(() => {
       createComponent(
         {
@@ -234,7 +253,13 @@ describe('Design management design presentation component', () => {
     });
 
     it('calculate center correctly with no scroll', () => {
-      spyOnPresentationViewport({ width: 10, height: 10 }, { width: 20, height: 20 }, 0, 0);
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationViewport,
+        { width: 10, height: 10 },
+        { width: 20, height: 20 },
+        0,
+        0,
+      );
 
       expect(wrapper.vm.getViewportCenter()).toEqual({
         x: 5,
@@ -243,7 +268,13 @@ describe('Design management design presentation component', () => {
     });
 
     it('calculate center correctly with some scroll', () => {
-      spyOnPresentationViewport({ width: 10, height: 10 }, { width: 20, height: 20 }, 0.5, 0.5);
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationViewport,
+        { width: 10, height: 10 },
+        { width: 20, height: 20 },
+        0.5,
+        0.5,
+      );
 
       expect(wrapper.vm.getViewportCenter()).toEqual({
         x: 10,
@@ -252,7 +283,13 @@ describe('Design management design presentation component', () => {
     });
 
     it('Returns default case if no overflow (scrollWidth==offsetWidth, etc.)', () => {
-      spyOnPresentationViewport({ width: 20, height: 20 }, { width: 20, height: 20 }, 0.5, 0.5);
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationViewport,
+        { width: 20, height: 20 },
+        { width: 20, height: 20 },
+        0.5,
+        0.5,
+      );
 
       expect(wrapper.vm.getViewportCenter()).toEqual({
         x: 10,
@@ -262,7 +299,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('scaleZoomFocalPoint', () => {
-    it('scaleZoomFocalPoint scales focal point correctly when zooming in', () => {
+    it('scales focal point correctly when zooming in', () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -288,7 +325,7 @@ describe('Design management design presentation component', () => {
       });
     });
 
-    it('scaleZoomFocalPoint scales focal point correctly when zooming out', () => {
+    it('scales focal point correctly when zooming out', () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -346,4 +383,56 @@ describe('Design management design presentation component', () => {
       });
     });
   });
+
+  describe('isDesignOverflowing', () => {
+    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 }) => {
+      createComponent();
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationContainer,
+        { width: 100, height: 100 },
+        { width, height },
+      );
+      expect(wrapper.vm.isDesignOverflowing()).toBe(isOverflowing);
+    });
+  });
+
+  describe('when clicking and dragging', () => {
+    it.each`
+      description               | useTouchEvents
+      ${'with touch events'}    | ${true}
+      ${'without touch events'} | ${false}
+    `('calls scrollTo with correct arguments $description', ({ useTouchEvents }) => {
+      createComponent(
+        {
+          image: 'test.jpg',
+          imageName: 'test',
+        },
+        mockOverlayData,
+      );
+      mockRefDimensions(
+        wrapper.vm.$refs.presentationViewport,
+        { width: 10, height: 10 },
+        { width: 20, height: 20 },
+        0,
+        0,
+      );
+
+      wrapper.element.scrollTo = jest.fn();
+      wrapper.vm.isDesignOverflowing = jest.fn().mockReturnValue(true);
+      return clickDragExplore(
+        { clientX: 0, clientY: 0 },
+        { clientX: 10, clientY: 10 },
+        { useTouchEvents },
+      ).then(() => {
+        expect(wrapper.element.scrollTo).toHaveBeenCalledTimes(1);
+        expect(wrapper.element.scrollTo).toHaveBeenCalledWith(-10, -10);
+      });
+    });
+  });
 });