feat(cell、cellgourp): test config

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`prop desc-text-align left 1`] = `
+"<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
+  <!--v-if-->
+  <view class=\\"nut-cell__value\\" style=\\"text-align: left;\\">张三</view>
+  <!--v-if-->
+</view>"
+`;
+
+exports[`prop isLink  1`] = `
+"<view class=\\"nut-cell nut-cell--clickable\\" style=\\"border-radius: px;\\">
+  <!--v-if-->
+  <!--v-if--><i class=\\"nutui-iconfont nut-icon nut-icon-right nut-cell__link\\" src=\\"\\"></i>
+</view>"
+`;
+
+exports[`prop title desc subtitle 1`] = `
+"<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
+  <view class=\\"nut-cell__title\\">
+    <!--v-if-->
+    <view class=\\"title\\">标题1</view>
+    <view class=\\"nut-cell__title-desc\\">副标题1</view>
+  </view>
+  <view class=\\"nut-cell__value\\" style=\\"text-align: right;\\">描述1</view>
+  <!--v-if-->
+</view>"
+`;
+
+exports[`slot default test 1`] = `"<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">Custom Content</view>"`;
+
+exports[`slot link、icon test 1`] = `
+"<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
+  <view class=\\"nut-cell__title icon\\">Custom Icon<view class=\\"title\\">标题1</view>
+    <view class=\\"nut-cell__title-desc\\">副标题1</view>
+  </view>
+  <view class=\\"nut-cell__value\\" style=\\"text-align: right;\\">描述1</view>Custom Link
+</view>"
+`;

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

@@ -1,29 +1,65 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Cell from '../index.vue';
-import Icon from '../../icon/index.vue';
+import NutIcon from '../../icon/index.vue';
+import { nextTick } from 'vue';
 
