notify、fixednav等单元测试 (#1048)

* feat: 单元测试提交

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

@@ -1,43 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Empty from '../../empty/index.vue';
-
-test('prop image description', () => {
-  const wrapper = mount(Empty, {
-    props: {
-      image: 'empty',
-      description: '文字描述'
-    }
-  });
-
-  expect(wrapper.html()).toContain('img');
-  expect(wrapper.html()).toContain('文字描述');
-});
-
-test('slot image', () => {
-  const wrapper = mount(Empty, {
-    slots: {
-      image: '<img src="https://xxx.png"/>'
-    }
-  });
-
-  expect(wrapper.html()).toContain('xxx.png');
-});
-
-test('slot description', () => {
-  const wrapper = mount(Empty, {
-    slots: {
-      description: 'jest'
-    }
-  });
-
-  expect(wrapper.html()).toContain('jest');
-});
-
-test('slot defalut', () => {
-  const wrapper = mount(Empty, {
-    slots: {
-      default: '加载失败，请刷新页面'
-    }
-  });
-  expect(wrapper.html()).toContain('请刷新页面');
-});

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

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import Empty from '../../empty/index.vue';
+
+describe('Empty', () => {
+  test('should be shown when passing image and description', () => {
+    const wrapper = mount(Empty, {
+      props: {
+        image: 'empty',
+        description: '这是文字描述'
+      }
+    });
+
+    expect(wrapper.html()).toContain('img');
+    expect(wrapper.html()).toContain('这是文字描述');
+  });
+
+  test('should be shown when passing slot image', () => {
+    const wrapper = mount(Empty, {
+      slots: {
+        image: '<img src="https://abc.png"/>'
+      }
+    });
+
+    expect(wrapper.html()).toContain('abc.png');
+  });
+
+  test('should be shown when passing slot description', () => {
+    const wrapper = mount(Empty, {
+      slots: {
+        description: 'test'
+      }
+    });
+
+    expect(wrapper.html()).toContain('test');
+  });
+
+  test('should be shown when passing slot defalut', () => {
+    const wrapper = mount(Empty, {
+      slots: {
+        default: '加载失败，请刷新页面'
+      }
+    });
+
+    expect(wrapper.html()).toContain('加载失败');
+  });
+});

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

@@ -0,0 +1,68 @@
+import { config, DOMWrapper, mount } from '@vue/test-utils';
+import FixedNav from '../index.vue';
+import { nextTick } from 'vue';
+import NutIcon from '../../icon/index.vue';
+import nutOverlay from '../../overlay/index.vue';
+beforeAll(() => {
+  config.global.components = {
+    NutIcon,
+    nutOverlay
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+describe('FixedNav', () => {
+  test('base nut-fixednav', () => {
+    const wrapper = mount(FixedNav);
+    const rate = wrapper.find('.nut-fixednav');
+    expect(rate.exists()).toBe(true);
+  });
+
+  test('should be displayed after setting the visible', () => {
+    const wrapper = mount(FixedNav, {
+      props: {
+        visible: true,
+        overlay: true
+      }
+    });
+    const _html: DOMWrapper<Element> = wrapper.find('.nut-fixednav__list');
+    expect(_html.exists()).toBe(true);
+  });
+  test('should be displayed after setting the type', () => {
+    const wrapper = mount(FixedNav, {
+      props: {
+        type: 'left'
+      }
+    });
+    const _html: DOMWrapper<Element> = wrapper.find('.left');
+    expect(_html.exists()).toBe(true);
+  });
+
+  test('should be displayed after setting the un-active-text', async () => {
+    const wrapper = mount(FixedNav, {
+      props: {
+        'un-active-text': '展开',
+        'active-text': '收起'
+      }
+    });
+    const _html1 = wrapper.find('.nut-overlay');
+    expect(_html1.exists()).toBe(true);
+    const _html = wrapper.find('.nut-fixednav__btn');
+    expect(_html.html()).toContain('展开');
+    wrapper.find('.nut-fixednav__btn').trigger('click');
+    await nextTick();
+    // expect(_html.html()).toContain('收起');
+  });
+
+  test('should be displayed after setting the position', () => {
+    const wrapper = mount(FixedNav, {
+      props: {
+        position: { top: '210px' }
+      }
+    });
+    const _html = wrapper.find('.nut-fixednav');
+    expect((_html.element as HTMLElement).style.top).toBe('210px');
+  });
+});

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

@@ -1,32 +1,35 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Indicator from '../index.vue';
-test('test size && current', async () => {
-  const wrapper = shallowMount(Indicator, {
-    props: {
-      size: 5,
-      current: 3
-    }
-  });
 
-  expect(wrapper.findAll('.nut-indicator--dot').length).toBe(4);
-  expect(wrapper.findAll('.nut-indicator--number').length).toBe(1);
-  const number = wrapper.find(':nth-of-type(3)');
-  expect(number.classes()).toContain('nut-indicator--number');
-});
-test('test block && align && fillZero', () => {
-  const wrapper = shallowMount(Indicator, {
-    props: {
-      size: 5,
-      current: 3,
-      block: true,
-      align: 'right',
-      fillZero: true
-    }
+describe('Indicator', () => {
+  test('should be shown when passing size and current', async () => {
+    const wrapper = mount(Indicator, {
+      props: {
+        size: 5,
+        current: 3
+      }
+    });
+
+    expect(wrapper.findAll('.nut-indicator--dot').length).toBe(4);
+    expect(wrapper.findAll('.nut-indicator--number').length).toBe(1);
+    const number = wrapper.find(':nth-of-type(3)');
+    expect(number.classes()).toContain('nut-indicator--number');
   });
+  test('should be shown when passing block and align and fillZero', () => {
+    const wrapper = mount(Indicator, {
+      props: {
+        size: 5,
+        current: 3,
+        block: true,
+        align: 'right',
+        fillZero: true
+      }
+    });
 
-  const indicator = wrapper.find('.nut-indicator');
-  expect(indicator.classes()).toContain('nut-indicator--block');
-  expect(indicator.classes()).toContain('nut-indicator--align__right');
-  const firstChild = wrapper.findAll('.nut-indicator--number')[0];
-  expect(firstChild.text()).toBe('03');
+    const indicator = wrapper.find('.nut-indicator');
+    expect(indicator.classes()).toContain('nut-indicator--block');
+    expect(indicator.classes()).toContain('nut-indicator--align__right');
+    const firstChild = wrapper.findAll('.nut-indicator--number')[0];
+    expect(firstChild.text()).toBe('03');
+  });
 });

src/packages/__VUE/notify/__test__/notify.spec.ts

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import Notify from '../index.vue';
+
+describe('Notify', () => {
+  test('base notify', () => {
+    const wrapper = mount(Notify);
+    const rate = wrapper.find('.nut-notify');
+    expect(rate.exists()).toBe(true);
+  });
+  test('base notify message', async () => {
+    const wrapper = mount(Notify, {
+      props: {
+        message: '测试文案'
+      }
+    });
+    expect(wrapper.html()).toContain('测试文案');
+  });
+  test('should be displayed after setting the type', async () => {
+    const wrapper = mount(Notify, {
+      props: {
+        type: 'warning'
+      }
+    });
+    const notify = wrapper.findAll('.nut-notify--warning');
+    expect(notify.length).toBe(1);
+  });
+
+  test('should be displayed after setting the color and background', async () => {
+    const wrapper = mount(Notify, {
+      props: {
+        color: 'rgb(173, 0, 0)',
+        background: 'rgb(255, 225, 225)'
+      }
+    });
+    const notify = wrapper.find('.nut-notify');
+    expect((notify.element as HTMLElement).style.color).toBe('rgb(173, 0, 0)');
+    expect((notify.element as HTMLElement).style.background).toBe('rgb(255, 225, 225)');
+  });
+
+  test('should be displayed after setting the color and class-name', () => {
+    const wrapper = mount(Notify, { props: { 'class-name': 'xxx' } });
+    const rate = wrapper.findAll('.xxx');
+    expect(rate.length).toBe(1);
+  });
+});

src/packages/__VUE/notify/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Transition name="toast-fade" @after-leave="onAfterLeave">
     <view
-      :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]"
+      :class="['popup-top', 'nut-notify', `nut-notify--${type}`, [className]]"
       :style="{ color: color, background: background }"
       v-show="state.mounted"
       @click="clickCover"
@@ -59,7 +59,9 @@ export default create({
     });
     onMounted(() => {
       state.mounted = true;
+      console.log(props.className);
     });
+
     const clickCover = () => {
       props.onClick && props.onClick();
     };