upd: imagepreview单元测试调整 (#1163)

src/packages/__VUE/imagepreview/__tests__/__snapshots__/imagepreview.spec.ts.snap

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`basic usage test 1`] = `
-"<view class=\\"nut-popup popup-center custom-pop\\" style=\\"z-index: 2000; animation-duration: 0.3s; width: 100%;\\">
-  <view class=\\"nut-imagepreview\\">
-    <view class=\\"nut-swiper nut-imagepreview-swiper\\">
-      <view class=\\"nut-swiper-inner\\">
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-      </view>
-      <!--v-if-->
-    </view>
-  </view>
-  <view class=\\"nut-imagepreview-index\\">1 / 4</view>
-  <!--v-if-->
-</view>"
-`;
-
-exports[`init page No. 1`] = `"<view class=\\"nut-imagepreview-index\\">3 / 4</view>"`;
-
-exports[`video surported in H5 env 1`] = `
-"<view class=\\"nut-popup popup-center custom-pop\\" style=\\"z-index: 2000; animation-duration: 0.3s; width: 100%;\\">
-  <view class=\\"nut-imagepreview\\">
-    <view class=\\"nut-swiper nut-imagepreview-swiper\\">
-      <view class=\\"nut-swiper-inner\\">
-        <view class=\\"nut-swiper-item\\">
-          <div class=\\"nut-video\\"><video class=\\"nut-video-player\\" controls=\\"\\">
-              <source src=\\"https://storage.jd.com/about/big-final.mp4?Expires=3730193075&amp;AccessKey=3LoYX1dQWa6ZXzQl&amp;Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D\\" type=\\"video/mp4\\">
-            </video>
-            <!--v-if-->
-            <!--v-if-->
-            <div class=\\"nut-video-controller show-control\\" style=\\"display: none;\\">
-              <div class=\\"control-play-btn\\"></div>
-              <div class=\\"current-time\\">00:00</div>
-              <div class=\\"progress-container\\">
-                <div class=\\"progress\\">
-                  <div class=\\"buffered\\" style=\\"width: 0%;\\"></div>
-                  <div class=\\"video-ball\\" style=\\"transform: translate3d(0px, -50%, 0);\\">
-                    <div class=\\"move-handle\\"></div>
-                  </div>
-                  <div class=\\"played\\"></div>
-                </div>
-              </div>
-              <div class=\\"duration-time\\">00:00</div>
-              <div class=\\"volume muted\\"></div>
-              <div class=\\"fullscreen-icon\\"></div>
-            </div><!-- 错误弹窗 -->
-            <div class=\\"nut-video-error\\" style=\\"display: none;\\">
-              <p class=\\"lose\\">视频加载失败</p>
-              <p class=\\"retry\\">点击重试</p>
-            </div>
-          </div>
-        </view>
-        <view class=\\"nut-swiper-item\\">
-          <div class=\\"nut-video\\"><video class=\\"nut-video-player\\" controls=\\"\\">
-              <source src=\\"https://storage.jd.com/about/big-final.mp4?Expires=3730193075&amp;AccessKey=3LoYX1dQWa6ZXzQl&amp;Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D\\" type=\\"video/mp4\\">
-            </video>
-            <!--v-if-->
-            <!--v-if-->
-            <div class=\\"nut-video-controller show-control\\" style=\\"display: none;\\">
-              <div class=\\"control-play-btn\\"></div>
-              <div class=\\"current-time\\">00:00</div>
-              <div class=\\"progress-container\\">
-                <div class=\\"progress\\">
-                  <div class=\\"buffered\\" style=\\"width: 0%;\\"></div>
-                  <div class=\\"video-ball\\" style=\\"transform: translate3d(0px, -50%, 0);\\">
-                    <div class=\\"move-handle\\"></div>
-                  </div>
-                  <div class=\\"played\\"></div>
-                </div>
-              </div>
-              <div class=\\"duration-time\\">00:00</div>
-              <div class=\\"volume muted\\"></div>
-              <div class=\\"fullscreen-icon\\"></div>
-            </div><!-- 错误弹窗 -->
-            <div class=\\"nut-video-error\\" style=\\"display: none;\\">
-              <p class=\\"lose\\">视频加载失败</p>
-              <p class=\\"retry\\">点击重试</p>
-            </div>
-          </div>
-        </view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-        <view class=\\"nut-swiper-item\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-      </view>
-      <!--v-if-->
-    </view>
-  </view>
-  <view class=\\"nut-imagepreview-index\\">1 / 6</view>
-  <!--v-if-->
-</view>"
-`;

src/packages/__VUE/imagepreview/__tests__/imagepreview.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import ImagePreview from '../index.vue';
-import { nextTick } from 'vue';
+import { nextTick, reactive, toRefs } from 'vue';
+// import { trigger } from '@/packages/utils/unit';
 
 const images = [
   {
@@ -48,7 +49,25 @@ test('basic usage test', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.custom-pop').html()).toMatchSnapshot();
+  expect((wrapper.find('.custom-pop').element as any).style.display).toEqual('');
+});
+
+test('test autoplay', async () => {
+  const wrapper = mount(ImagePreview, {
+    props: {
+      show: true,
+      images,
+      autoplay: 3000
+    }
+  });
+
+  await nextTick();
+
+  expect(wrapper.vm.active).toBe(1);
+
+  setTimeout(() => {
+    expect(wrapper.vm.active).toBe(2);
+  }, 3000);
 });
 
 test('init page No.', async () => {
@@ -78,6 +97,22 @@ test('customize pagination and color', async () => {
   expect(swiperPagination.findAll('i')[0].element.style.backgroundColor).toEqual('red');
 });
 
+// test('test content-close', async () => {
+//   const wrapper = mount(ImagePreview, {
+//     props: {
+//       show: true,
+//       images,
+//       autoplay: 0,
+//       contentClose: true
+//     }
+//   });
+//   await nextTick();
+
+//   // const key = wrapper.find('.nut-imagepreview');
+//   // await key.trigger('click');
+//   // expect((wrapper.find('.custom-pop').element as any).style.display).toEqual('none');
+// });
+
 test('video surported in H5 env', async () => {
   const wrapper = mount(ImagePreview, {
     props: {