From 485452cc976f6f89281a0dfab3d2a544c7dd07ce Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Sat, 16 Sep 2017 21:46:39 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=E5=A4=A7=E9=83=A8?=
 =?UTF-8?q?=E5=88=86lodash=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/sku/components/SkuMessages.vue  |  3 +--
 packages/sku/components/SkuRow.vue       | 20 +-------------------
 packages/sku/components/SkuRowItem.vue   | 15 +++++----------
 packages/sku/containers/SkuContainer.vue | 18 +++++++++++++-----
 packages/sku/utils/skuHelper.js          | 22 +++++-----------------
 5 files changed, 25 insertions(+), 53 deletions(-)

diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index d4f2f17d7..8a8418382 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import isEmpty from 'lodash/isEmpty';
 import Field from '../../field';
 import CellGroup from '../../cell-group';
 import validateEmail from 'zan-utils/validate/email';
@@ -117,7 +116,7 @@ export default {
         const value = values[i];
         const message = this.internalMessages[i];
 
-        if (isEmpty(value)) {
+        if (value === '') {
           // 必填字段的校验
           if (message.required == '1') { // eslint-disable-line
             if (message.type === 'image') {
diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue
index f81905f5d..5556d4121 100644
--- a/packages/sku/components/SkuRow.vue
+++ b/packages/sku/components/SkuRow.vue
@@ -2,33 +2,15 @@
   <div class="van-sku-row">
     <div class="van-sku-row__title">{{ skuRow.k }}：</div>
     <div class="van-sku-row__items">
-      <slot name="sku-row-items">
-        <van-sku-row-item
-          v-for="(skuValue, index) in skuRow.v"
-          :key="index"
-          :skuKeyStr="skuRow.k_s"
-          :skuValue="skuValue"
-          :skuEventBus="$attrs.skuEventBus"
-          :selectedSku="$attrs.selectedSku"
-          :skuList="$attrs.skuList">
-        </van-sku-row-item>
-      </slot>
+      <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-import SkuRowItem from './SkuRowItem';
-
 export default {
   name: 'van-sku-row',
 
-  inheritAttrs: false,
-
-  components: {
-    [SkuRowItem.name]: SkuRowItem
-  },
-
   props: {
     skuRow: Object
   }
diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue
index a3cdd608b..7f57322c1 100644
--- a/packages/sku/components/SkuRowItem.vue
+++ b/packages/sku/components/SkuRowItem.vue
@@ -8,11 +8,6 @@
 </template>
 
 <script>
-import assign from 'lodash/assign';
-import filter from 'lodash/filter';
-import keys from 'lodash/keys';
-import every from 'lodash/every';
-
 export default {
   name: 'van-sku-row-item',
 
@@ -29,12 +24,12 @@ export default {
       return this.skuValue.id === this.selectedSku[this.skuKeyStr];
     },
     isChoosable() {
-      const matchedSku = assign({}, this.selectedSku, {
+      const matchedSku = Object.assign({}, this.selectedSku, {
         [this.skuKeyStr]: this.skuValue.id
       });
-      const skusToCheck = filter(keys(matchedSku), skuKey => matchedSku[skuKey] !== '');
-      const filteredSku = filter(this.skuList, sku => {
-        return every(skusToCheck, function(skuKey) {
+      const skusToCheck = Object.keys(matchedSku).filter(skuKey => matchedSku[skuKey] !== '');
+      const filteredSku = this.skuList.filter(sku => {
+        return skusToCheck.every(skuKey => {
           // 后端给的skuValue.id有时候是数字有时候是字符串，全等会匹配不上
           return matchedSku[skuKey] == sku[skuKey]; // eslint-disable-line
         });
@@ -47,7 +42,7 @@ export default {
 
   methods: {
     onSkuSelected() {
-      this.skuEventBus.$emit('sku:select', assign({}, this.skuValue, { skuKeyStr: this.skuKeyStr }));
+      this.skuEventBus.$emit('sku:select', Object.assign({}, this.skuValue, { skuKeyStr: this.skuKeyStr }));
     }
   }
 };
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
index 3ea04a934..115ee3323 100644
--- a/packages/sku/containers/SkuContainer.vue
+++ b/packages/sku/containers/SkuContainer.vue
@@ -14,15 +14,21 @@
         <div class="van-sku-body scroller" :style="bodyStyle">
           <slot name="sku-group" :selectedSku="selectedSku">
             <div v-if="hasSku" class="van-sku-group-container">
-              <div v-for="(skutreeItem, index) in skuTree"
+              <div v-for="(skuTreeItem, index) in skuTree"
                 class="van-sku-row-group"
                 :key="index">
                 <van-sku-row
-                  v-bind="$attrs"
                   :skuEventBus="skuEventBus"
-                  :skuRow="skutreeItem"
-                  :skuList="sku.list"
-                  :selectedSku="selectedSku">
+                  :skuRow="skuTreeItem">
+                  <van-sku-row-item
+                    v-for="(skuValue, index) in skuTreeItem.v"
+                    :key="index"
+                    :skuKeyStr="skuTreeItem.k_s"
+                    :skuValue="skuValue"
+                    :skuEventBus="skuEventBus"
+                    :selectedSku="selectedSku"
+                    :skuList="sku.list">
+                  </van-sku-row-item>
                 </van-sku-row>
               </div>
             </div>
@@ -67,6 +73,7 @@ import Popup from '../../popup';
 import Toast from '../../toast';
 import SkuHeader from '../components/SkuHeader';
 import SkuRow from '../components/SkuRow';
+import SkuRowItem from '../components/SkuRowItem';
 import SkuStepper from '../components/SkuStepper';
 import SkuMessages from '../components/SkuMessages';
 import SkuActions from '../components/SkuActions';
@@ -82,6 +89,7 @@ export default {
     [Popup.name]: Popup,
     [SkuHeader.name]: SkuHeader,
     [SkuRow.name]: SkuRow,
+    [SkuRowItem.name]: SkuRowItem,
     [SkuStepper.name]: SkuStepper,
     [SkuMessages.name]: SkuMessages,
     [SkuActions.name]: SkuActions
diff --git a/packages/sku/utils/skuHelper.js b/packages/sku/utils/skuHelper.js
index b354c295b..9b02942e0 100644
--- a/packages/sku/utils/skuHelper.js
+++ b/packages/sku/utils/skuHelper.js
@@ -1,10 +1,4 @@
-import isArray from 'lodash/isArray';
-import keys from 'lodash/keys';
-import filter from 'lodash/filter';
 import find from 'lodash/find';
-import isObject from 'lodash/isObject';
-import every from 'lodash/every';
-
 /*
   normalize sku tree
 
@@ -49,21 +43,15 @@ export const normalizeSkuTree = (skuTree) => {
 
 // 判断是否所有的sku都已经选中
 export const isAllSelected = (skuTree, selectedSku) => {
-  if (!isArray(skuTree)) {
-    throw new Error('skuTree must be array');
-  }
-  if (!isObject(selectedSku)) {
-    throw new Error('selectedSku must be object');
-  }
-
-  const selected = filter(keys(selectedSku), skuKeyStr => selectedSku[skuKeyStr] !== '');
+  // 筛选selectedSku对象中key值不为空的值
+  const selected = Object.keys(selectedSku).filter(skuKeyStr => selectedSku[skuKeyStr] !== '');
   return skuTree.length === selected.length;
 };
 
 // 根据已选择的sku获取skuComb
 export const getSkuComb = (skuList, selectedSku) => {
-  const skuComb = find(skuList, (skuComb) => {
-    return every(keys(selectedSku), skuKeyStr => {
+  const skuComb = find(skuList, skuComb => {
+    return Object.keys(selectedSku).every(skuKeyStr => {
       // 后端给的key有时数字有时字符串，需要兼容=。=
       return skuComb[skuKeyStr] == selectedSku[skuKeyStr]; // eslint-disable-line
     });
@@ -74,7 +62,7 @@ export const getSkuComb = (skuList, selectedSku) => {
 // 获取已选择的sku名称
 export const getSelectedSkuValues = (skuTree, selectedSku) => {
   const normalizedTree = normalizeSkuTree(skuTree);
-  return keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
+  return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
     const skuValues = normalizedTree[skuKeyStr];
     const skuValueId = selectedSku[skuKeyStr];
 

From 3ba8b84d0878726f1f9364bde68d0524c84d56fb Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Tue, 19 Sep 2017 18:16:42 +0800
Subject: [PATCH 2/2] fix: update test & move constants

---
 docs/examples-docs/sku.md                |  10 ++
 packages/sku/components/SkuMessages.vue  |  27 ++--
 packages/sku/components/SkuStepper.vue   |   8 +-
 packages/sku/constants.js                |  14 +++
 packages/sku/containers/SkuContainer.vue |  42 ++++---
 test/unit/specs/sku.spec.js              | 154 +++++++++++++++++++++--
 6 files changed, 205 insertions(+), 50 deletions(-)

diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md
index 7924e1cea..080606e11 100644
--- a/docs/examples-docs/sku.md
+++ b/docs/examples-docs/sku.md
@@ -15,6 +15,10 @@ export default {
       goods: goods,
       quota: data.quota,
       quotaUsed: data.quota_used,
+      initialSku: {
+        s1: '30349',
+        s2: '1193'
+      }
     }
   },
 
@@ -85,6 +89,7 @@ Vue.component(Sku.name, Sku);
       :quota="quota"
       :quota-used="quotaUsed"
       :reset-stepper-on-hide="true"
+      :initial-sku="initialSku"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >
@@ -201,6 +206,11 @@ skuData: {
     message_1:"",
     ... // 有几个留言就有几条
   },
+  // 另一种格式的留言，key不同
+  cartMessages: {
+    '留言1': 'xxxx',
+    ... // key是message的name
+  },
   // 选择的商品数量
   selectedNum:1,
   // 选择的sku组合
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index 8a8418382..66ef71905 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -1,12 +1,12 @@
 <template>
-  <van-cell-group>
+  <van-cell-group class="van-sku-messages">
     <template v-for="(message, index) in internalMessages">
       <template v-if="message.type === 'image'"></template>
       <van-field v-else-if="message.multiple == '1'"
         :key="index"
         :required="message.required == '1'"
         :label="message.name"
-        placeholder="点击填写段落文本"
+        :placeholder="placeholderMap.textarea"
         type="textarea"
         v-model="messageValues[index]">
       </van-field>
@@ -14,7 +14,7 @@
         :key="index"
         :required="message.required == '1'"
         :label="message.name"
-        :placeholder="PLACEHOLDER_MAP[message.type]"
+        :placeholder="placeholderMap[message.type]"
         :type="getType(message)"
         v-model="messageValues[index]">
       </van-field>
@@ -27,15 +27,7 @@ import Field from '../../field';
 import CellGroup from '../../cell-group';
 import validateEmail from 'zan-utils/validate/email';
 import validateNumber from 'zan-utils/validate/number';
-
-const PLACEHOLDER_MAP = {
-  'id_no': '输入18位身份证号码',
-  text: '输入文本',
-  tel: '输入数字',
-  email: '输入邮箱',
-  date: '点击选择日期',
-  time: '点击选择时间'
-};
+import { DEFAULT_PLACEHOLDER_MAP } from '../constants';
 
 export default {
   name: 'van-sku-messages',
@@ -46,12 +38,13 @@ export default {
   },
 
   props: {
-    messages: Array
+    messages: Array,
+    messagePlaceholderMap: Object
   },
 
   data() {
     return {
-      PLACEHOLDER_MAP
+      placeholderMap: Object.assign({}, DEFAULT_PLACEHOLDER_MAP, this.messagePlaceholderMap)
     };
   },
 
@@ -127,12 +120,6 @@ export default {
             }
           }
         } else {
-          // if (message.type == 'image') {
-          //   loaded = _this.$el.find('#ipt-' + j).data('uploaded');
-          //   if (loaded == 'false' || !loaded) {
-          //     return '图片还在上传中，请稍等。。';
-          //   }
-          // }
           if (message.type === 'tel' && !validateNumber(value)) {
             return '请填写正确的数字格式留言';
           }
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue
index 1c7db6b56..892c235f9 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@@ -11,7 +11,7 @@
 
 <script>
 import Stepper from '../../stepper';
-import { LIMIT_TYPE } from '../constants';
+import { LIMIT_TYPE, DEFAULT_BUY_TEXT } from '../constants';
 
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
@@ -24,7 +24,7 @@ export default {
 
   props: {
     skuEventBus: Object,
-    sku: Object,
+    skuStockNum: Number,
     selectedSku: Object,
     selectedSkuComb: Object,
     selectedNum: Number,
@@ -36,7 +36,7 @@ export default {
     },
     stepperTitle: {
       type: String,
-      default: '购买数量'
+      default: DEFAULT_BUY_TEXT
     }
   },
 
@@ -64,7 +64,7 @@ export default {
       if (this.selectedSkuComb) {
         return this.selectedSkuComb.stock_num;
       }
-      return this.sku.stock_num;
+      return this.skuStockNum;
     },
     stepperLimit() {
       const quotaLimit = this.quota - this.quotaUsed;
diff --git a/packages/sku/constants.js b/packages/sku/constants.js
index 80b443ee6..b8e272b10 100644
--- a/packages/sku/constants.js
+++ b/packages/sku/constants.js
@@ -2,3 +2,17 @@ export const LIMIT_TYPE = {
   QUOTA_LIMIT: 0,
   STOCK_LIMIT: 1
 };
+
+export const DEFAULT_BUY_TEXT = '立即购买';
+
+export const DEFAULT_STEPPER_TITLE = '购买数量';
+
+export const DEFAULT_PLACEHOLDER_MAP = {
+  'id_no': '输入18位身份证号码',
+  text: '输入文本',
+  tel: '输入数字',
+  email: '输入邮箱',
+  date: '点击选择日期',
+  time: '点击选择时间',
+  textarea: '点击填写段落文本'
+};
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
index 115ee3323..e74736eeb 100644
--- a/packages/sku/containers/SkuContainer.vue
+++ b/packages/sku/containers/SkuContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <van-popup v-model="show" position="bottom" :lock-scroll="true">
+  <van-popup v-model="show" v-if="!isSkuEmpty" position="bottom" :lock-scroll="true">
     <div class="van-sku-container">
       <div class="van-sku-layout">
         <slot name="sku-header" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb">
@@ -42,7 +42,7 @@
               :selectedSkuComb="selectedSkuComb"
               :selectedNum="selectedNum"
               :stepperTitle="stepperTitle"
-              :sku="sku"
+              :skuStockNum="sku.stock_num"
               :quota="quota"
               :quotaUsed="quotaUsed"
               :hideStock="hideStock">
@@ -51,17 +51,18 @@
          <slot name="sku-messages">
             <van-sku-messages
               ref="skuMessages"
+              :messagePlaceholderMap="messagePlaceholderMap"
               :messages="sku.messages">
             </van-sku-messages>
           </slot>
-          <slot name="sku-actions" :skuEventBus="skuEventBus">
-            <van-sku-actions
-              :skuEventBus="skuEventBus"
-              :buyText="buyText"
-              :showAddCartBtn="showAddCartBtn">
-            </van-sku-actions>
-          </slot>
         </div>
+        <slot name="sku-actions" :skuEventBus="skuEventBus">
+          <van-sku-actions
+            :skuEventBus="skuEventBus"
+            :buyText="buyText"
+            :showAddCartBtn="showAddCartBtn">
+          </van-sku-actions>
+        </slot>
       </div>
     </div>
   </van-popup>
@@ -78,7 +79,7 @@ import SkuStepper from '../components/SkuStepper';
 import SkuMessages from '../components/SkuMessages';
 import SkuActions from '../components/SkuActions';
 import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
-import { LIMIT_TYPE } from '../constants';
+import { LIMIT_TYPE, DEFAULT_STEPPER_TITLE } from '../constants';
 
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
@@ -123,13 +124,19 @@ export default {
     buyText: String,
     stepperTitle: {
       type: String,
-      default: '购买数量'
+      default: DEFAULT_STEPPER_TITLE
     },
     bodyOffsetTop: {
       type: Number,
-      default: 150
+      default: 200
     },
     resetStepperOnHide: Boolean,
+    messagePlaceholderMap: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     value: Boolean
   },
 
@@ -169,7 +176,7 @@ export default {
   computed: {
     bodyStyle() {
       const windowHeight = window.innerHeight;
-      // header高度大概82px
+      // header高度82px, sku actions高度50px，如果改动了样式自己传下bodyOffsetTop调整下
       const maxHeight = windowHeight - this.bodyOffsetTop;
 
       return {
@@ -179,6 +186,13 @@ export default {
     isSkuCombSelected() {
       return isAllSelected(this.sku.tree, this.selectedSku);
     },
+    // sku数据不存在时不渲染模板
+    isSkuEmpty() {
+      for (var key in this.sku) {
+        if (Object.prototype.hasOwnProperty.call(this.sku, key)) return false;
+      }
+      return true;
+    },
     hasSku() {
       return !this.sku.none_sku;
     },
@@ -250,7 +264,7 @@ export default {
       if (this.isSkuCombSelected) {
         const error = this.validateSkuMessages();
         // sku留言没有错误则校验通过
-        return error ? error : '';
+        return error;
       } else {
         return '请选择完整的规格';
       }
diff --git a/test/unit/specs/sku.spec.js b/test/unit/specs/sku.spec.js
index 20cafa45f..3c2058373 100644
--- a/test/unit/specs/sku.spec.js
+++ b/test/unit/specs/sku.spec.js
@@ -2,9 +2,14 @@ import Sku from 'packages/sku';
 import { mount } from 'avoriaz';
 import { DOMChecker } from '../utils';
 import data from '../mock/sku';
+import repeat from 'lodash/repeat';
 
 const { skuHelper } = Sku;
 const goods = data.goods_info;
+const initialSku = {
+  s1: '30349',
+  s2: '1193'
+};
 goods.picture = goods.picture[0];
 
 describe('Sku', (done) => {
@@ -41,18 +46,29 @@ describe('Sku', (done) => {
     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');
+    // 测试sku图片
+    const firstSku = wrapper.find('.van-sku-row__item')[0];
+    firstSku.trigger('click');
     wrapper.vm.$nextTick(() => {
-      expect(closeCallback.calledOnce).to.be.true;
-      done();
+      DOMChecker(wrapper, {
+        src: {
+          '.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
+        }
+      });
+
+      // 关闭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) => {
+  it('should trigger an event or toast error when click buy and addCart', (done) => {
     wrapper = mount(Sku, {
       attachToDocument: true,
       propsData: {
@@ -98,7 +114,7 @@ describe('Sku', (done) => {
     });
   });
 
-  it('change step value', (done) =>{
+  it('should modify current num or toast error when change step value', (done) => {
     wrapper = mount(Sku, {
       attachToDocument: true,
       propsData: {
@@ -135,14 +151,15 @@ describe('Sku', (done) => {
     });
   });
 
-  it('test none sku', (done) => {
-    data.sku.none_sku = true; // eslint-disable-line
+  it('should not render sku group when none_sku is true', (done) => {
+    const newData = Object.assign({}, data);
+    newData.sku.none_sku = true; // eslint-disable-line
 
     wrapper = mount(Sku, {
       attachToDocument: true,
       propsData: {
         value: false,
-        sku: data.sku,
+        sku: newData.sku,
         goods: goods
       }
     });
@@ -153,4 +170,117 @@ describe('Sku', (done) => {
       done();
     });
   });
+
+  it('should toast error when sku messages fail to pass validation', (done) => {
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        initialSku,
+        value: true,
+        sku: data.sku,
+        goods: goods
+      }
+    });
+
+    const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
+    const skuMessages = wrapper.find('.van-sku-messages')[0];
+    const inputs = skuMessages.find('input');
+    const textarea = skuMessages.find('textarea')[0];
+    // 修改留言内容
+    inputs[0].element.value = 123;
+    // 测试身份证号
+    inputs[1].element.value = 234;
+    inputs[0].trigger('input');
+    inputs[1].trigger('input');
+
+    wrapper.vm.$nextTick(() => {
+      // 点击购买
+      buyBtn.trigger('click');
+
+      wrapper.vm.$nextTick(() => {
+        const toastText = document.querySelector('.van-toast__text');
+        expect(toastText.textContent).to.equal('请填写正确的身份证号码');
+
+        inputs[1].element.value = 330101198801012211;
+        // 测试textarea字数限制
+        textarea.element.value = repeat('*', 201);
+        inputs[1].trigger('input');
+        textarea.trigger('input');
+
+        wrapper.vm.$nextTick(() => {
+          buyBtn.trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(toastText.textContent).to.equal('留言4 写的太多了<br/>不要超过200字');
+
+            textarea.element.value = '';
+            // 测试数字留言
+            inputs[2].element.value = 'abc';
+            textarea.trigger('input');
+            inputs[2].trigger('input');
+
+            wrapper.vm.$nextTick(() => {
+              buyBtn.trigger('click');
+
+              wrapper.vm.$nextTick(() => {
+                expect(toastText.textContent).to.equal('请填写正确的数字格式留言');
+
+                inputs[2].element.value = 0;
+                inputs[3].element.value = 345;
+                inputs[2].trigger('input');
+                inputs[3].trigger('input');
+
+                wrapper.vm.$nextTick(() => {
+                  buyBtn.trigger('click');
+
+                  wrapper.vm.$nextTick(() => {
+                    expect(toastText.textContent).to.equal('请填写正确的邮箱');
+                    done();
+                  });
+                });
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+
+  it('should toast error when there is no stock', (done) => {
+    /* eslint-disable */
+    const newData = Object.assign({}, data);
+    newData.sku.stock_num = 0;
+    newData.sku.messages = [];
+    newData.sku.list.forEach((item) => {
+      item.stock_num = 0;
+    });
+    /* eslint-enable */
+
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        initialSku,
+        value: true,
+        sku: newData.sku,
+        goods: goods
+      }
+    });
+
+    const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
+
+    wrapper.vm.$nextTick(() => {
+      buyBtn.trigger('click');
+      wrapper.vm.$nextTick(() => {
+        const toastText = document.querySelector('.van-toast__text');
+        expect(toastText.textContent).to.equal('商品已经无法购买啦');
+
+        const plusBtn = wrapper.find('.van-stepper__plus')[0];
+        plusBtn.trigger('click');
+        wrapper.vm.$nextTick(() => {
+          expect(toastText.textContent).to.equal('库存不足');
+          done();
+        });
+      });
+    });
+  });
 });