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

build/webpack.base.conf.js

@@ -24,8 +24,9 @@ module.exports = {
                 include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
                 loader: 'istanbul-instrumenter-loader'
             }: {},
-            test ? { test: /\.css$/, loader: 'style!css' } : {},
+            test ? { test: /\.css$/, use: [{loader: 'style!css'}] } : {},
             test ? { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' } : {},
+            test ? { test: /\.scss$/, use: [{loader: 'sass-loader', options:{data: `@import "./src/styles/index.scss"; `,} }]} : {},
             !test ?{
                 test: /\.(sa|sc|c)ss$/,
                 use: [

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

src/packages/actionsheet/__test__/actionsheet.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import ActionSheet from '../actionsheet.vue'
+import Vue from 'vue';
+
+
+describe('ActionSheet.vue', () => {
+    const wrapper = shallowMount(ActionSheet, {
+        propsData:{
+            menuItems: [
+                {
+                    'name': '男',
+                    'value': 0
+                },
+                {
+                    'name': '女',
+                    'value': 1
+                }
+            ]
+        }
+    });
+
+    it('测试条数', () => {
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll('.nut-actionsheet-item').length).toBe(2);
+        })
+    });
+
+    it('是否可见', () => {
+        wrapper.setProps({isVisible: true });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.nut-actionsheet-mask').isVisible()).toBe(true);
+            expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
+        })
+    });
+
+    it('显示取消', () => {
+        wrapper.setProps({isVisible: true, cancelTxt: '取消' });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.nut-actionsheet-cancel').isVisible()).toBe(true);
+            expect(wrapper.find('.nut-actionsheet-cancel').text()).toBe('取消');
+        })
+    });
+
+    it('高亮显示', () => {
+        wrapper.setProps({chooseTagValue: '男' });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll('.nut-actionsheet-item').at(0).contains('.nut-actionsheet-item-active')).toBe(true);
+        })
+    });
+
+    it('设置列表项展示使用参数', () => {
+        wrapper.setProps({optionTag: 'value' });
+        return Vue.nextTick().then(function () {
+            expect(wrapper.findAll('.nut-actionsheet-item').at(1).text()).toBe('1');
+        })
+    });
+});

src/packages/actionsheet/_test_/actionsheet.spec.js

@@ -1,29 +0,0 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import Rating from '../actionsheet.vue'
-import Vue from 'vue';
-
-
-describe('actionsheet.vue', () => {
-    const wrapper = shallowMount(Rating, {
-        propsData: {
-        }
-    });
-
-    it('可见', () => {
-        wrapper.setProps({visible: true });
-
-        return Vue.nextTick().then(function () {
-            expect(wrapper.isVisible()).toBe(true);
-        })
-    });
-
-
-    it('点击mask关闭', () => {
-        wrapper.setProps({isClickCloseMask: true });
-        wrapper.findAll('.nut-actionsheet-mask').at(1).trigger('click');
-        return Vue.nextTick().then(function () {
-            expect(wrapper.isVisible()).toBe(false);
-        })
-    });
-
-});

src/packages/noticebar/demo.vue

@@ -14,7 +14,8 @@
     <nut-noticebar
       :mode="true"
       @click="hello"
-    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！</nut-noticebar>
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+    </nut-noticebar>
     <h4>通告栏模式--链接模式</h4>
     <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"

src/packages/noticebar/doc.md

@@ -3,32 +3,34 @@
 ## 基本用法
 
 ```html
-<nut-noticebar
-  text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-  left-icon="//img.yzcdn.cn/vant/volume.png"
-/>
+    <nut-noticebar
+      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+    ></nut-noticebar>
 ```
 ## 禁用滚动
 文字内容多于一行时，可通过scrollable参数控制是否开启滚动
 ```html
-<nut-noticebar
-  text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-  left-icon="//img.yzcdn.cn/vant/volume.png"
-/>
+    <nut-noticebar
+      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      :scrollable="false"
+    ></nut-noticebar>
 ```
 ## 通告栏模式--关闭模式
 ```html
-<nut-noticebar
-  text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-  left-icon="//img.yzcdn.cn/vant/volume.png"
->华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！</nut-noticebar>
+    <nut-noticebar
+      :mode="true"
+      @click="hello"
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+    </nut-noticebar>
 ```
 ## 通告栏模式--链接模式
 ```html
-<nut-noticebar
-  text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-  left-icon="//img.yzcdn.cn/vant/volume.png"
-><a href="https://www.jd.com">京东商城</a></nut-noticebar>
+    <nut-noticebar
+      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      left-icon="//img.yzcdn.cn/vant/volume.png"
+    >
+      <a href="https://www.jd.com">京东商城</a>
+    </nut-noticebar>
 ```
 
 
@@ -38,7 +40,7 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | text | 提示的信息 | String | 空
-| mode | 模式 | Boolean | false
+| mode | 是否启用关闭模式 | Boolean | false
 | leftIcon | 是否禁用 | String | 空
 | color | 是否禁用 | String | 空
 | background | 是否禁用 | String | 空

src/packages/picker/__test__/picker.spec.js

@@ -0,0 +1,44 @@
+// import { shallowMount, mount } from '@vue/test-utils'
+// import Picker from '../picker.vue'
+// import Vue from 'vue';
+
+
+// describe('Picker.vue', () => {
+//     const wrapper = shallowMount(Picker, {
+//         propsData:{
+//             listData: [
+//                 ['2019', '2020', '2021', '2022', '2023' ],
+//                 ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+//             ],
+//         }
+//     });
+
+//     it('测试条数', () => {
+//         return Vue.nextTick().then(function () {
+//             expect(wrapper.findAll('.nut-picker-list').length).toBe(2);
+//         })
+//     });
+
+//     it('是否可见', () => {
+//         wrapper.setProps({isVisible: true });
+//         return Vue.nextTick().then(function () {
+//             expect(wrapper.find('.nut-actionsheet-mask').isVisible()).toBe(true);
+//             expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
+//         })
+//     });
+
+//     it('标题', () => {
+//         wrapper.setProps({title: '选择年月' });
+//         return Vue.nextTick().then(function () {
+//             expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
+//         })
+//     });
+
+//     it('设置默认值', () => {
+//         wrapper.setProps({defaultValueData: ['2020', '2'] });
+//         return Vue.nextTick().then(function () {
+//             expect(wrapper.findAll('.nut-picker-list-panel').at(0).attributes('style')).toBe('transform: translateY(-72px);');
+//             expect(wrapper.findAll('.nut-picker-list-panel').at(1).attributes('style')).toBe('transform: translateY(-36px);');
+//         })
+//     });
+// });

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

@@ -20,46 +20,60 @@ describe('Tab.vue', () => {
         })
     });
 
-    // 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)
-    // });
-});
+    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)
+    });
+    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('百度');
+		})
+	});
 
 });