diff --git a/src/coupon-cell/test/__snapshots__/index.spec.ts.snap b/src/coupon-cell/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..4931c7470 --- /dev/null +++ b/src/coupon-cell/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render CouponCell correctly 1`] = ` +
+
+ + Coupon + +
+
+ + No coupons + +
+ + +
+`; + +exports[`should render CouponCell correctly with zero discount 1`] = ` +
+
+ + Coupon + +
+
+ + -¥ 0.00 + +
+ + +
+`; + +exports[`should render CouponCell with chosenCoupon correctly 1`] = ` +
+
+ + Coupon + +
+
+ + -¥ 1.50 + +
+ + +
+`; diff --git a/src/coupon-cell/test/index.spec.ts b/src/coupon-cell/test/index.spec.ts new file mode 100644 index 000000000..7a8ae36da --- /dev/null +++ b/src/coupon-cell/test/index.spec.ts @@ -0,0 +1,53 @@ +import { mount } from '../../../test'; +import CouponCell from '../index'; + +const coupon = { + id: 1, + discount: 0, + denominations: 150, + originCondition: 0, + reason: '', + value: 150, + name: 'name', + description: 'description', + startAt: 1489104000, + endAt: 1514592000, +}; + +test('should render CouponCell correctly', () => { + const wrapper = mount(CouponCell); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render CouponCell with chosenCoupon correctly', () => { + const wrapper = mount(CouponCell, { + props: { + coupons: [coupon], + chosenCoupon: 0, + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render CouponCell correctly with zero discount', () => { + const wrapper = mount(CouponCell, { + props: { + coupons: [{ ...coupon, value: 0, denominations: 150 }], + chosenCoupon: 0, + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should click one time when coupon cell is clicked', () => { + const onClick = jest.fn(); + const wrapper = mount(CouponCell, { + props: { + onClick, + }, + }); + + wrapper.trigger('click'); + expect(onClick).toHaveBeenCalledTimes(1); +}); diff --git a/src/coupon-list/test/__snapshots__/index.legacy.js.snap b/src/coupon-list/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 499bae3d7..000000000 --- a/src/coupon-list/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,256 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`empty-image prop 1`] = ` -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-

暂无优惠券

-
-
-
- -
-
-
-
-`; - -exports[`render coupon cell 1`] = ` -
-
优惠券
-
暂无可用
- -
-`; - -exports[`render coupon cell with coupon 1`] = ` -
-
优惠券
-
-¥ 1.00
- -
-`; - - -exports[`render coupon cell with zero discount 1`] = ` -
-
优惠券
-
-¥ 0.00
- -
-`; - -exports[`render coupon list 1`] = ` -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-

-

无使用门槛

-
-
-

-

2017.03.10 - 2017.12.30

- -
-
-
-
-
-
-

¥ 1.5

-

无使用门槛

-
-
-

name

-

2017.03.10 - 2017.12.30

- -
-
-

description

-
-
-
-
-

¥ 1

-

无使用门槛

-
-
-

name

-

2017.03.10 - 2017.12.30

- -
-
-

description

-
-
-
-
-

¥ 1.23

-

无使用门槛

-
-
-

name

-

2017.03.10 - 2017.12.30

- -
-
-

description

-
-
-
-
-

8.8折

-

满0.5元可用

-
-
-

name

-

2017.03.10 - 2017.12.30

- -
-
-
-
-
-
-

9折

-

满0.5元可用

-
-
-

name

-

2017.03.10 - 2017.12.30

- -
-
-
-
-
- -
-
-
-
-`; - -exports[`render disabled coupon 1`] = ` -
-
-
-

¥ 1.5

-

无使用门槛

-
-
-

name

-

2017.03.10 - 2017.12.30

-
-
-

reason

-
-`; - -exports[`render empty coupon list 1`] = ` -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
-
-

暂无优惠券

