浏览代码

test(progress,toast,actionsheet): add progress test optimization other test (#1061)

Drjingfubo 3 年之前
父节点
当前提交
efc845154a

+ 2 - 2
src/packages/__VUE/actionsheet/__test__/index.spec.ts

@@ -81,7 +81,7 @@ test('should render sure choose when use choose-tag-value', async () => {
       menuItems: [{ name: '选项一' }, { name: '选项二' }]
     }
   });
-  let item: any = wrapper.findAll('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-item');
   expect(item[0].element.style.color).toContain('238, 10, 36');
 });
 
@@ -95,7 +95,7 @@ test('should render sure color when use color', async () => {
       menuItems: [{ name: '选项一' }, { name: '选项二' }]
     }
   });
-  let item: any = wrapper.findAll('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-item');
   expect(item[0].element.style.color).toContain('green');
 });
 

+ 12 - 0
src/packages/__VUE/progress/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render progress when use props 1`] = `
+"<div class=\\"nut-progress\\">
+  <div class=\\"nut-progress-outer nut-progress-outer-part nut-progress-base\\">
+    <div class=\\"nut-progress-inner\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"nut-progress-text\\" style=\\"line-height: px;\\"><span>100%</span></div>
+</div>"
+`;

+ 73 - 0
src/packages/__VUE/progress/test/index.spec.ts

@@ -0,0 +1,73 @@
+import { config, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import NutIcon from '../../icon/index.vue';
+import Progress from '../index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('should render progress when use props', async () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 100
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+test('should render different height and color when use color height props', async () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      strokeColor: 'blue',
+      strokeWidth: '20',
+      textColor: 'red'
+    }
+  });
+  await nextTick();
+  let inner = wrapper.find<HTMLElement>('.nut-progress-inner');
+  expect(inner.element.style.background).toEqual('blue');
+  let text = wrapper.find<HTMLElement>('.nut-progress-text');
+  let span = wrapper.find<HTMLElement>('.nut-progress-text span');
+  expect(span.element.style.color).toEqual('red');
+  expect(text.element.style.lineHeight).toEqual('20px');
+});
+
+test('should hide percentage when use showText props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      showText: false
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-text');
+  expect(text.exists()).toBe(false);
+});
+
+test('should render inside percentage when use textInside props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      textInside: true
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-insidetext');
+  expect(text.exists()).toBe(true);
+});
+
+test('should render custom size when use size props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      size: 'large'
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-large');
+  expect(text.exists()).toBe(true);
+});

+ 1 - 1
src/packages/__VUE/tabbar/__test__/index.spec.ts

@@ -82,7 +82,7 @@ test('should render custom check and icon size when using visible', async () =>
     `
   });
   await nextTick();
-  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  const tabbarItem = wrapper.findAll<HTMLElement>('.nut-tabbar-item');
   expect(tabbarItem[0].element.style.color).toEqual('rgb(0, 0, 0)');
   expect(tabbarItem[1].element.style.color).toEqual('blue');
   expect(wrapper.find<HTMLElement>('.nut-icon').element.style.fontSize).toEqual('18px');

+ 2 - 2
src/packages/__VUE/toast/test/function.spec.ts

@@ -23,7 +23,7 @@ describe('function toast', () => {
       title: '标题文字'
     });
     await sleep();
-    let textToast: any = document.querySelector('.nut-toast.nut-toast-center');
+    let textToast = document.querySelector('.nut-toast.nut-toast-center') as HTMLElement;
     expect(textToast.innerHTML).toContain('标题文字');
     await sleep(3000);
     expect(textToast.style.display).toEqual('none');
@@ -31,7 +31,7 @@ describe('function toast', () => {
   test('show fail toast', async () => {
     ToastFunction.fail('文案');
     await sleep();
-    let failToast: any = document.querySelector('.nut-icon-failure');
+    let failToast = document.querySelector('.nut-icon-failure') as HTMLElement;
     expect(failToast.style.fontSize).toEqual('20px');
   });
 });