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

package.json

@@ -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/*/__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/tab/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch"
   },

src/packages/button/__test__/button.spec.js

@@ -3,103 +3,72 @@ import Button from '../button.vue';
 import Vue from 'vue';
 
 describe('Button.vue', () => {
+    let wrapper = shallowMount(Button, {
+        slots: {
+            default: '去结算'
+        }
+    });
     it('设置type', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            },
-            propsData:{
-                type: 'light'
-            }
-        });
+        wrapper.setProps({
+            type: 'light'
+        })
         return Vue.nextTick().then(function () {
             expect(wrapper.attributes('class')).toContain('light');
         })
     });
     it('设置slot', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            }
-        });
         return Vue.nextTick().then(function () {
             expect(wrapper.text()).toBe('去结算');
         })
     });
     it('设置disabled', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            },
-            propsData:{
-                disabled: true
-            }
-        });
+        wrapper.setProps({
+            disabled: true
+        })
         return Vue.nextTick().then(function () {
             expect(wrapper.text()).toBe('去结算');
             expect(wrapper.attributes('disabled')).toContain('disabled');
         })
     });
     it('设置shape', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            },
-            propsData:{
-                shape: 'circle'
-            }
-        });
+        wrapper.setProps({
+            shape: 'circle'
+        })
         return Vue.nextTick().then(function () {
             expect(wrapper.text()).toBe('去结算');
             expect(wrapper.attributes('class')).toContain('circle');
         })
     });
     it('设置small', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            },
-            propsData:{
-                small: true
-            }
-        });
+        wrapper.setProps({
+            small: true
+        })
         return Vue.nextTick().then(function () {
             expect(wrapper.text()).toBe('去结算');
             expect(wrapper.attributes('class')).toContain('small');
         })
     });
     it('设置icon', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '全部100万'
-            },
-            propsData:{
-                type: 'actived',
-                icon: 'tick'
-            }
-        });
+        wrapper.setProps({
+            type: 'actived',
+            icon: 'tick'
+        })
         return Vue.nextTick().then(function () {
-            expect(wrapper.text()).toBe('全部100万');
+            expect(wrapper.text()).toBe('去结算');
             expect(wrapper.contains('.txt-icon')).toBe(true);
             expect(wrapper.find('.txt-icon').attributes('type')).toBe('tick');            
-            expect(wrapper.find('span').text()).toBe('全部100万');
+            expect(wrapper.find('span').text()).toBe('去结算');
         })
     });
     it('设置color', () => {
-        let wrapper = shallowMount(Button, {
-            slots: {
-                default: '去结算'
-            },
-            propsData:{
-                icon: 'tick',
-                color: '#fff'
-            }
-        });
+        wrapper.setProps({
+            icon: 'tick',
+            color: '#fff'
+        })
         return Vue.nextTick().then(function () {
             expect(wrapper.text()).toBe('去结算');
             expect(wrapper.find('span').attributes('style')).toBe('color: rgb(255, 255, 255);');
             expect(wrapper.find('.txt-icon').attributes('color')).toBe('#fff');
         })
     });
-
 });

src/packages/button/button.vue

@@ -1,5 +1,5 @@
 <template>
-    <button :class="btnCls" :disabled="disabled" @click="clickHandler">
+    <button :class="clsStyle" :disabled="disabled" @click="clickHandler">
         <nut-icon class="txt-icon" v-if="icon != ''" :type="icon" :color="this.color"></nut-icon>
         <span :style="{color:this.color}"><slot></slot></span>
     </button>
@@ -41,31 +41,24 @@ export default {
     components: {
         'nut-icon': Icon
     },
-    data() {
-        return {
-            btnCls: ''
-        };
-    },
-    mounted() {
-        this.initStyle();
-        this.initIcon();
-    },
-    methods: {
-        initStyle() {
-            this.btnCls = `nut-button ${this.type} ${this.shape}`;
-            this.btnCls += this.small ? ' small': '';
-            this.btnCls += this.block ? ' block': '';
-            this.btnCls += this.label ? ' label': '';
-        },
-        initIcon() {
+    computed: {
+        clsStyle() {
+            let cls = 'nut-button ';
+            cls += `${this.type} ${this.shape}`;
+            cls += this.small ? ' small': '';
+            cls += this.block ? ' block': '';
+            cls += this.label ? ' label': '';
             if(!this.$slots.default) {
                 if(this.small) {
-                    this.btnCls += ' no-txt-small';
+                    cls += ' no-txt-small';
                 }else {
-                    this.btnCls += ' no-txt';
+                    cls += ' no-txt';
                 }
-            }            
-        },
+            }
+            return cls;
+        }
+    },
+    methods: {
         clickHandler() {
             this.$emit('click');
         }

src/packages/button/demo.vue

@@ -10,10 +10,10 @@
       </div>
 
       <h4>常规按钮组</h4>
-      <nut-button-group>
+      <nut-buttongroup>
         <nut-button type="light">重置</nut-button>
         <nut-button>确定</nut-button>
-      </nut-button-group>
+      </nut-buttongroup>
 
       <h4>通栏按钮</h4>
       <div>

src/packages/buttongroup/__test__/buttongroup.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import ButtonGroup from '../buttongroup.vue';
+import Vue from 'vue';
+
+describe('ButtonGroup.vue', () => {
+    it('设置shape', () => {
+        let wrapper = shallowMount(ButtonGroup, {
+            slots: {
+                default: '<div>测试</div>'
+            },
+            propsData:{
+                shape: 'circle'
+            }
+        });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.attributes('class')).toContain('circle');
+        })
+    });
+    it('设置type', () => {
+        let wrapper = shallowMount(ButtonGroup, {
+            slots: {
+                default: `<div>测试</div>`
+            },
+            propsData:{
+                type: 'menu'
+            }
+        });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.attributes('class')).toContain('menu');
+        })
+    });
+});

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

@@ -4,15 +4,62 @@ 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);
+            
+        })
+    });
 
-    //const wrapper = mount(Tab);
-    // it('页签类型为based', () => {
-    //     wrapper.setProps({ type: 'based' });
-
-    //     return Vue.nextTick().then(function () {
-    //         expect(wrapper.contains('.based')).toBe(true);
-    //     })
-
-    // });
-
+    it('禁止选择第一个标签', () => {
+        wrapper.setData({ tabTitleList: [
+            {
+              tabTitle: "衣物",
+              disable: false,
+              iconUrl:
+                "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+              content: "<p>衣物内容</p>"
+            },
+            {
+              tabTitle: "日用品",
+              iconUrl:
+                "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+              content: "<p>日用品内容</p>"
+            },
+            {
+              tabTitle: "运动器材",
+              iconUrl:
+                "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+              content: "<p>运动器材内容</p>"
+            },
+            {
+              tabTitle: "电影票",
+              iconUrl:
+                "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+              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) 
+    });
+    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)
+    });
 });

src/packages/tab/tab.vue

@@ -123,7 +123,7 @@ export default {
                 let slot = [...this.$slots.default];
                 this.tabTitleList = [];
                 this.initTab(slot); 
-            },0);
+            },50);    
         }
     },
     computed:{
@@ -139,8 +139,9 @@ export default {
         },
     },
     mounted() {
-        let slot = [...this.$slots.default];
-        this.initTab(slot);   
+        this.$nextTick(()=>{
+            this.$slots.default && this.initTab(this.$slots.default); 
+        })     
     },
     methods: {
         closeItem:function(value){