fix: countdown/picker/imagepreview/dialog 组件单元测试修改 (#1886)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

* fix: 解决 Picker 在微信小程序中无法使用问题 (#1774)

* fix: 修改 Picker 组件 v-model 失效问题

* fix: 组件NoticeBar修改height之后，垂直轮播会卡顿

* fix: 删除Datepicker Demo演示多余内容

* fix: 组件Picker在JD小程序上适配

* fix: 组件Address京东小程序适配

* feat: 京东小程序适配

* fix: 删除空格

* feat: 删除console

* fix: 京东小程序imagepreview适配

* fix: 修复 imagepreview 动态设置 initNo 显示不正确问题

* fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819

* fix: 删除pullrefresh

* feat: 组件 imagepreview瘦身

* feat: 组件Picker 瘦身

* fix: address线上问题修改

* fix: 完善imagepreview

* feat: 公共函数提取

* feat: 函数式改用 createComponent

* fix: 文件回撤

* feat: 单元测试修改

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

@@ -20,7 +20,7 @@ test('endTime props', async () => {
     }
   });
   expect(wrapper.emitted('on-end')).toBeFalsy();
-  await sleep(1000);
+  await sleep(1100);
   expect(wrapper.emitted('on-end')).toBeTruthy();
 });
 

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

@@ -5,6 +5,7 @@ import NutRange from '../../range/index.vue';
 import NutPicker from '../../picker/index.vue';
 import NutPopup from '../../popup/index.vue';
 import NutPickerColumn from '../../picker/Column.vue';
+import NutOverlay from '../../overlay/index.vue';
 import DatePicker from '../../datepicker/index.vue';
 
 function sleep(delay = 0): Promise<void> {
@@ -19,7 +20,8 @@ beforeAll(() => {
     NutRange,
     NutPicker,
     NutPopup,
-    NutPickerColumn
+    NutPickerColumn,
+    NutOverlay
   };
 });
 
@@ -38,8 +40,8 @@ test('Do not display Chinese', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.nut-picker__confirm').exists()).toBeTruthy();
-  const confirm = wrapper.find('.nut-picker__confirm');
+  expect(wrapper.find('.nut-picker__right').exists()).toBeTruthy();
+  const confirm = wrapper.find('.nut-picker__right');
   confirm.trigger('click');
   expect(wrapper.emitted().confirm[0]).toEqual([
     {

src/packages/__VUE/dialog/__tests__/function.spec.ts

@@ -115,13 +115,13 @@ describe('function Dialog', () => {
       cancelText: '取消文案自定义',
       okText: '确定文案自定义'
     });
-    await sleep(500);
+    await sleep(1000);
     let cancelText = document.querySelector(
-      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-cancel > view > view`
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-cancel `
     ) as HTMLDivElement;
     expect(cancelText.innerHTML).toEqual('取消文案自定义');
     let okText = document.querySelector(
-      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-ok > view > view`
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-ok`
     ) as HTMLDivElement;
     expect(okText.innerHTML).toEqual('确定文案自定义');
   });

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

@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`init page No. 1`] = `"<view class=\\"nut-imagepreview-index\\">4 / 4</view>"`;
-
-exports[`video surported in H5 env 1`] = `
-"<view class=\\"nut-popup popup-center custom-pop\\" style=\\"z-index: 2005; transition-duration: 0.3s; width: 100%;\\">
-  <!-- @click.stop=\\"closeOnImg\\" @touchstart.capture=\\"onTouchStart\\" -->
-  <view class=\\"nut-imagepreview\\">
-    <view class=\\"nut-swiper nut-imagepreview-swiper\\">
-      <view class=\\"nut-swiper-inner\\">
-        <view class=\\"nut-swiper-item\\">
-          <!--v-if-->
-          <view class=\\"nut-imagepreview-box\\">
-            <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>
-        <view class=\\"nut-swiper-item\\">
-          <!--v-if-->
-          <view class=\\"nut-imagepreview-box\\">
-            <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>
-        <view class=\\"nut-swiper-item\\">
-          <view style=\\"transition-duration: .3s;\\" class=\\"nut-imagepreview-box\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-          <!--v-if-->
-        </view>
-        <view class=\\"nut-swiper-item\\">
-          <view style=\\"transition-duration: .3s;\\" class=\\"nut-imagepreview-box\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png\\" class=\\"nut-imagepreview-img\\"></view>
-          <!--v-if-->
-        </view>
-        <view class=\\"nut-swiper-item\\">
-          <view style=\\"transition-duration: .3s;\\" class=\\"nut-imagepreview-box\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-          <!--v-if-->
-        </view>
-        <view class=\\"nut-swiper-item\\">
-          <view style=\\"transition-duration: .3s;\\" class=\\"nut-imagepreview-box\\"><img src=\\"//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg\\" class=\\"nut-imagepreview-img\\"></view>
-          <!--v-if-->
-        </view>
-      </view>
-      <!--v-if-->
-    </view>
-  </view>
-  <view class=\\"nut-imagepreview-index\\">1 / 6</view>
-  <!--v-if-->
-  <!--v-if-->
-</view>"
-`;

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

@@ -1,7 +1,27 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import ImagePreview from '../index.vue';
 import { nextTick, reactive, toRefs } from 'vue';
-// import { trigger } from '@/packages/utils/unit';
+import NutOverlay from '../../overlay/index.vue';
+import NutIcon from '../../icon/index.vue';
+import NutPopup from '../../popup/index.vue';
+import NutSwiper from '../../swiper/index.vue';
+import NutSwiperItem from '../../swiperitem/index.vue';
+import NutVideo from '../../video/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutOverlay,
+    NutIcon,
+    NutPopup,
+    NutSwiper,
+    NutSwiperItem,
+    NutVideo
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
 
 const images = [
   {
@@ -25,18 +45,9 @@ const videos = [
       type: 'video/mp4'
     },
     options: {
-      muted: true,
-      controls: true
-    }
-  },
-  {
-    source: {
-      src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-      type: 'video/mp4'
-    },
-    options: {
-      muted: true,
-      controls: true
+      autoplay: false,
+      muted: false,
+      controls: false
     }
   }
 ];
@@ -49,7 +60,7 @@ test('basic usage test', async () => {
     }
   });
   await nextTick();
