ソースを参照

test(video): add snapshot

richard1015 3 年 前
コミット
dfe46049a5

+ 1 - 1
package.json

@@ -52,7 +52,7 @@
     "generate:types": "node jd/generate-types.js",
     "generate:themes": "node jd/generate-themes.js",
     "prepare": "husky install",
-    "test": "jest --watchAll",
+    "test": "jest",
     "release": "standard-version -a",
     "codeformat": "prettier --write .",
     "copydocs": "node ./jd/copymd.js"

+ 30 - 0
src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video video base info 1`] = `
+"<div class=\\"nut-video\\"><video class=\\"nut-video-player\\" autoplay=\\"\\" loop=\\"\\" controls=\\"\\" playsinline=\\"true\\" webkit-playsinline=\\"true\\" x5-video-player-type=\\"h5-page\\" x5-video-player-fullscreen=\\"false\\">
+    <source src=\\"xxx.mp4\\" 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>"
+`;

+ 8 - 42
src/packages/__VUE/video/__tests__/video.spec.ts

@@ -2,59 +2,25 @@ import { mount } from '@vue/test-utils';
 import Video from '../index.vue';
 
 describe('Video', () => {
-  test('base Video', () => {
-    const wrapper = mount(Video);
-    const rate = wrapper.find('.nut-video');
-    expect(rate.exists()).toBe(true);
-  });
-  test('should be displayed after setting the source src and type', () => {
+  test('video base info', () => {
     const wrapper = mount(Video, {
       props: {
         source: {
           src: 'xxx.mp4',
-          type: 'video/mp4'
+          type: 'video/mp4',
+          poster:
+            'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
         },
         options: {
-          controls: true
-        }
-      }
-    });
-    expect(wrapper.html()).toContain('src');
-    expect(wrapper.html()).toContain('type');
-    expect(wrapper.html()).toContain('controls');
-  });
-  test('should be displayed after setting the options autoplay and muted and loop', () => {
-    const wrapper = mount(Video, {
-      props: {
-        options: {
+          controls: true,
           autoplay: true,
           muted: true,
+          playsinline: true,
           loop: true
         }
       }
     });
-    expect(wrapper.html()).toContain('autoplay');
-    expect(wrapper.html()).toContain('muted');
-    expect(wrapper.html()).toContain('loop');
-  });
-  test('should be displayed after setting the options poster and playsinline', () => {
-    const wrapper = mount(Video, {
-      props: {
-        options: {
-          poster: 'xxx.png',
-          playsinline: true
-        }
-      }
-    });
-    expect(wrapper.html()).toContain('xxx.png');
-    expect(wrapper.html()).toContain('playsinline');
-  });
-  test('should be displayed after setting the click', () => {
-    const wrapper = mount(Video);
-    const _html1 = wrapper.find('.show-control');
-    expect(_html1.exists()).toBe(true);
-    wrapper.find('.control-play-btn').trigger('click');
-    const _html2 = wrapper.find('.hide-control');
-    expect(_html2.exists()).toBe(false);
+    expect(wrapper.find<HTMLElement>('.nut-video source').html()).toContain('xxx.mp4');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });