[Improvement] ImagePreview: add test cases (#1198)

packages/image-preview/image-preview.vue

@@ -31,6 +31,14 @@ export default create({
   },
 
   props: {
+    images: {
+      type: Array,
+      default: () => []
+    },
+    startPosition: {
+      type: Number,
+      default: 0
+    },
     overlay: {
       type: Boolean,
       default: true
@@ -41,13 +49,6 @@ export default create({
     }
   },
 
-  data() {
-    return {
-      images: [],
-      startPosition: 0
-    };
-  },
-
   methods: {
     onTouchStart() {
       this.touchStartTime = new Date();

packages/image-preview/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render image 1`] = `
+<div class="van-image-preview" style="display: none;">
+  <div class="van-swipe">
+    <div class="van-swipe__track" style="width: 0px;">
+      <div class="van-swipe-item" style="width: 0px; height: 100%;">
+        <img src="https://img.yzcdn.cn/1.png" class="van-image-preview__image">
+      </div>
+      <div class="van-swipe-item" style="width: 0px; height: 100%;">
+        <img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image">
+      </div>
+      <div class="van-swipe-item" style="width: 0px; height: 100%;">
+        <img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image">
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;

packages/image-preview/test/index.spec.js

@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import ImagePreview from '..';
+import ImagePreviewVue from '../image-preview';
+import { mount } from '@vue/test-utils';
+import { triggerDrag } from '../../../test/utils';
+
+const images = [
+  'https://img.yzcdn.cn/1.png',
+  'https://img.yzcdn.cn/2.png',
+  'https://img.yzcdn.cn/3.png'
+];
+
+test('render image', () => {
+  const wrapper = mount(ImagePreviewVue, {
+    propsData: { images }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+
+  const swipe = wrapper.find('.van-swipe__track');
+  triggerDrag(swipe, 500, 0);
+  expect(wrapper.emitted('input')).toBeFalsy();
+  triggerDrag(swipe, 0, 0);
+  expect(wrapper.emitted('input')[0][0]).toBeFalsy();
+});
+
+test('function call', (done) => {
+  ImagePreview(images);
+  ImagePreview(images.slice(0, 1));
+  Vue.nextTick(() => {
+    const wrapper = document.querySelector('.van-image-preview');
+    const swipe = wrapper.querySelector('.van-swipe__track');
+    triggerDrag(swipe, 0, 0);
+
+    expect(wrapper.querySelectorAll('img').length).toEqual(1);
+
+    Vue.nextTick(() => {
+      expect(wrapper.style.display).toEqual('none');
+      done();
+    });
+  });
+});
+
+test('register component', () => {
+  Vue.use(ImagePreview);
+  expect(Vue.component('van-image-preview')).toBeTruthy();
+});