-test('prop title desc', () => {
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+// mock module
+jest.mock('vue-router', () => ({
+  useRouter: jest.fn()
+}));
+
+test('prop title desc subtitle', async () => {
   const wrapper = mount(Cell, {
     props: {
       title: '标题1',
-      desc: '描述1'
+      desc: '描述1',
+      subTitle: '副标题1'
     }
   });
+  const html = expect(wrapper.html());
+  html.toContain('标题1');
+  html.toContain('描述1');
+  html.toContain('副标题1');
 
-  expect(wrapper.html()).toContain('标题1');
-  expect(wrapper.html()).toContain('描述1');
+  wrapper.setProps({
+    title: '标题2',
+    desc: '描述2',
+    subTitle: '副标题2'
+  });
+  await nextTick();
+  const html2 = expect(wrapper.html());
+  html2.toContain('标题2');
+  html2.toContain('描述2');
+  html2.toContain('副标题2');
+
+  html.toMatchSnapshot();
 });
 
-test('prop title subtitle', () => {
+test('prop desc-text-align left', () => {
   const wrapper = mount(Cell, {
     props: {
-      title: '标题1',
-      subTitle: '副标题1'
+      descTextAlign: 'left',
+      desc: '张三'
     }
   });
+  expect(wrapper.find<HTMLElement>('.nut-cell__value').element.style.textAlign).toEqual('left');
+  expect(wrapper.html()).toMatchSnapshot();
+});
 
-  expect(wrapper.html()).toContain('标题1');
-  expect(wrapper.html()).toContain('副标题1');
+test('prop isLink ', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      isLink: true
+    }
+  });
+  expect(wrapper.find<HTMLElement>('.nut-cell__link'));
+  expect(wrapper.html()).toMatchSnapshot();
 });
 
 test('emit click event', () => {
@@ -33,11 +69,35 @@ test('emit click event', () => {
   expect(wrapper.emitted('click')!.length).toEqual(1);
 });
 
-test('slot test', () => {
+test('slot default test', () => {
   const wrapper = mount(Cell, {
+    props: {
+      title: '标题1',
+      desc: '描述1',
+      subTitle: '副标题1'
+    },
+    slots: {
+      default: 'Custom Content'
+    }
+  });
+  expect(wrapper.html()).toContain('Custom Content');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('slot link、icon test', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      title: '标题1',
+      desc: '描述1',
+      subTitle: '副标题1'
+    },
     slots: {
-      default: '自定义内容'
+      icon: 'Custom Icon',
+      link: 'Custom Link'
     }
   });
-  expect(wrapper.html()).toContain('自定义内容');
+  const html = expect(wrapper.html());
+  html.toContain('Custom Link');
+  html.toContain('Custom Icon');
+  expect(wrapper.html()).toMatchSnapshot();
 });

src/packages/__VUE/cell/__tests__/demo.spec.oldts

@@ -0,0 +1,4 @@
+import Demo from '../demo.vue';
+import { snapshotDemo } from '../../../utils/test/demo';
+
+snapshotDemo(Demo);

src/packages/__VUE/cellgroup/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render title、desc slot correctly 1`] = `
+"<view class=\\"nut-cell-group\\">Custom TitleCustom Desc<view class=\\"nut-cell-group__warp\\"></view>
+</view>"
+`;

src/packages/__VUE/cellgroup/test/index.spec.ts

@@ -0,0 +1,11 @@
+import CellGroup from '../index.vue';
+import { mount } from '@vue/test-utils';
+test('should render title、desc slot correctly', () => {
+  const wrapper = mount(CellGroup, {
+    slots: {
+      title: () => 'Custom Title',
+      desc: () => 'Custom Desc'
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/drag/__test__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render default slot correctly 1`] = `"<view class=\\"nut-drag\\">Custom Message</view>"`;

src/packages/__VUE/video/index.vue

@@ -13,12 +13,7 @@
     >
       <source :src="source.src" :type="source.type" />
     </video>
-    <div
-      class="playing-mask"
-      ref="touchMask"
-      v-if="showToolbox && !isDisabled"
-      @click="play"
-    ></div>
+    <div class="playing-mask" ref="touchMask" v-if="showToolbox && !isDisabled" @click="play"></div>
     <div
       class="nut-video-play-btn"
       v-if="showToolbox && !isDisabled"
@@ -51,11 +46,7 @@
         </div>
       </div>
       <div class="duration-time">{{ videoSet.totalTime }}</div>
-      <div
-        class="volume"
-        @click="handleMuted"
-        :class="{ muted: state.isMuted }"
-      ></div>
+      <div class="volume" @click="handleMuted" :class="{ muted: state.isMuted }"></div>
       <div class="fullscreen-icon" @click="fullScreen"></div>
     </div>
     <!-- 错误弹窗 -->
@@ -66,15 +57,7 @@
   </div>
 </template>
 <script lang="ts">
-import {
-  computed,
-  reactive,
-  ref,
-  toRefs,
-  watch,
-  nextTick,
-  onMounted
-} from 'vue';
+import { computed, reactive, ref, toRefs, watch, nextTick, onMounted } from 'vue';
 import { createComponent } from '../../utils/create';
 import { throttle } from '../../utils/throttle.js';
 const { create } = createComponent('video');
@@ -179,19 +162,10 @@ export default create({
       }
 
       if (props.options.playsinline) {
-        (state.videoElm as any).setAttribute(
-          'playsinline',
-          props.options.playsinline
-        );
-        (state.videoElm as any).setAttribute(
-          'webkit-playsinline',
-          props.options.playsinline
-        );
+        (state.videoElm as any).setAttribute('playsinline', props.options.playsinline);
+        (state.videoElm as any).setAttribute('webkit-playsinline', props.options.playsinline);
         (state.videoElm as any).setAttribute('x5-video-player-type', 'h5-page');
-        (state.videoElm as any).setAttribute(
-          'x5-video-player-fullscreen',
-          false
-        );
+        (state.videoElm as any).setAttribute('x5-video-player-fullscreen', false);
       }
       volumeHandle();
 
@@ -208,10 +182,10 @@ export default create({
         });
         (state.videoElm as any).addEventListener('ended', playEnded);
 
-        (state.videoElm as any).addEventListener(
-          'timeupdate',
-          throttle(getPlayTime, 100, 1)
-        );
+        // (state.videoElm as any).addEventListener(
+        //   'timeupdate',
+        //   throttle(getPlayTime, 100, 1)
+        // );
       }
     };
 
