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

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

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should allow to use the elId prop 1`] = `""`;
+
+exports[`should allow to use the teleport prop 1`] = `""`;

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

@@ -12,26 +12,55 @@ beforeAll(() => {
 afterAll(() => {
   config.global.components = {};
 });
+
 test('emit click event', () => {
   const wrapper = mount(BackTop);
   wrapper.trigger('click');
   expect(wrapper.emitted('click')!.length).toEqual(1);
 });
+
 test('backtop show', () => {
   const wrapper = mount(BackTop);
   const backtop = wrapper.find('.nut-backtop');
   expect(backtop.exists()).toBe(true);
 });
+
 test('backtop style', () => {
   const wrapper = mount(BackTop, {
     props: {
-      bottom: 50,
-      right: 40,
-      zIndex: 100
+      bottom: 50
     }
   });
   const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.bottom).toBe('50px');
+});
+
+test('backtop style', () => {
+  const wrapper = mount(BackTop, {
+    props: {
+      right: 40
+    }
+  });
+  const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.right).toBe('40px');
+});
+
+test('backtop style', () => {
+  const wrapper = mount(BackTop, {
+    props: {
+      zIndex: 100
+    }
+  });
+  const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.zIndex).toBe('100');
 });
+
+test('should allow to use the elId prop', () => {
+  const root = document.createElement('div');
+  mount(BackTop, {
+    props: {
+      elId: root
+    }
+  });
+  expect(root.innerHTML).toMatchSnapshot();
+});

src/packages/__VUE/backtop/index.vue

@@ -7,14 +7,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  onActivated,
-  onDeactivated,
-  reactive
-} from 'vue';
+import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('backtop');
 export default create({
@@ -28,9 +21,10 @@ export default create({
       default: 10
     },
     elId: {
-      type: String,
-      default: ''
+      type: [String, Element],
+      default: 'body'
     },
+
     distance: {
       type: Number,
       default: 200
@@ -92,9 +86,7 @@ export default create({
 
     function scrollAnimation() {
       let cid = requestAniFrame()(function fn() {
-        var t =
-          props.duration -
-          Math.max(0, state.startTime - +new Date() + props.duration);
+        var t = props.duration - Math.max(0, state.startTime - +new Date() + props.duration);
         var y = (t * -state.scrollTop) / props.duration + state.scrollTop;
         scroll(y);
         cid = requestAniFrame()(fn);
@@ -136,9 +128,7 @@ export default create({
 
     function init() {
       if (props.elId && document.getElementById(props.elId)) {
-        state.scrollEl = document.getElementById(props.elId) as
-          | HTMLElement
-          | Window;
+        state.scrollEl = document.getElementById(props.elId) as HTMLElement | Window;
       }
       addEventListener();
       initCancelAniFrame();

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/navbar/demo.vue

@@ -28,7 +28,6 @@
       title="购物车"
       titIcon="cart2"
       desc="编辑"
-      icon="more-x"
     >
       <template #right>
         <nut-icon class="right" name="more-x"></nut-icon>
@@ -36,13 +35,7 @@
     </nut-navbar>
 
     <h2>自定义导航栏中间内容</h2>
-    <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      desc="编辑"
-      icon="horizontal-n"
-    >
+    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
           <nut-tabpane title="商品"> </nut-tabpane>
@@ -56,7 +49,7 @@
     </nut-navbar>
 
     <h2>多tab切换导航</h2>
-    <nut-navbar @on-click-back="back" icon="more-x">
+    <nut-navbar @on-click-back="back">
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
           <nut-tabpane title="商品"> </nut-tabpane>

src/packages/__VUE/navbar/doc.md

@@ -55,7 +55,6 @@ app.use(TabPane);
       title="购物车"
       titIcon="cart2"
       desc="编辑"
-      icon="more-x"
     >
       <template #right>
         <nut-icon class="right" name="more-x"></nut-icon>
@@ -100,7 +99,6 @@ app.use(TabPane);
       @on-click-title="title"
       @on-click-right="rightClick"
       desc="编辑"
-      icon="horizontal-n"
     >
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
@@ -151,7 +149,7 @@ app.use(TabPane);
 :::demo
 ```html
   <template>
-    <nut-navbar @on-click-back="back" icon="more-x">
+    <nut-navbar @on-click-back="back" >
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
           <nut-tabpane title="商品"> </nut-tabpane>

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

@@ -3,13 +3,13 @@
     <view class="nut-navbar__left">
       <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
     </view>
-    <view class="nut-navbar__title" :class="{ icon }">
+    <view class="nut-navbar__title">
       <view v-if="title" class="text__title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
-    <view class="nut-navbar__right" :class="{ icon }" v-if="desc || icon">
-      <view v-if="desc" :style="{ 'text-align': descTextAlign }" @click="handleClear">{{ desc }}</view>
+    <view class="nut-navbar__right" v-if="desc || icon">
+      <view v-if="desc" @click="handleClear">{{ desc }}</view>
       <template v-if="icon">
         <view @click="handleSends">
           <slot name="icons"></slot>

src/packages/__VUE/navbar/index.vue

@@ -5,16 +5,14 @@
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-navbar__title" :class="{ icon }">
+    <view class="nut-navbar__title">
       <view v-if="title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
 
-    <view class="nut-navbar__right" :class="{ icon }">
-      <view v-if="desc" class="right_text" :style="{ 'text-align': descTextAlign }" @click="handleRight">{{
-        desc
-      }}</view>
+    <view class="nut-navbar__right">
+      <view v-if="desc" class="right_text" @click="handleRight">{{ desc }}</view>
       <slot name="right"></slot>
     </view>
   </view>

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