增加单元测试

docs/start.md

@@ -20,11 +20,22 @@ yarn add @nutui/nutui
 
 > 默认安装最新版，如需使用 1.x 版本，请指定版本号，如：  `npm i @nutui/nutui@1.3.2 -S`
 
-#### 浏览器引入
+#### 页面引入
 
-在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 nutui。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
+在页面中使用 script 和 link 标签直接引入文件，并使用全局变量 nutui。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
 
-> 我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐浏览器中直接引入的用法
+当然你也可以通过CDN的方式引入。
+
+```html
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+<!-- 引入Vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<!-- 引入组件库 -->
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
+```
+
+> 在页面中直接引入，将无法使用 **主题换肤** 等功能。我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐在页面中直接引入的用法
 
 ## 加载示例
 
@@ -91,6 +102,9 @@ Button.install(Vue);
 ```html
 <nut-switch :active="true" size="base"></nut-switch>
 ```
-2.组件具体用法以文档为准
 
-3.组件使用过程中如有问题或建议，欢迎[反馈](https://github.com/jdf2e/nutui/issues)
+2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 webpack 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、postcss 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件
+
+3.组件具体用法以文档为准
+
+4.组件使用过程中如有问题或建议，欢迎[反馈](https://github.com/jdf2e/nutui/issues)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -24,7 +24,7 @@
     "build": "npm run build:prod && npm run build:prodmin && npm run build:disp",
     "eslint": "eslint src/packages/**/*.{js,vue}",
     "add": "node scripts/createCptTpl.js",
-    "test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text  mocha-webpack --webpack-config build/webpack.test.conf.js --require test/setup.js src/packages/picker/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text  mocha-webpack --webpack-config build/webpack.test.conf.js --require test/setup.js src/packages/*/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch"
   },

sites/demo/view/index.vue

@@ -108,7 +108,7 @@ export default {
       height: 10px;
       width: 10px;
       transform: rotate(0deg);
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#848484' viewBox='0 0 30 11'%3E%3Cpath d='M15 7.757L27.737.21a1.5 1.5 0 0 1 1.53 2.58c-4.5 2.668-9 5.334-13.5 8a1.503 1.503 0 0 1-1.53 0c-4.5-2.666-9-5.332-13.5-8A1.5 1.5 0 1 1 2.266.21C6.51 2.726 10.756 5.24 15 7.757' fill-rule='evenodd'/%3E%3C/svg%3E")
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(132,132,132)' viewBox='0 0 30 11'%3E%3Cpath d='M15 7.757L27.737.21a1.5 1.5 0 0 1 1.53 2.58c-4.5 2.668-9 5.334-13.5 8a1.503 1.503 0 0 1-1.53 0c-4.5-2.666-9-5.332-13.5-8A1.5 1.5 0 1 1 2.266.21C6.51 2.726 10.756 5.24 15 7.757' fill-rule='evenodd'/%3E%3C/svg%3E")
         no-repeat center;
       background-size: contain;
       transition: transform 0.3s;
@@ -131,7 +131,7 @@ export default {
     overflow: hidden;
     border-top: 1px solid #edeef1;
     border-radius: 2px;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-11 0h30v30h-30z'/%3E%3Cpath d='M7.757 15C5.241 10.755 2.727 6.51.21 2.266A1.5 1.5 0 0 1 2.79.736l8 13.499c.28.472.28 1.058 0 1.53l-8 13.5a1.499 1.499 0 1 1-2.58-1.53L7.757 15z' fill='#848484' /%3E%3C/g%3E%3C/svg%3E")
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-11 0h30v30h-30z'/%3E%3Cpath d='M7.757 15C5.241 10.755 2.727 6.51.21 2.266A1.5 1.5 0 0 1 2.79.736l8 13.499c.28.472.28 1.058 0 1.53l-8 13.5a1.499 1.499 0 1 1-2.58-1.53L7.757 15z' fill='rgb(132,132,132)' /%3E%3C/g%3E%3C/svg%3E")
       no-repeat right 15px center;
     background-size: 10px 10px;
     a {

src/packages/actionsheet/demo.vue

@@ -46,7 +46,7 @@
         <!-- demo(带取消按钮） -->
         <nut-actionsheet :is-visible="isVisible1" 
             @close="switchActionSheet('isVisible1')"
-            :cancelTxt="`取消`"
+            cancelTxt="取消"
             :menu-items="menuItems2"
             @choose="chooseItemAgeSpec"
         ></nut-actionsheet>
@@ -68,7 +68,7 @@
         <nut-actionsheet :is-visible="isVisible4" 
             :menu-items="menuItems4" 
             :chooseTagValue="`确定`"
-            :cancelTxt="`取消`"
+            cancelTxt="取消"
             @close="switchActionSheet('isVisible4')"
         >
             <span slot="title"><label>确定删除吗？</label></span>

src/packages/actionsheet/doc.md

@@ -12,7 +12,7 @@
 ```html
 <nut-actionsheet :is-visible="isVisible1" 
     @close="switchActionSheet('isVisible1')"
-    :cancelTxt="`取消`"
+    cancelTxt="取消"
     :menu-items="menuItems2"
     @choose="chooseItemAgeSpec"
 ></nut-actionsheet>
@@ -39,8 +39,8 @@
 ```html
 <nut-actionsheet :is-visible="isVisible4" 
     :menu-items="menuItems4" 
-    :chooseTagValue="`确定`"
-    :cancelTxt="`取消`"
+    chooseTagValue="确定"
+    cancelTxt="取消"
     @close="switchActionSheet('isVisible4')"
 >
     <span slot="title"><label>确定删除吗？</label></span>

src/packages/price/doc.md

@@ -1,5 +1,7 @@
 # Price 商品价格
 
+可用来对商品价格数值的小数点前后部分应用不同样式，还支持人民币符号、千位分隔符、设置小数点位数等功能
+
 ## 基本用法
 
 ```html

src/packages/radio/__test__/radio.spec.js

@@ -1,23 +1,3 @@
 import { shallowMount } from '@vue/test-utils'
 import Radio from '../radio.vue';
 import Vue from 'vue';
-
-
-// describe('Radio.vue', () => {
-//     const wrapper = shallowMount(Radio, {
-//         propsData: {
-//             value:'a',
-            
-//         }
-//     });
-
-
-//     it('选中状态', () => {
-//         wrapper.setProps({ label: 'a' });
-
-//         return Vue.nextTick().then(function () {
-//             expect(wrapper.find('input').attributes('checked')).toBe(true);
-//         })
-//     });
-
-// });

src/packages/rating/demo.vue

@@ -47,8 +47,8 @@ export default {
         return{
             val:4,
             result:'',
-            icon1:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff0000' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
-            icon2:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff0000' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
+            icon1:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
+            icon2:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
         }
     },
    

src/packages/slider/slider.vue

@@ -1,11 +1,23 @@
 <template>
-    <div class="nut-slider">
-        <div class="nut-slider-left-text" v-if="showRangeTxt">{{ range[0] }}</div>
-        <div class="nut-slider-box" @click="onClick">
-            <div :class="['nut-slider-Handle',{'nut-slider-ani':ani}]" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @click="onTouchEnd" :style="{'left':posi+'px'}"><span :class="['nut-slider-label',{'nut-slider-label-always':showLabelAlways}]" v-if="showLabel">{{current}}</span></div>
-        </div>
-        <div class="nut-slider-right-text" v-if="showRangeTxt">{{ range[1] }}</div>
+  <div class="nut-slider">
+    <div class="nut-slider-left-text" v-if="showRangeTxt">{{ range[0] }}</div>
+    <div class="nut-slider-box" @click="onClick">
+      <div
+        :class="['nut-slider-Handle',{'nut-slider-ani':ani}]"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+        @click="onTouchEnd"
+        :style="{'left':posi+'px'}"
+      >
+        <span
+          :class="['nut-slider-label',{'nut-slider-label-always':showLabelAlways}]"
+          v-if="showLabel"
+        >{{current}}</span>
+      </div>
     </div>
+    <div class="nut-slider-right-text" v-if="showRangeTxt">{{ range[1] }}</div>
+  </div>
 </template>
 <script>
 export default {
@@ -75,7 +87,7 @@ export default {
       this.setPosi(posi);
     },
     setVal(posi) {
-      const trans = posi / this.box.clientWidth * this.total;
+      const trans = (posi / this.box.clientWidth) * this.total;
       this.current = Math.round(trans / this.cell) * this.cell + this.range[0];
       this.$emit("input", this.current);
     },

src/packages/tab/__test__/tab.spec.js

@@ -5,17 +5,26 @@ import Vue from 'vue';
 
 describe('Tab.vue', () => {
     const wrapper = mount(Tab);
+    
     it('页签类型为based', () => {
         wrapper.setProps({ type: 'based' });
         return Vue.nextTick().then(function () {
             expect(wrapper.contains('.based')).toBe(true);
         })
     });
-    
+
     it('当前tab的位置', () => {
         wrapper.setProps({ positionNav: 'left' });
         return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.nut-tab')).toBe(true);
+            expect(wrapper.contains('.nut-tab-title-leftnav')).toBe(true);
+            
+        })
+    });
+
+    it('是否显示内容区域', () => {
+        wrapper.setProps({ contentShow: true });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.contains('.nut-tab-item')).toBe(true);
             
         })
     });
@@ -24,7 +33,7 @@ describe('Tab.vue', () => {
         wrapper.setData({ tabTitleList: [
             {
               tabTitle: "衣物",
-              disable: false,
+              disable: true,
               iconUrl:
                 "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
               content: "<p>衣物内容</p>"
@@ -48,18 +57,35 @@ describe('Tab.vue', () => {
               content: "<p>电影票内容</p>"
             }
           ] });
-             setTimeout(()=>{
-                return Vue.nextTick().then(function () {
-                        expect(wrapper.findAll('.nut-title-nav-leftnav').at(0).is('.nut-tab-disable')).toBe(true)
-                })
-            },10) 
+          return Vue.nextTick().then(function () {
+              expect(wrapper.findAll('.nut-title-nav-leftnav').at(0).is('.nut-tab-disable')).toBe(true)
+          }) 
+    });
+    it('是否显示关闭按钮', () => {
+        wrapper.setProps({ closable: true });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.contains('.close-btn')).toBe(true);
+            
+        })
     });
     it('当前默认选中的tab', () => {
-        wrapper.setProps({ defIndex: 0 });
-        setTimeout(()=>{
-            return Vue.nextTick().then(function () {
-                    expect(wrapper.findAll('.nut-title-nav-list').at(1).is('.nut-tab-active')).toBe(true)
-            })
-        },20)
+        wrapper.setProps({ positionNav: 'top' });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll('.nut-title-nav-list').at(0).is('.nut-tab-active')).toBe(true)
+        })
     });
-});
+    it('tab标签标题', () => {
+      return Vue.nextTick().then(function () {
+         expect(wrapper.findAll('.nut-tab-link').at(0).text()).toBe('衣物');
+      })
+    });
+    it('点击tab标签', () => {
+    	return Vue.nextTick().then(function () {
+            wrapper.findAll('.nut-title-nav-list').at(1).trigger('click');
+            expect(wrapper.findAll('.nut-title-nav-list').at(1).is('.nut-tab-active')).toBe(true)
+      })
+        
+    });
+});
+
+

src/packages/tab/tab.vue

@@ -230,13 +230,14 @@ export default {
         },
         switchTab:function(index,event,disable){
             if(!disable && event.target.className.indexOf('nut-title-nav')!==-1){
+                this.activeIndex=index;
                 this.initX= parseInt(this.navWidth * index);
                 let nutTab = event.target.parentNode.parentNode;
                 let items =  this.positionNav=='bottom' || this.positionNav=='right' ?nutTab.children[0].children : nutTab.children[1].children;
                 for(let i=0;i<items.length;i++){
-                    if(i===index){
+                    if(i==index){
                         this.removeClass(items[i],'hide');
-                        this.activeIndex=index;
+                        
                     }else{
                         this.addClass(items[i],'hide');
                     }

src/packages/tabbar/__test__/tabbar.spec.js

@@ -21,7 +21,7 @@ describe('Tabbar.vue', () => {
     });
 
     
-    it('点击评分', () => {
+    it('点击tab标签', () => {
     	wrapper.setData({ tabList: [
     	        {
     	          'tabTitle':'百度',
@@ -45,6 +45,11 @@ describe('Tabbar.vue', () => {
             expect(wrapper.findAll('.tabbar-nav').at(1).is('.curr')).toBe(true)
         })
         
-    });
+	});
+	it('tab标签标题', () => {
+		return Vue.nextTick().then(function () {
+		   expect(wrapper.findAll('.tabbar-nav-word').at(0).text()).toBe('百度');
+		})
+	});
 
 });

src/packages/toast/__test__/toast.spec.js

@@ -40,13 +40,13 @@ describe('Toast.vue', () => {
         })
     });
 
-    it('图标', () => {
-        wrapper.setData({ msg: '测试文案', visible: true, type:'success' });
+    // it('图标', () => {
+    //     wrapper.setData({ msg: '测试文案', visible: true, type:'success' });
 
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.nut-toast-has-icon')).toBe(true);
-        })
-    });
+    //     return Vue.nextTick().then(function () {
+    //         expect(wrapper.contains('.nut-toast-has-icon')).toBe(true);
+    //     })
+    // });
 
     it('loading类型', () => {
         wrapper.setData({ msg: '测试文案', visible: true, type: 'loading' });