@@ -222,9 +196,7 @@ export default create({
       (state.player.$player as any) = $player;
       (state.progressBar.progressElm as any) = $progress;
       (state.progressBar.pos as any) = $progress.getBoundingClientRect();
-      state.videoSet.progress.width = Math.round(
-        $progress.getBoundingClientRect().width
-      );
+      state.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
     };
 
     const play = () => {
@@ -243,10 +215,10 @@ export default create({
               getLoadTime();
             });
             // 监听播放进度
-            (state.videoElm as any).addEventListener(
-              'timeupdate',
-              throttle(getPlayTime, 100, 1)
-            );
+            // (state.videoElm as any).addEventListener(
+            //   'timeupdate',
+            //   throttle(getPlayTime, 100, 1)
+            // );
             // 监听结束
             (state.videoElm as any).addEventListener('ended', playEnded);
             emit('play', state.videoElm);
@@ -286,24 +258,16 @@ export default create({
 
     const getLoadTime = () => {
       if (state.videoSet.loaded)
-        state.videoSet.loaded =
-          ((state.videoElm as any).buffered.end(0) /
-            (state.videoElm as any).duration) *
-          100;
+        state.videoSet.loaded = ((state.videoElm as any).buffered.end(0) / (state.videoElm as any).duration) * 100;
     };
 
     const getPlayTime = () => {
-      const percent =
-        (state.videoElm as any).currentTime / (state.videoElm as any).duration;
-      state.videoSet.progress.current = Math.round(
-        state.videoSet.progress.width * percent
-      );
+      const percent = (state.videoElm as any).currentTime / (state.videoElm as any).duration;
+      state.videoSet.progress.current = Math.round(state.videoSet.progress.width * percent);
 
       // 赋值时长
       state.videoSet.totalTime = timeFormat((state.videoElm as any).duration);
-      state.videoSet.displayTime = timeFormat(
-        (state.videoElm as any).currentTime
-      );
+      state.videoSet.displayTime = timeFormat((state.videoElm as any).currentTime);
     };
 
     const playEnded = () => {
@@ -343,10 +307,8 @@ export default create({
       }
       state.videoSet.progress.current = offsetX;
 
-      let percent =
-        state.videoSet.progress.current / state.videoSet.progress.width;
-      (state.videoElm as any).duration &&
-        setPlayTime(percent, (state.videoElm as any).duration);
+      let percent = state.videoSet.progress.current / state.videoSet.progress.width;
+      (state.videoElm as any).duration && setPlayTime(percent, (state.videoElm as any).duration);
     };
 
     const touchSlidEnd = (e: any) => {
@@ -355,8 +317,7 @@ export default create({
       state.videoSet.progress.current = offsetX;
       // 这里的offsetX都是正数
       let percent = offsetX / state.videoSet.progress.width;
-      (state.videoElm as any).duration &&
-        setPlayTime(percent, (state.videoElm as any).duration);
+      (state.videoElm as any).duration && setPlayTime(percent, (state.videoElm as any).duration);
     };
 
     const setPlayTime = (percent: number, totalTime: number) => {

src/sites/doc/components/demo-block/demoBlock.vue

@@ -5,7 +5,7 @@
       <a class="list" :href="jumpHref1" target="_blank">
         <img
           class="online-icon"
-          src="https://img13.360buyimg.com/imagetools/jfs/t1/125518/28/24027/2723/6204ae85E8bf8b7e9/af2d55aabeb6bbb6.png"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/159023/13/28499/5084/620f4c48E244573d5/28bfddee9718336e.png"
         />
         <div class="online-tips">codesandbox</div>
       </a>