feat: 新增tabs 单元测试

package.json

@@ -18,7 +18,7 @@
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
     "lint": "nutui-cli lint",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/*/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/tab/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:check": "prettier -l src/**/*.{ts,js,vue,scss}",

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

@@ -5,14 +5,24 @@ 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);
-    //     })
-    // });
-
+    wrapper.setData({ tabTitleList: [
+      {
+        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 () {
@@ -20,64 +30,44 @@ describe('Tab.vue', () => {
             
         })
     });
-
-    // it('是否显示内容区域', () => {
-    //     wrapper.setProps({ contentShow: true });
-    //     return Vue.nextTick().then(function () {
-    //         expect(wrapper.contains('.nut-tab-item')).toBe(true);
-            
-    //     })
-    // });
-
-    it('禁止选择第一个标签', () => {
-        wrapper.setData({ tabTitleList: [
-            {
-              tabTitle: "衣物",
-              disable: true,
-              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>"
-            }
-          ] });
-          return Vue.nextTick().then(function () {
-              expect(wrapper.findAll('.nut-title-nav-leftnav').at(0).is('.nut-tab-disable')).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({ positionNav: 'top' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-title-nav-list').at(0).is('.nut-tab-active')).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'});
+      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标签标题', () => {
+    it('点击tab事件', () => {
+      wrapper.setProps({positionNav:'top'});
       return Vue.nextTick().then(function () {
-         expect(wrapper.findAll('.nut-title-nav').at(0).text()).toBe('衣物');
+        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标签', () => {
-    // 	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/doc.md

@@ -269,7 +269,7 @@ export default {
 | scroll-line|是否显示tab切换时，滑动效果的红条|Boolean|false|
 | tab-line|是否显示tab切换时，无滑动效果的active红条|Boolean|true|
 | is-scroll|是否支持超出范围后，滑动选择多个页签|Boolean|false|
-| wrapper-height |设置tab区域的高度，只有在 is-scroll=true；positionNav=left或者right 的情况下有效|Number/String|200|
+| wrapper-height |设置tab区域的高度，只有在positionNav=left或者right 的情况下有效|Number/String|200|
 
 
 ### nut-tab-panel