Merge branch 'next' of https://github.com/jdf2e/nutui into next

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"

src/packages/__VUE/progress/doc.md

@@ -134,6 +134,7 @@ app.use(Icon);
 | show-text | 是否显示进度条文字内容 | Boolean | true
 | text-inside | 进度条文字显示位置(false:外显，true:内显) | Boolean | false
 | text-color | 进度条文字颜色设置 | String | #333
+| text-background | 进度条文字背景颜色设置 | String | 同进度条颜色
 | status | 进度条当前状态,active(展示动画效果)/icon(展示icon标签) | String | text
 | icon-name | icon名称 | String | checked
 | icon-color | icon颜色 | String | #439422

src/packages/__VUE/progress/index.taro.vue

@@ -12,7 +12,12 @@
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
           :id="'nut-progress-insidetext-taro-' + randRef"
-          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
+          :style="{
+            lineHeight: height,
+            left: `${percentage}%`,
+            transform: `translate(-${+percentage}%,-50%)`,
+            background: textBackground || strokeColor
+          }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
@@ -71,6 +76,10 @@ export default create({
       tyep: String,
       default: ''
     },
+    textBackground: {
+      tyep: String,
+      default: ''
+    },
     iconName: {
       type: String,
       default: 'checked'

src/packages/__VUE/progress/index.vue

@@ -10,7 +10,12 @@
         <div
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
-          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
+          :style="{
+            lineHeight: height,
+            left: `${percentage}%`,
+            transform: `translate(-${+percentage}%,-50%)`,
+            background: textBackground || strokeColor
+          }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
@@ -68,6 +73,10 @@ export default create({
       tyep: String,
       default: ''
     },
+    textBackground: {
+      tyep: String,
+      default: ''
+    },
     iconName: {
       type: String,
       default: 'checked'

src/packages/__VUE/toast/test/function.spec.ts

@@ -34,4 +34,17 @@ describe('function toast', () => {
     let failToast = document.querySelector('.nut-icon-failure') as HTMLElement;
     expect(failToast.style.fontSize).toEqual('20px');
   });
+  test('show warn toast', async () => {
+    ToastFunction.warn('文案');
+    await sleep();
+    let failToast = document.querySelector('.nut-icon-failure') as HTMLElement;
+    expect(failToast.style.fontSize).toEqual('20px');
+  });
+  test('show fail toast', async () => {
+    ToastFunction.fail('文案');
+    await sleep();
+    let failToast = document.querySelector('.nut-icon-tips') as HTMLElement;
+    expect(failToast.style.fontSize).toEqual('20px');
+    ToastFunction.hide();
+  });
 });

src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render preview image 1`] = `
+"<view class=\\"nut-uploader\\" modelvalue=\\"[object Object],[object Object],[object Object]\\">
+  <!--v-if-->
+  <view class=\\"nut-uploader__upload picture\\"><i class=\\"nutui-iconfont nut-icon nut-icon-photograph\\" style=\\"color: rgb(128, 128, 128);\\" src=\\"\\"></i><input class=\\"nut-uploader__input\\" type=\\"file\\" accept=\\"*\\" name=\\"file\\"></view>
+</view>"
+`;

src/packages/__VUE/uploader/__tests__/index.spec.ts

@@ -4,6 +4,11 @@ import { nextTick, ref } from 'vue';
 import NutIcon from '../../icon/index.vue';
 import NutProgress from '../../progress/index.vue';
 
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
 beforeAll(() => {
   config.global.components = {
     NutIcon,
@@ -14,6 +19,9 @@ beforeAll(() => {
 afterAll(() => {
   config.global.components = {};
 });
+const mockFile = new File([new ArrayBuffer(10000)], 'test.jpg', {
+  type: 'test'
+});
 
 test('should render base uploader and type', async () => {
   const wrapper = mount(Uploader);
@@ -144,3 +152,117 @@ test('should render base uploader props disabled', async () => {
   let up_load1 = wrapper.find('.nut-uploader__input');
   expect(up_load1.attributes().disabled).toBe('');
 });
+
+test('render preview image', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      modelValue: [
+        { url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' },
+        { url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' },
+        { file: mockFile }
+      ]
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('before-delete prop return false', () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      fileList: [
+        {
+          name: '文件1.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'success',
+          message: '上传成功',
+          type: 'image'
+        }
+      ],
+      isDeletable: true,
+      beforeDelete: () => false
+    }
+  });
+  wrapper.find('.nut-icon-failure').trigger('click');
+  expect(wrapper.emitted('delete')).toBeFalsy();
+});
+test('before-delete prop return true', () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      fileList: [
+        {
+          name: '文件1.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'success',
+          message: '上传成功',
+          type: 'image'
+        }
+      ],
+      isDeletable: true,
+      beforeDelete: () => true
+    }
+  });
+  wrapper.find('.nut-icon-failure').trigger('click');
+  expect(wrapper.emitted('delete')).toBeTruthy();
+});
+
+test('before-delete prop resolved', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      fileList: [
+        {
+          name: '文件1.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'success',
+          message: '上传成功',
+          type: 'image'
+        }
+      ],
+      isDeletable: true,
+      beforeDelete: () => true
+    }
+  });
+
+  wrapper.find('.nut-icon-failure').trigger('click');
+  await sleep();
+  expect(wrapper.emitted('delete')).toBeTruthy();
+});
+
+test('before-delete prop rejected', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      fileList: [
+        {
+          name: '文件1.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'success',
+          message: '上传成功',
+          type: 'image'
+        }
+      ],
+      isDeletable: true,
+      beforeDelete: () => false
+    }
+  });
+
+  wrapper.find('.nut-icon-failure').trigger('click');
+  await sleep();
+  expect(wrapper.emitted('delete')).toBeFalsy();
+});
+
+test('multiFile upload filter max-size file', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      maxSize: 1000
+    }
+  });
+
+  const smallFile = new File([new ArrayBuffer(100)], 'small.jpg');
+  const input = wrapper.find<HTMLInputElement>('.nut-uploader__input');
+  Object.defineProperty(input.element, 'files', {
+    get: jest.fn().mockReturnValue([mockFile, smallFile])
+  });
+  input.trigger('change');
+  await sleep();
+  // expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
+});

src/packages/__VUE/uploader/index.vue

@@ -317,7 +317,7 @@ export default create({
           index
         });
       } else {
-        console.log('用户阻止了删除！');
+        // console.log('用户阻止了删除！');
       }
     };
 

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>"
+`;

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();
   });
 });

src/packages/styles/variables-jdt.scss

@@ -471,7 +471,7 @@ $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
-$progress-insidetext-background: $primary-color !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
 $progress-outer-background-color: rgba(0, 0, 0, 0.15) !default;
 $progress-outer-border-radius: 0 !default;
 $progress-insidetext-border-radius: 10px !default;

src/packages/styles/variables.scss

@@ -496,7 +496,7 @@ $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
-$progress-insidetext-background: $primary-color !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
 $progress-outer-background-color: #f3f3f3 !default;
 $progress-outer-border-radius: 12px !default;
 $progress-insidetext-border-radius: 5px !default;