-
-
-
-
-
-
-
-`; diff --git a/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/src/coupon-list/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..ab05aa8eb --- /dev/null +++ b/src/coupon-list/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,473 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should be the sames as the last snapshot when render coupon list 1`] = ` +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+

+

+

+ Unlimited +

+
+
+

+

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+
+
+
+
+

+ + ¥ + + 1.5 +

+

+ Unlimited +

+
+
+

+ name +

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+

+ description +

+
+
+
+
+

+ + ¥ + + 1 +

+

+ Unlimited +

+
+
+

+ name +

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+

+ description +

+
+
+
+
+

+ + ¥ + + 1.23 +

+

+ Unlimited +

+
+
+

+ name +

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+

+ description +

+
+
+
+
+

+ 88% off +

+

+ At least 0.5 +

+
+
+

+ name +

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+
+
+
+
+

+ 90% off +

+

+ At least 0.5 +

+
+
+

+ name +

+

+ 2017.03.10 - 2017.12.30 +

+ +
+
+
+
+
+ +
+
+
+ +
+
+`; + +exports[`should have two "van-coupon-list__empty" classes when render coupon list is empty 1`] = ` +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ +

+ No coupons +

+
+
+
+
+
+
+ +
+
+`; + +exports[`should use custom src when using empty-image prop 1`] = ` +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+
+ +

+ No coupons +

+
+
+
+ +
+
+
+ +
+
+`; diff --git a/src/coupon-list/test/index.legacy.js b/src/coupon-list/test/index.spec.ts similarity index 50% rename from src/coupon-list/test/index.legacy.js rename to src/coupon-list/test/index.spec.ts index 1fce4b9ba..ec8528197 100644 --- a/src/coupon-list/test/index.legacy.js +++ b/src/coupon-list/test/index.spec.ts @@ -1,16 +1,14 @@ -import Coupon from '../../coupon'; -import CouponList from '..'; -import CouponCell from '../../coupon-cell'; import { later, mount } from '../../../test'; +import CouponList from '..'; const coupon = { id: 1, + name: 'name', discount: 0, denominations: 150, originCondition: 0, reason: '', value: 150, - name: 'name', description: 'description', startAt: 1489104000, endAt: 1514592000, @@ -26,19 +24,10 @@ const coupon3 = { denominations: 123, }; -const coupon4 = { +const disabledCoupon = { ...coupon, - startAt: 1600327871, - endAt: 1700327871, -}; - -const emptyCoupon = { - id: 0, - discount: 0, - denominations: 0, - originCondition: 0, - startAt: 1489104000, - endAt: 1514592000, + id: 3, + reason: 'reason', }; const discountCoupon = { @@ -61,31 +50,26 @@ const discountCoupon2 = { description: '', }; -const disabledCoupon = { - ...coupon, - id: 3, - reason: 'reason', -}; - const disabledDiscountCoupon = { ...discountCoupon, - discount: 10, id: 4, + discount: 10, reason: '', }; -test('render disabled coupon', () => { - const wrapper = mount(Coupon, { - props: { - coupon: disabledCoupon, - disabled: true, - }, - }); +const emptyCoupon = { + id: 0, + name: '', + discount: 0, + value: 0, + description: '', + denominations: 0, + originCondition: 0, + startAt: 1489104000, + endAt: 1514592000, +}; - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('render coupon list', async () => { +test('should be the sames as the last snapshot when render coupon list', async () => { const wrapper = mount(CouponList, { props: { chosenCoupon: 1, @@ -100,81 +84,63 @@ test('render coupon list', async () => { disabledCoupons: [disabledCoupon, disabledDiscountCoupon], }, }); + await later(); expect(wrapper.html()).toMatchSnapshot(); }); -test('render empty coupon list', () => { +test('should have two "van-coupon-list__empty" classes when render coupon list is empty', async () => { const wrapper = mount(CouponList, { props: { coupons: [], disabledCoupons: [], }, }); - wrapper.findAll('.van-tab')[1].trigger('click'); + + await later(); + const tabs = wrapper.findAll('.van-tab'); + await tabs.forEach((tab) => tab.trigger('click')); expect(wrapper.html()).toMatchSnapshot(); }); -test('empty-image prop', () => { +test('should use custom src when using empty-image prop', async () => { const wrapper = mount(CouponList, { props: { emptyImage: 'https://img.yzcdn.com/xxx.png', }, }); + await later(); expect(wrapper.html()).toMatchSnapshot(); }); -test('exchange coupon', () => { +test('should emit "exchange" event when exchange button is clicked', async () => { + const wrapper = mount(CouponList); + const exchange = wrapper.find('.van-coupon-list__exchange'); + const field = wrapper.find('.van-field__control'); + + await exchange.trigger('click'); + expect(wrapper.emitted('exchange')).toBeFalsy(); + + await field.setValue('1'); + await exchange.trigger('click'); + expect(wrapper.emitted('exchange')![0]).toEqual(['1']); + + await wrapper.setProps({ code: '2' }); + await exchange.trigger('click'); + expect(wrapper.emitted('exchange')![1]).toEqual(['2']); +}); + +test('should emit "update:code" event when input a code', async () => { const wrapper = mount(CouponList); const exchange = wrapper.find('.van-coupon-list__exchange'); - wrapper.setData({ - currentCode: '1', - displayedCouponIndex: 1, - }); - exchange.trigger('click'); - wrapper.setProps({ code: '2' }); - exchange.trigger('click'); + const field = wrapper.find('.van-field__control'); + await field.setValue('1'); + await exchange.trigger('click'); + expect(wrapper.emitted('update:code')![0]).toEqual(['1']); + expect(wrapper.emitted('update:code')![1]).toEqual(['']); - expect(wrapper.emitted('exchange')[0][0]).toBe('1'); - expect(wrapper.emitted('exchange')[1][0]).toBe('2'); - expect(wrapper.emitted('input')[0][0]).toBe('1'); - expect(wrapper.emitted('input')[1][0]).toBe(''); - expect(wrapper.emitted('input')[2][0]).toBe('2'); -}); - -test('render coupon cell', () => { - const onClick = jest.fn(); - const wrapper = mount(CouponCell, { - context: { - on: { - click: onClick, - }, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); - wrapper.trigger('click'); - expect(onClick).toHaveBeenCalledTimes(1); -}); - -test('render coupon cell with coupon', () => { - const wrapper = mount(CouponCell, { - props: { - coupons: [{ value: 100 }], - chosenCoupon: 0, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('render coupon cell with zero discount', () => { - const wrapper = mount(CouponCell, { - props: { - coupons: [{ ...coupon4, value: 0, denominations: 150 }], - chosenCoupon: 0, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); + await wrapper.setProps({ code: '2' }); + expect(wrapper.emitted('update:code')![2]).toEqual(['2']); }); diff --git a/src/coupon/index.tsx b/src/coupon/index.tsx index e69a50bb5..99a41c96b 100644 --- a/src/coupon/index.tsx +++ b/src/coupon/index.tsx @@ -4,7 +4,7 @@ import { RED } from '../utils/constant'; import Checkbox from '../checkbox'; export type CouponInfo = { - id: string; + id: string | number; name: string; endAt: number; value: number; diff --git a/src/coupon/test/index.spec.ts b/src/coupon/test/index.spec.ts new file mode 100644 index 000000000..aa47b22d0 --- /dev/null +++ b/src/coupon/test/index.spec.ts @@ -0,0 +1,27 @@ +import { mount } from '../../../test'; +import Coupon from '..'; + +const coupon = { + id: 1, + name: 'name', + discount: 0, + denominations: 150, + originCondition: 0, + reason: '', + value: 150, + valueDesc: '1.5', + description: 'description', + startAt: 1489104000, + endAt: 1514592000, +}; + +test('should render "van-coupon--disabled" class when using disabled prop', () => { + const wrapper = mount(Coupon, { + props: { + coupon, + disabled: true, + }, + }); + + expect(wrapper.classes()).toContain('van-coupon--disabled'); +});