-  expect((wrapper.find('.custom-pop').element as any).style.display).toEqual('');
+  expect((wrapper.find('.nut-imagepreview-custom-pop').element as any).style.display).toEqual('');
 });
 
 test('test autoplay', async () => {
@@ -63,10 +74,10 @@ test('test autoplay', async () => {
 
   await nextTick();
 
-  expect(wrapper.vm.active).toBe(1);
+  expect(wrapper.vm.active).toBe(0);
 
   setTimeout(() => {
-    expect(wrapper.vm.active).toBe(2);
+    expect(wrapper.vm.active).toBe(1);
   }, 3000);
 });
 
@@ -79,7 +90,7 @@ test('init page No.', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.nut-imagepreview-index').html()).toMatchSnapshot();
+  expect(wrapper.find('.nut-imagepreview-index').text()).toEqual('4 / 4');
 });
 
 test('customize pagination and color', async () => {
@@ -97,18 +108,6 @@ test('customize pagination and color', async () => {
   expect(swiperPagination.findAll('i')[0].element.style.backgroundColor).toEqual('red');
 });
 
-test('video surported in H5 env', async () => {
-  const wrapper = mount(ImagePreview, {
-    props: {
-      show: true,
-      images,
-      videos
-    }
-  });
-  await nextTick();
-  expect(wrapper.find('.custom-pop').html()).toMatchSnapshot();
-});
-
 function sleep(delay = 0): Promise<void> {
   return new Promise((resolve) => {
     setTimeout(resolve, delay);

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

@@ -2,15 +2,16 @@ import { config, mount } from '@vue/test-utils';
 import Picker from '../index.vue';
 import NutIcon from '../../icon/index.vue';
 import NutPupup from '../../popup/index.vue';
+import NutOverlay from '../../overlay/index.vue';
 import NutPickerColumn from '../Column.vue';
-import { nextTick, toRefs, reactive, ref, onMounted } from 'vue';
-import { triggerDrag } from '../../../utils/test/event';
+import { nextTick } from 'vue';
 
 beforeAll(() => {
   config.global.components = {
     NutIcon,
     NutPupup,
-    NutPickerColumn
+    NutPickerColumn,
+    NutOverlay
   };
 });
 
@@ -96,8 +97,8 @@ test('first render', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.nut-picker__cancel').exists()).toBeTruthy();
-  expect(wrapper.find('.nut-picker__confirm').exists()).toBeTruthy();
+  expect(wrapper.find('.nut-picker__left').exists()).toBeTruthy();
+  expect(wrapper.find('.nut-picker__right').exists()).toBeTruthy();
 });
 
 test('simple list-data confirm & close event', async () => {
@@ -109,8 +110,8 @@ test('simple list-data confirm & close event', async () => {
     }
   });
   await nextTick();
-  wrapper.find('.nut-picker__cancel').trigger('click');
-  wrapper.find('.nut-picker__confirm').trigger('click');
+  wrapper.find('.nut-picker__left').trigger('click');
+  wrapper.find('.nut-picker__right').trigger('click');
   expect(wrapper.emitted('confirm')![0]).toEqual([
     {
       selectedOptions: [{ text: '南京市', value: 'NanJing' }],
@@ -129,7 +130,7 @@ test('simple columns default checked item', async () => {
     }
   });
   await nextTick();
-  wrapper.find('.nut-picker__confirm').trigger('click');
+  wrapper.find('.nut-picker__right').trigger('click');
   expect(wrapper.emitted('confirm')![0]).toEqual([
     {
       selectedOptions: [{ text: '无锡市', value: 'WuXi' }],