fix: sku测试用例

docs/examples-docs/sku.md

@@ -55,7 +55,6 @@ Vue.component(Sku.name, Sku);
       v-model="showBase"
       :sku="sku"
       :goods="goods"
-      :goods-id="goodsId"
       :hide-stock="sku.hide_stock"
       :show-add-cart-btn="true"
       :quota="quota"
@@ -80,7 +79,6 @@ Vue.component(Sku.name, Sku);
       v-model="showCustomAction"
       :sku="sku"
       :goods="goods"
-      :goods-id="goodsId"
       :hide-stock="sku.hide_stock"
       :show-add-cart-btn="true"
       :quota="quota"
@@ -117,7 +115,6 @@ Vue.component(Sku.name, Sku);
 | v-model | 是否显示sku | Boolean  | false |    是      |
 | sku | 商品sku数据 | Object  | - |    是      |
 | goods | 商品信息 | Object  | - |  是 |
-| goodsId | 商品id | String  | - |  是 |
 | hideStock | 是否显示商品剩余库存 | Boolean  | false | 否  |
 | showAddCartBtn | 是否显示加入购物车按钮 | Boolean  | true |  否 |
 | quota | 限购数(0表示不限购) | Number  | 0 |  否 |

docs/mock/sku.js

@@ -226,40 +226,10 @@ var _global = {
     "is_virtual": "0",
     "quota_used": 0,
     "goods_info": {
-        "title": "\u725b\u5976\u6d4b\u8bd5",
+        "title": "测试商品",
-        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"],
+        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/jpg"],
         "price": 1,
         "origin": ""
-    },
-    "url": {
-        "base": "https:\/\/www.youzan.com",
-        "bbs": "http:\/\/bbs.youzan.com",
-        "cdn": "https:\/\/b.yzcdn.cn\/",
-        "cdn_static": "https:\/\/b.yzcdn.cn\/v2",
-        "daxue": "http:\/\/xuetang.youzan.com",
-        "fenxiao": "\/\/fx.youzan.com",
-        "fuwu": "http:\/\/fuwu.youzan.com",
-        "img": "http:\/\/img.youzan.com",
-        "imgqn": "https:\/\/img.yzcdn.cn",
-        "login": "http:\/\/login.youzan.com",
-        "open": "\/\/open.youzan.com",
-        "static": "\/\/static.youzan.com\/v2",
-        "trade": "https:\/\/trade.koudaitong.com",
-        "v1": "https:\/\/www.youzan.com\/v1",
-        "v1_static": "https:\/\/b.yzcdn.cn\/v1",
-        "v2": "https:\/\/www.youzan.com\/v2",
-        "wap": "https:\/\/h5.youzan.com\/v2",
-        "ws": "ws:\/\/im.youzan.com:8080",
-        "www": "\/\/www.youzan.com\/v2",
-        "youzan": "http:\/\/www.youzan.com",
-        "cloud": "https:\/\/dl.yzcdn.cn",
-        "pf": "http:\/\/pifa.youzan.com",
-        "uic": "\/\/uic.youzan.com",
-        "store": "\/\/store.youzan.com",
-        "market": "http:\/\/pfmarket.youzan.com",
-        "im": "http:\/\/b-im.youzan.com",
-        "help": "\/\/help.youzan.com",
-        "materials": "\/\/materials.youzan.com"
     }
 };
 

packages/sku/containers/SkuContainer.vue

@@ -13,7 +13,7 @@
         </slot>
         <div class="van-sku-body scroller" :style="bodyStyle">
           <slot name="sku-group" :selectedSku="selectedSku">
-            <div class="van-sku-group-container">
+            <div v-if="hasSku" class="van-sku-group-container">
               <div v-for="(skutreeItem, index) in skuTree"
                 class="van-sku-row-group"
                 :key="index">
