From 525a415aee228c9996314d3185b42f71527758ab Mon Sep 17 00:00:00 2001
From: wny <colonD.wny@gmail.com>
Date: Wed, 24 May 2017 17:34:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=95=BF=E6=8C=89=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=90=8E=EF=BC=8C=E5=9B=BE=E7=89=87=E4=BC=9A=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E9=97=AE=E9=A2=98=20(#32)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复长按图片，图片隐藏问题

* fix: button style

* fix: preview unit test

* fix: init datetime-picker unit test
---
 packages/image-preview/src/image-preview.vue | 32 ++++++++++++---
 packages/vant-css/src/button.css             |  6 ++-
 test/unit/karma.conf.js                      |  2 +-
 test/unit/specs/datetime-picker.spec.js      | 42 ++++++++++++++++++++
 test/unit/specs/image-preview.spec.js        | 14 ++++++-
 5 files changed, 86 insertions(+), 10 deletions(-)
 create mode 100644 test/unit/specs/datetime-picker.spec.js

diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index d819a582a..22c2793ca 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="image-fade">
-    <div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
+    <div class="van-image-preview" ref="previewContainer" v-show="value">
       <van-swipe>
         <van-swipe-item v-for="item in images">
           <img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import Popup from 'src/mixins/popup';
 import VanSwipe from 'packages/swipe';
 import VanSwipeItem from 'packages/swipe-item';
@@ -47,12 +48,9 @@ export default {
   },
 
   methods: {
-    handlePreviewClick() {
-      this.value = false;
-    },
-
     handleLoad(event) {
-      const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+      const container = this.$refs.previewContainer;
+      const containerSize = container.getBoundingClientRect();
       const ratio = containerSize.width / containerSize.height;
       const target = event.currentTarget;
       const targetRatio = target.width / target.height;
@@ -88,6 +86,28 @@ export default {
       this.opened = false;
       this.doAfterClose();
     }
+  },
+
+  mounted() {
+    const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+    const container = this.$refs.previewContainer;
+
+    if (supportTouch) {
+      let touchStartTime;
+
+      container.addEventListener('touchstart', () => {
+        touchStartTime = new Date();
+      });
+      container.addEventListener('touchend', () => {
+        if (new Date() - touchStartTime < 1500) {
+          this.value = false;
+        }
+      });
+    } else {
+      container.addEventListener('click', () => {
+        this.value = false;
+      });
+    }
   }
 };
 </script>
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 3ae0856c0..14e89483a 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -18,7 +18,11 @@
 
     &::after {
       content: " ";
-      position: absolute 0 0 0 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       background-color: #000;
       opacity: 0;
     }
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index ccd941c1e..8deb01ebb 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -9,7 +9,7 @@ var travis = process.env.TRAVIS;
 
 module.exports = function(config) {
   config.set({
-    browsers: travis ? ['PhantomJS'] : ['Chrome'],
+    browsers: travis ? ['PhantomJS'] : ['PhantomJS', 'Chrome'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
diff --git a/test/unit/specs/datetime-picker.spec.js b/test/unit/specs/datetime-picker.spec.js
new file mode 100644
index 000000000..4b8e37329
--- /dev/null
+++ b/test/unit/specs/datetime-picker.spec.js
@@ -0,0 +1,42 @@
+import DatetimePicker from 'packages/datetime-picker';
+import { mount } from 'avoriaz';
+
+describe('DatetimePicker', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a datetime picker', () => {
+    const date = new Date();
+    wrapper = mount(DatetimePicker, {
+      propsData: {
+        type: 'datetime',
+        value: date
+      }
+    });
+    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+  });
+
+  it('create a date picker', () => {
+    const date = new Date();
+    wrapper = mount(DatetimePicker, {
+      propsData: {
+        type: 'date',
+        value: date
+      }
+    });
+    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+  });
+
+  it('create a time picker', () => {
+    const time = '10:00';
+    wrapper = mount(DatetimePicker, {
+      propsData: {
+        type: 'time',
+        value: time
+      }
+    });
+    expect(wrapper.data().innerValue).to.equal(time);
+  });
+});
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index 14cb44ef4..56b0d2d2e 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -1,4 +1,5 @@
 import ImagePreview from 'packages/image-preview';
+import Wrapper from 'avoriaz/dist/Wrapper';
 
 describe('ImagePreview', () => {
   beforeEach(() => {
@@ -22,7 +23,11 @@ describe('ImagePreview', () => {
     expect(document.querySelector('.van-image-preview')).to.exist;
 
     setTimeout(() => {
-      document.querySelector('.van-swipe-item').click();
+      const image = document.querySelector('.van-image-preview');
+      const avImage = new Wrapper({ elm: image }, () => {}, false);
+      avImage.simulate('click');
+      avImage.simulate('touchstart');
+      avImage.simulate('touchend');
       setTimeout(() => {
         expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
         expect(document.body.style.overflow).to.equal('');
@@ -42,7 +47,12 @@ describe('ImagePreview', () => {
     expect(document.querySelector('.van-image-preview')).to.exist;
 
     setTimeout(() => {
-      document.querySelector('.van-swipe-item').click();
+      const image = document.querySelector('.van-image-preview');
+      const avImage = new Wrapper({ elm: image }, () => {}, false);
+      avImage.simulate('click');
+      avImage.simulate('touchstart');
+      avImage.simulate('touchend');
+
       setTimeout(() => {
         expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
         expect(document.body.style.overflow).to.equal('hidden');