From 40fd2efd5c9887aeecf0a47f714a6a617cb18c22 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 8 Sep 2017 21:42:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20sku=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples-docs/sku.md | 3 - docs/mock/sku.js | 34 +----- packages/sku/containers/SkuContainer.vue | 7 +- test/unit/mock/sku.js | 42 +------ test/unit/specs/sku.spec.js | 145 ++++++++++++++++++++--- 5 files changed, 139 insertions(+), 92 deletions(-) diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md index 86d9b05f7..4fc3ed4ff 100644 --- a/docs/examples-docs/sku.md +++ b/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 | 否 | diff --git a/docs/mock/sku.js b/docs/mock/sku.js index 2b20595ee..4214ca6a5 100644 --- a/docs/mock/sku.js +++ b/docs/mock/sku.js @@ -226,40 +226,10 @@ var _global = { "is_virtual": "0", "quota_used": 0, "goods_info": { - "title": "\u725b\u5976\u6d4b\u8bd5", - "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "title": "测试商品", + "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" } }; diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue index 0357b1b26..497eae950 100644 --- a/packages/sku/containers/SkuContainer.vue +++ b/packages/sku/containers/SkuContainer.vue @@ -13,7 +13,7 @@
-
+
@@ -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), diff --git a/test/unit/mock/sku.js b/test/unit/mock/sku.js index e43b438bb..fbb429598 100644 --- a/test/unit/mock/sku.js +++ b/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", - "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"], + "title": "测试商品", + "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": "" } diff --git a/test/unit/specs/sku.spec.js b/test/unit/specs/sku.spec.js index fdedd079e..20cafa45f 100644 --- a/test/unit/specs/sku.spec.js +++ b/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: { - '.van-order-goods-header a': '起码运动馆', - '.van-order-goods-price .van-cell__value span': '¥10.50', - '.van-card__title': item1.title, - '.van-card__num': 'x ' + item1.num, - '.van-card__price': '¥10.50' - }, - value: { - '.van-order-goods-message textarea': '留言留言' - }, - src: { - '.van-card__thumb img': item1.img_url + // 点击减号 + const minusBtn = wrapper.find('.van-stepper__minus')[0]; + minusBtn.trigger('click'); + wrapper.vm.$nextTick(() => { + const toastText = document.querySelector('.van-toast__text'); + expect(toastText.textContent).to.equal('至少选择一件'); + + // 手动修改购买数量 + const stepperInput = wrapper.find('.van-stepper__input')[0]; + stepperInput.element.value = 20; + stepperInput.trigger('input'); + wrapper.vm.$nextTick(() => { + 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(); + }); }); });