@@ -171,8 +171,11 @@ export default {
     isSkuCombSelected() {
       return isAllSelected(this.sku.tree, this.selectedSku);
     },
+    hasSku() {
+      return !this.sku.none_sku;
+    },
     selectedSkuComb() {
-      if (this.sku.none_sku) {
+      if (!this.hasSku) {
         return {
           id: this.sku.collection_id,
           price: Math.round(this.sku.price * 100),

test/unit/mock/sku.js

@@ -27,42 +27,6 @@ var _global = {
             "k_s": "s2"
         }],
         "list": [{
-            "id": 2259,
-            "price": 100,
-            "discount": 100,
-            "code": "",
-            "s1": "1215",
-            "s2": "1193",
-            "s3": "0",
-            "s4": "0",
-            "s5": "0",
-            "extend": null,
-            "kdt_id": 55,
-            "discount_price": 0,
-            "stock_num": 110,
-            "stock_mode": 0,
-            "is_sell": null,
-            "combin_sku": false,
-            "goods_id": 946755
-        }, {
-            "id": 2260,
-            "price": 100,
-            "discount": 100,
-            "code": "",
-            "s1": "1215",
-            "s2": "1194",
-            "s3": "0",
-            "s4": "0",
-            "s5": "0",
-            "extend": null,
-            "kdt_id": 55,
-            "discount_price": 0,
-            "stock_num": 0,
-            "stock_mode": 0,
-            "is_sell": null,
-            "combin_sku": false,
-            "goods_id": 946755
-        }, {
             "id": 2257,
             "price": 100,
             "discount": 100,
@@ -222,10 +186,10 @@ var _global = {
     "alias": "2oml0r0n5vytj",
     "quota": 15,
     "is_virtual": "0",
-    "quota_used": 0,
+    "quota_used": 2,
     "goods_info": {
-        "title": "\u725b\u5976\u6d4b\u8bd5",
+        "title": "测试商品",
-        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"],
+        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/jpg"],
         "price": 1,
         "origin": ""
     }

test/unit/specs/sku.spec.js

@@ -3,20 +3,106 @@ import { mount } from 'avoriaz';
 import { DOMChecker } from '../utils';
 import data from '../mock/sku';
 
+const { skuHelper } = Sku;
 const goods = data.goods_info;
 goods.picture = goods.picture[0];
 
-describe('Sku', () => {
+describe('Sku', (done) => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
 
-  it('default', () => {
+  it('default', (done) => {
     wrapper = mount(Sku, {
       attachToDocument: true,
       propsData: {
-        show: false,
+        value: true,
+        sku: data.sku,
+        goods: goods,
+        resetStepperOnHide: true
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-sku__goods-name': goods.title,
+        '.van-sku__price-num': '1.00'
+      },
+      value: {
+        '.van-stepper__input': '1'
+      },
+      src: {
+        '.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
+      }
+    });
+
+    // 测试默认选中
+    const selectedSku = skuHelper.getSelectedSkuValues(data.sku.tree, wrapper.vm.selectedSku);
+    expect(selectedSku[0].id).to.equal('30349');
+
+    // 关闭sku弹层
+    const closeCallback = sinon.spy();
+    const closeIcon = wrapper.find('.van-sku__close-icon')[0];
+    wrapper.vm.$on('sku-close', closeCallback);
+    closeIcon.trigger('click');
+    wrapper.vm.$nextTick(() => {
+      expect(closeCallback.calledOnce).to.be.true;
+      done();
+    });
+  });
+
+  it('click buy and addCart', (done) => {
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        value: true,
+        sku: data.sku,
+        goods: goods
+      }
+    });
+
+    const buyCallback = sinon.spy();
+    const addCartCallback = sinon.spy();
+    const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
+    const addCartBtn = wrapper.find('.van-sku__add-cart-btn')[0];
+    wrapper.vm.$on('buy-clicked', buyCallback);
+    wrapper.vm.$on('add-cart', addCartCallback);
+
+    // 未选择完整规格时，弹出toast提示
+    buyBtn.trigger('click');
+    wrapper.vm.$nextTick(() => {
+      const toastText = document.querySelector('.van-toast__text');
+      expect(toastText.textContent).to.equal('请选择完整的规格');
+      expect(buyCallback.calledOnce).to.be.false;
+
+      // 选择完整规格时，未填留言时，弹出toast提示。
+      wrapper.find('.van-sku-row-group')[1].find('.van-sku-row__item')[0].trigger('click');
+      buyBtn.trigger('click');
+      wrapper.vm.$nextTick(() => {
+        expect(toastText.textContent).to.equal('请填写留言1');
+        expect(buyCallback.calledOnce).to.be.false;
+
+        // 触发buy-clicked事件
+        const requiredMessage = wrapper.find('.van-cell--required .van-field__control')[0];
+        requiredMessage.element.value = 'test';
+        requiredMessage.trigger('input');
+        wrapper.vm.$nextTick(() => {
+          buyBtn.trigger('click');
+          addCartBtn.trigger('click');
+          expect(buyCallback.calledOnce).to.be.true;
+          expect(addCartCallback.calledOnce).to.be.true;
+          done();
+        });
+      });
+    });
+  });
+
+  it('change step value', (done) =>{
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        value: true,
         sku: data.sku,
         goods: goods,
         quota: data.quota,
@@ -24,20 +110,47 @@ describe('Sku', () => {
       }
     });
 
-    DOMChecker(wrapper, {
+    // 点击减号
-      text: {
+    const minusBtn = wrapper.find('.van-stepper__minus')[0];
-        '.van-order-goods-header a': '起码运动馆',
+    minusBtn.trigger('click');
-        '.van-order-goods-price .van-cell__value span': '¥10.50',
+    wrapper.vm.$nextTick(() => {
-        '.van-card__title': item1.title,
+      const toastText = document.querySelector('.van-toast__text');
-        '.van-card__num': 'x ' + item1.num,
+      expect(toastText.textContent).to.equal('至少选择一件');
-        '.van-card__price': '¥10.50'
+
-      },
+      // 手动修改购买数量
-      value: {
+      const stepperInput = wrapper.find('.van-stepper__input')[0];
-        '.van-order-goods-message textarea': '留言留言'
+      stepperInput.element.value = 20;
-      },
+      stepperInput.trigger('input');
-      src: {
+      wrapper.vm.$nextTick(() => {
-        '.van-card__thumb img': item1.img_url
+        expect(+stepperInput.element.value).to.equal(data.quota - data.quota_used);
+
+        // 达到购买上限时，点击加号
+        const plusBtn = wrapper.find('.van-stepper__plus')[0];
+        plusBtn.trigger('click');
+        wrapper.vm.$nextTick(() => {
+          expect(toastText.textContent).to.equal(`限购${data.quota}件，您已购买${data.quota_used}件`);
+          done();
+        });
+      });
+    });
+  });
+
+  it('test none sku', (done) => {
+    data.sku.none_sku = true; // eslint-disable-line
+
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        value: false,
+        sku: data.sku,
+        goods: goods
       }
     });
+
+    wrapper.vm.value = true;
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-sku-group-container').length).to.equal(0);
+      done();
+    });
   });
 });