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

package.json

@@ -101,4 +101,4 @@
     "instrument": false,
     "sourceMap": false
   }
-}
+}

src/packages/navbar/__test__/navbar.spec.js

@@ -1,46 +1,42 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils';
 import Navbar from '../navbar.vue';
 import Vue from 'vue';
 
-
 describe('Navbar.vue', () => {
-    const wrapper = shallowMount(Navbar, {
-        
-    });
-    
-    it('主标题文案展示', () => {
-        wrapper.setProps({ title: '测试title'});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nav-title span').text()).toBe('测试title');
-        })
+  const wrapper = shallowMount(Navbar, {});
+
+  it('主标题文案展示', () => {
+    wrapper.setProps({ title: '测试title' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nav-title span').text()).toBe('测试title');
     });
+  });
 
-    it('左侧返回按钮是否展示', () => {
-        wrapper.setProps({ backShow: true});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.back').contains('.back-icon')).toBe(true); 
-        })
+  it('左侧返回按钮是否展示', () => {
+    wrapper.setProps({ backShow: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.back').exists()).toBe(true);
     });
-    
-    it('左侧关闭按钮是否展示', () => {
-        wrapper.setProps({ backShow: true});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.close').contains('.close-icon')).toBe(true); 
-        })
+  });
+
+  it('左侧关闭按钮是否展示', () => {
+    wrapper.setProps({ closeShow: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.close').contains('.close-img')).toBe(true);
     });
+  });
 
-    it('右侧搜索按钮是否展示', () => {
-        wrapper.setProps({ backShow: true});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.search').contains('.search-icon')).toBe(true); 
-        })
+  it('右侧搜索按钮是否展示', () => {
+    wrapper.setProps({ rightShow: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.search').contains('.search-img')).toBe(true);
     });
+  });
 
-    it('右侧更多按钮是否展示', () => {
-        wrapper.setProps({ backShow: true});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.more').contains('.more-icon')).toBe(true); 
-        })
+  it('右侧更多按钮是否展示', () => {
+    wrapper.setProps({ backShow: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.more').contains('.more-img')).toBe(true);
     });
-    
-});
+  });
+});

src/packages/navbar/navbar.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="close" @click="$emit('on-click-close')">
         <slot name="close-icon" v-if="closeShow">
-          <img width="22" height="22" src="../../assets/img/nav_close.png" />
+          <img width="22" height="22" src="../../assets/img/nav_close.png" class="close-img" />
         </slot>
       </div>
     </div>
@@ -22,12 +22,12 @@
     <div class="nav-right">
       <div class="search" @click="$emit('on-click-search')">
         <slot name="search-icon" v-show="rightShow">
-          <img width="22" height="22" src="../../assets/img/nav_search.png" />
+          <img width="22" height="22" src="../../assets/img/nav_search.png" class="search-img" />
         </slot>
       </div>
       <div class="more" @click="$emit('on-click-more')" v-if="moreShow">
         <slot name="more-icon">
-          <img width="22" height="22" src="../../assets/img/nav_more.png" />
+          <img width="22" height="22" src="../../assets/img/nav_more.png" class="more-img" />
         </slot>
       </div>
     </div>

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

@@ -1,73 +1,72 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils';
 import Tab from '../tab.vue';
-import Vue from 'vue';
 
