add OrderCoupon component

test/unit/specs/order-coupon.spec.js

@@ -0,0 +1,321 @@
+import OrderCoupon from 'packages/order-coupon';
+import OrderCouponList from 'packages/order-coupon-list';
+import { mount } from 'avoriaz';
+import { DOMChecker } from '../utils';
+
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+const discountCoupon = {
+  ...coupon,
+  discount: 88,
+  denominations: 0,
+  origin_condition: 50,
+  value: 12,
+  condition: '下单即享 8.8 折'
+};
+
+const emptyCoupon = {
+  denominations: 0,
+  discount: 0
+};
+
+const disabledCoupon = {
+  ...coupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+describe('OrderCoupon', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('no coupon', () => {
+    wrapper = mount(OrderCoupon, {});
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link': '使用优惠'
+      }
+    });
+  });
+
+  it('has two coupon', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        coupons: [coupon, discountCoupon]
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link': '您有 2 个可用优惠'
+      }
+    });
+  });
+
+  it('select first coupon', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon]
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link h2': '新手专用优惠券 省￥1.50',
+        '.van-cell__value--link span': '下单立减 1.50 元'
+      },
+      count: {
+        '.van-cell__right-icon': 1
+      }
+    });
+  });
+
+  it('not editable', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon],
+        editable: false
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value h2': '新手专用优惠券 省￥1.50',
+        '.van-cell__value span': '下单立减 1.50 元'
+      },
+      count: {
+        '.van-cell__right-icon': 0
+      }
+    });
+  });
+});
+
+describe('OrderCouponList', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('no coupon', () => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        chosenCoupon: -1
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-order-coupon-coupon': 0,
+        '.van-order-coupon-coupon--disabled': 0,
+        '.van-order-coupon-list__list h3': 0
+      }
+    });
+  });
+
+  it('has two coupon', () => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        chosenCoupon: -1,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+    DOMChecker(wrapper, {
+      count: {
+        '.van-order-coupon-coupon': 4,
+        '.van-order-coupon-coupon--disabled': 2,
+        '.van-order-coupon-list__list h3': 1
+      }
+    });
+  });
+
+  it('switch to first coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: true,
+        chosenCoupon: -1,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    wrapper.vm.$on('change', (index) => {
+      wrapper.vm.chosenCoupon = index;
+    });
+
+    // 弹出 popup
+    setTimeout(() => {
+      expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
+      wrapper.find('.van-order-coupon-coupon')[0].trigger('click');
+
+      setTimeout(() => {
+        expect(wrapper.vm.chosenCoupon).to.equal(0);
+        done();
+      }, 300);
+    }, 300);
+  });
+
+  it('cancel select coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: false,
+        chosenCoupon: 0,
+        displayedCouponIndex: 0,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    wrapper.vm.show = true;
+
+    wrapper.vm.$on('change', (index) => {
+      wrapper.vm.chosenCoupon = index;
+      wrapper.vm.displayedCouponIndex = index;
+    });
+
+    setTimeout(() => {
+      wrapper.find('.van-order-coupon-list__close')[0].trigger('click');
+      setTimeout(() => {
+        expect(wrapper.vm.chosenCoupon).to.equal(-1);
+        expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(true);
+        done();
+      }, 500);
+    }, 500);
+  });
+
+  it('denominations format', () => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        coupons: [coupon, {
+          ...coupon,
+          denominations: 10
+        }, {
+          ...coupon,
+          denominations: 100
+        }, {
+          ...coupon,
+          denominations: 135
+        }, {
+          ...coupon,
+          denominations: 0
+        }]
+      }
+    });
+
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('¥ 1.5');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('¥ 0.1');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal('¥ 1');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[3].text()).to.equal('¥ 1.35');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[4].text()).to.equal('');
+  });
+
+  it('discount format', () => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        coupons: [discountCoupon, {
+          ...discountCoupon,
+          discount: 10
+        }, {
+          ...discountCoupon,
+          discount: 0
+        }]
+      }
+    });
+
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('8.8折');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('1折');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal('');
+  });
+
+  it('add coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: true,
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon, emptyCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    const code = '123123';
+
+    wrapper.vm.$on('exchange', (code) => {
+      expect(code).to.equal(code);
+      wrapper.vm.coupons.push(coupon);
+    });
+
+    setTimeout(() => {
+      DOMChecker(wrapper, {
+        count: {
+          '.van-button--disabled': 1
+        }
+      });
+
+      wrapper.find('.van-field__control')[0].element.value = code;
+      wrapper.find('.van-field__control')[0].trigger('input');
+
+      setTimeout(() => {
+        wrapper.find('.van-order-coupon-list__exchange')[0].trigger('click');
+        DOMChecker(wrapper, {
+          count: {
+            '.van-button--disabled': 0
+          }
+        });
+
+        setTimeout(() => {
+          expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
+          DOMChecker(wrapper, {
+            count: {
+              '.van-button--disabled': 1,
+              '.van-order-coupon-coupon': 6,
+              '.van-order-coupon-coupon--disabled': 2
+            }
+          });
+          done();
+        }, 300);
+      }, 300);
+    }, 300);
+  });
+
+  it('displayedCouponIndex out of range', (done) => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        show: true,
+        displayedCouponIndex: -100,
+        coupons: [coupon, discountCoupon, emptyCoupon]
+      }
+    });
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.chosenCoupon).to.equal(-1);
+      done();
+    });
+  });
+});