From e93bec677e6540b319640f59d190083dffe96cd6 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 30 Jun 2020 14:56:56 +0800
Subject: [PATCH] fix(ImagePreview): scale event param

---
 src/image-preview/ImagePreview.js             |  1 +
 src/image-preview/ImagePreviewItem.js         | 10 ++++--
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/image-preview/test/index.spec.js          | 33 +++++++++++--------
 src/uploader/test/index.spec.js               |  2 +-
 test/event.ts                                 |  4 +--
 6 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index 24bfcbc89..84d876af4 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -147,6 +147,7 @@ export default createComponent({
           {this.images.map((image) => (
             <ImagePreviewItem
               src={image}
+              active={this.active}
               maxZoom={this.maxZoom}
               minZoom={this.minZoom}
               onScale={this.emitScale}
diff --git a/src/image-preview/ImagePreviewItem.js b/src/image-preview/ImagePreviewItem.js
index 143e2b322..30f9b3cf8 100644
--- a/src/image-preview/ImagePreviewItem.js
+++ b/src/image-preview/ImagePreviewItem.js
@@ -25,6 +25,7 @@ export default {
 
   props: {
     src: String,
+    active: Number,
     minZoom: [Number, String],
     maxZoom: [Number, String],
   },
@@ -60,8 +61,7 @@ export default {
   },
 
   methods: {
-    startMove(event) {
-      this.touchStart(event);
+    startMove() {
       this.setMaxMove();
       this.moving = true;
       this.startMoveX = this.moveX;
@@ -80,6 +80,9 @@ export default {
       if (this.displayWidth && this.displayHeight) {
         this.maxMoveX = Math.max(0, (displayWidth * scale - windowWidth) / 2);
         this.maxMoveY = Math.max(0, (displayHeight * scale - windowHeight) / 2);
+      } else {
+        this.maxMoveX = 0;
+        this.maxMoveY = 0;
       }
     },
 
@@ -109,10 +112,11 @@ export default {
       const { touches } = event;
       const { offsetX = 0 } = this;
 
+      this.touchStart(event);
       this.touchStartTime = new Date();
 
       if (touches.length === 1 && this.scale !== 1) {
-        this.startMove(event);
+        this.startMove();
       } else if (touches.length === 2 && !offsetX) {
         this.startZoom(event);
       }
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 06a8e087f..546e3ea8a 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
 `;
 
 exports[`zoom 1`] = `
-<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);" data-index="0"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
+<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
   <div class="van-image__loading">
     <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 6fe3c5125..bd8e2fdc0 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -27,15 +27,14 @@ test('render image', async () => {
 
   await later();
 
-  const swipe = wrapper.find('.van-swipe__track');
+  const swipe = wrapper.find('.van-swipe-item');
   triggerDrag(swipe, 500, 0);
   expect(wrapper.emitted('input')).toBeFalsy();
-  triggerDrag(swipe, 0, 0);
-
-  await later(250);
-
-  expect(wrapper.emitted('input')[0][0]).toBeFalsy();
   expect(wrapper.emitted('change')[0][0]).toEqual(2);
+
+  triggerDrag(swipe, 0, 0);
+  await later(250);
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
 });
 
 test('closeable prop', () => {
@@ -116,21 +115,29 @@ test('function call', (done) => {
   });
 });
 
-test('double click', async (done) => {
-  const instance = ImagePreview(images);
+test('double click', async () => {
+  const onScale = jest.fn();
+  const instance = ImagePreview({
+    images,
+    onScale,
+  });
 
   await later();
-  const swipe = instance.$el.querySelector('.van-swipe__track');
+  const swipe = instance.$el.querySelector('.van-swipe-item');
   triggerDrag(swipe, 0, 0);
   triggerDrag(swipe, 0, 0);
-  expect(instance.scale).toEqual(2);
+  expect(onScale).toHaveBeenCalledWith({
+    index: 0,
+    scale: 2,
+  });
 
   await later();
-
   triggerDrag(swipe, 0, 0);
   triggerDrag(swipe, 0, 0);
-  expect(instance.scale).toEqual(1);
-  done();
+  expect(onScale).toHaveBeenLastCalledWith({
+    index: 0,
+    scale: 1,
+  });
 });
 
 test('onClose option', () => {
diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js
index ba27ab585..cbddaaf05 100644
--- a/src/uploader/test/index.spec.js
+++ b/src/uploader/test/index.spec.js
@@ -450,7 +450,7 @@ test('close-preview event', async () => {
   wrapper.find('.van-image').trigger('click');
 
   const preview = document.querySelector('.van-image-preview');
-  const swipe = preview.querySelector('.van-swipe__track');
+  const swipe = preview.querySelector('.van-swipe-item');
   triggerDrag(swipe, 0, 0);
 
   await later(300);
diff --git a/test/event.ts b/test/event.ts
index 0e8f24a93..458523f9a 100644
--- a/test/event.ts
+++ b/test/event.ts
@@ -20,8 +20,8 @@ function getTouch(el: HTMLElement | Window, x: number, y: number) {
 export function trigger(
   wrapper: Wrapper<Vue> | HTMLElement | Window,
   eventName: string,
-  x: number = 0,
-  y: number = 0,
+  x = 0,
+  y = 0,
   options: any = {}
 ) {
   const el = 'element' in wrapper ? wrapper.element : wrapper;