+import Vue from 'vue';
 
 describe('Tab.vue', () => {
-    const wrapper = mount(Tab);
-    wrapper.setData({ tabTitleList: [
+  const wrapper = mount(Tab);
+  wrapper.setData({
+    tabTitleList: [
       {
-        tabTitle: "衣物",
-        content: "<p>衣物内容</p>"
+        tabTitle: '衣物',
+        content: '<p>衣物内容</p>',
       },
       {
-        tabTitle: "日用品",
-        content: "<p>日用品内容</p>"
+        tabTitle: '日用品',
+        content: '<p>日用品内容</p>',
       },
       {
-        tabTitle: "运动器材",
-        content: "<p>运动器材内容</p>"
+        tabTitle: '运动器材',
+        content: '<p>运动器材内容</p>',
       },
       {
-        tabTitle: "电影票",
-        content: "<p>电影票内容</p>"
-      }
-    ]});
-    it('当前tab的位置', () => {
-        wrapper.setProps({ positionNav: 'left' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.nut-tab-title-leftnav')).toBe(true);
-            
-        })
+        tabTitle: '电影票',
+        content: '<p>电影票内容</p>',
+      },
+    ],
+  });
+  it('当前tab的位置', () => {
+    wrapper.setProps({ positionNav: 'left' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains('.nut-tab-title-leftnav')).toBe(true);
     });
-    it('当前tab是否可以滑动', () => {
-      wrapper.setProps({ isScroll: 'true' ,positionNav:'top'});
-      return Vue.nextTick().then(function () {
-          expect(wrapper.contains('.nut-title-nav-scroll')).toBe(true);
-      })
+  });
+  it('当前tab是否可以滑动', () => {
+    wrapper.setProps({ isScroll: 'true', positionNav: 'top' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains('.nut-title-nav-scroll')).toBe(true);
     });
-    it('当前tab包含滑动的底部导航条', () => {
-      wrapper.setProps({ scrollLine: 'true' ,positionNav:'top'});
-      return Vue.nextTick().then(function () {
-          expect(wrapper.contains('.nav-bar-top')).toBe(true);
-      })
+  });
+  it('当前tab包含滑动的底部导航条', () => {
+    wrapper.setProps({ scrollLine: 'true', positionNav: 'top' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains('.nav-bar-top')).toBe(true);
     });
-    it('当前tab包含点击式的底部导航条', () => {
-      wrapper.setProps({ tabLine: 'true' ,positionNav:'top'});
-      return Vue.nextTick().then(function () {
-          expect(wrapper.contains('.tab-line')).toBe(true);
-      })
+  });
+  it('当前tab包含点击式的底部导航条', () => {
+    wrapper.setProps({ tabLine: 'true', positionNav: 'top' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains('.tab-line')).toBe(true);
     });
-    it('当前tab默认活动的页签是否正确', () => {
-      wrapper.setProps({ tabLine: 'true', positionNav:'top'});
-      wrapper.setData({ activeIndex: 1});
-      return Vue.nextTick().then(function () {
-        expect(wrapper.findAll('.nut-title-nav').at(1).contains('.nut-tab-active')).toBe(true);
-      })
+  });
+  it('当前tab默认活动的页签是否正确', () => {
+    wrapper.setProps({ tabLine: 'true', positionNav: 'top' });
+    wrapper.setData({ activeIndex: 1 });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-title-nav').at(1).contains('.nut-tab-active')).toBe(true);
     });
-    it('当前tab设置高度是否生效', () => {
-      wrapper.setProps({wrapperHeight:'250', positionNav:'left'});
-      return Vue.nextTick().then(function () {
-        expect(wrapper.findAll('.nut-tab-item').at(0).hasStyle('height','250px')).toBe(true);
-      })
+  });
+  it('当前tab设置高度是否生效', () => {
+    wrapper.setProps({ wrapperHeight: '250', positionNav: 'left' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-tab-item').at(0).hasStyle('height', '250px')).toBe(true);
     });
-    it('点击tab事件', () => {
-      wrapper.setProps({positionNav:'top'});
-      return Vue.nextTick().then(function () {
-        wrapper.findAll('.nut-title-nav').at(2).trigger('click');
-        expect(wrapper.findAll('.nut-title-nav').at(1).contains('.nut-tab-active')).toBe(true);
-      })
+  });
+  it('点击tab事件', () => {
+    wrapper.setProps({ positionNav: 'top' });
+    return Vue.nextTick().then(function () {
+      wrapper.findAll('.nut-title-nav').at(2).trigger('click');
+      expect(wrapper.findAll('.nut-title-nav').at(1).contains('.nut-tab-active')).toBe(true);
     });
+  });
 });
-
-

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

@@ -1,81 +1,75 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils';
 import Tabbar from '../tabbar.vue';
 import Vue from 'vue';
 
 describe('Tabbar.vue', () => {
-	const wrapper = mount(Tabbar)
-	wrapper.setData({
-		currIndex:1,
-		tabList: [
-			{
-				tabTitle: '定位',
-				curr: false,
-				href:"http://nutui.jd.com/demo.html#/index",
-				icon: require('../../../assets/img/address.png'),
-				activeIcon: require('../../../assets/img/address-red.png')
-			},
-			{
-				tabTitle: '收藏',
-				curr: false,
-				isDot:true,
-				href:"http://nutui.jd.com/demo.html#/index",
-				icon: require('../../../assets/img/collection.png'),
-				activeIcon: require('../../../assets/img/collection-red.png')
-			},
-			{
-				tabTitle: '任务',
-				curr: true,
-				num:9,
-				href:"http://nutui.jd.com/demo.html#/index",
-				icon: require('../../../assets/img/task.png'),
-				activeIcon: require('../../../assets/img/task-red.png')
-			},
-			{
-				tabTitle: '我的',
-				curr: false,
-				num:100,
-				href:"http://nutui.jd.com/demo.html#/index",
-				icon: require('../../../assets/img/myicon.png'),
-				activeIcon: require('../../../assets/img/myicon-red.png')
-			}
-		]
-	});
+  const wrapper = mount(Tabbar);
+  wrapper.setData({
+    currIndex: 1,
+    tabList: [
+      {
+        tabTitle: '定位',
+        curr: false,
+        href: 'http://nutui.jd.com/demo.html#/index',
+        icon: require('../../../assets/img/address.png'),
+        activeIcon: require('../../../assets/img/address-red.png'),
+      },
+      {
+        tabTitle: '收藏',
+        curr: false,
+        isDot: true,
+        href: 'http://nutui.jd.com/demo.html#/index',
+        icon: require('../../../assets/img/collection.png'),
+        activeIcon: require('../../../assets/img/collection-red.png'),
+      },
+      {
+        tabTitle: '任务',
+        curr: true,
+        num: 9,
+        href: 'http://nutui.jd.com/demo.html#/index',
+        icon: require('../../../assets/img/task.png'),
+        activeIcon: require('../../../assets/img/task-red.png'),
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        num: 100,
+        href: 'http://nutui.jd.com/demo.html#/index',
+        icon: require('../../../assets/img/myicon.png'),
+        activeIcon: require('../../../assets/img/myicon-red.png'),
+      },
+    ],
+  });
 
-    it('页签位于页面底部', () => {
-        wrapper.setProps({ bottom: true });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.bottom')).toBe(true);
-        })
+  it('页签位于页面底部', () => {
+    wrapper.setProps({ bottom: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains('.bottom')).toBe(true);
     });
+  });
 
-	it('设置tabbar标签标题', () => {
-		return Vue.nextTick().then(function () {
-		   expect(wrapper.findAll('.tabbar-nav').at(1).find('.tabbar-nav-word').text()).toBe('收藏');
-		})
-	});
-
-	it('当前tabbar标签激活状态是否正确', () => {
-		return Vue.nextTick().then(function () {
-		   expect(wrapper.findAll('.tabbar-nav').at(1).contains('.curr')).toBe(true);
-		})
-	});
+  it('设置tabbar标签标题', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.tabbar-nav').at(1).find('.tabbar-nav-word').text()).toBe('收藏');
+    });
+  });
 
-	it('点击切换tabbar标签', () => {
-    	return Vue.nextTick().then(function () {
-			wrapper.findAll('.tabbar-nav').at(2).trigger('click');
-			expect(wrapper.findAll('.tabbar-nav').at(2).contains('.curr')).toBe(true)
-		})
-	});
+  it('当前tabbar标签激活状态是否正确', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.tabbar-nav').at(1).contains('.curr')).toBe(true);
+    });
+  });
 
-	it('当前tabbar标签显示的图片', () => {
-		return Vue.nextTick().then(function () {
-		   expect(wrapper.findAll('.tabbar-nav').at(0).find('.icon').hasStyle('background-image','url(./img/address.png)')).toBe(true);
-		})
-	});
+  it('点击切换tabbar标签', () => {
+    return Vue.nextTick().then(function () {
+      wrapper.findAll('.tabbar-nav').at(2).trigger('click');
+      expect(wrapper.findAll('.tabbar-nav').at(2).contains('.curr')).toBe(true);
+    });
+  });
 
-	it('当前tabbar标签的href链接', () => {
-		return Vue.nextTick().then(function () {
-		   expect(wrapper.findAll('.tabbar-nav').at(0).attributes('href')).toBe('http://nutui.jd.com/demo.html#/index');
-		})
-	});
-});
+  it('当前tabbar标签显示的图片', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.tabbar-nav').at(0).find('.icon').hasStyle('background-image', 'url(./img/address.png)')).toBe(true);
+    });
+  });
+});