[improvement] CouponCell: functional (#2759)

packages/coupon-cell/index.js

@@ -1,63 +1,63 @@
 import { use } from '../utils';
+import { inherit } from '../utils/functional';
 import Cell from '../cell';
 
 const [sfc, bem, t] = use('coupon-cell');
 
-export default sfc({
+function formatValue(props) {
-  model: {
+  const { coupons, chosenCoupon, currency } = props;
-    prop: 'chosenCoupon'
+  const coupon = coupons[chosenCoupon];
-  },
 
-  props: {
+  if (coupon) {
-    title: String,
+    const value = coupon.denominations || coupon.value;
-    coupons: Array,
+    return `-${currency}${(value / 100).toFixed(2)}`;
-    currency: {
-      type: String,
-      default: '¥'
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    chosenCoupon: {
-      type: Number,
-      default: -1
-    }
-  },
-
-  computed: {
-    value() {
-      const { coupons } = this;
-      const coupon = coupons[this.chosenCoupon];
-      if (coupon) {
-        const value = coupon.denominations || coupon.value;
-        return `-${this.currency}${(value / 100).toFixed(2)}`;
-      }
-      return coupons.length === 0 ? t('tips') : t('count', coupons.length);
-    },
-
-    valueClass() {
-      return this.coupons[this.chosenCoupon] ? 'van-coupon-cell--selected' : '';
-    }
-  },
-
-  render(h) {
-    return (
-      <Cell
-        class={bem()}
-        title={this.title || t('title')}
-        value={this.value}
-        border={this.border}
-        isLink={this.editable}
-        valueClass={this.valueClass}
-        onClick={() => {
-          this.$emit('click');
-        }}
-      />
-    );
   }
-});
+
+  return coupons.length === 0 ? t('tips') : t('count', coupons.length);
+}
+
+function CouponCell(h, props, slots, ctx) {
+  const valueClass = props[props.chosenCoupon]
+    ? 'van-coupon-cell--selected'
+    : '';
+  const value = formatValue(props);
+
+  return (
+    <Cell
+      class={bem()}
+      value={value}
+      title={props.title || t('title')}
+      border={props.border}
+      isLink={props.editable}
+      valueClass={valueClass}
+      {...inherit(ctx, true)}
+    />
+  );
+}
+
+CouponCell.model = {
+  prop: 'chosenCoupon'
+};
+
+CouponCell.props = {
+  title: String,
+  coupons: Array,
+  currency: {
+    type: String,
+    default: '¥'
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  editable: {
+    type: Boolean,
+    default: true
+  },
+  chosenCoupon: {
+    type: Number,
+    default: -1
+  }
+};
+
+export default sfc(CouponCell);

packages/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`coupon cell 1`] = `
+exports[`render coupon cell 1`] = `
 <div class="van-cell van-cell--clickable van-coupon-cell">
   <div class="van-cell__title"><span>优惠券</span></div>
   <div class="van-cell__value"><span>使用优惠</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
@@ -8,10 +8,10 @@ exports[`coupon cell 1`] = `
 </div>
 `;
 
-exports[`coupon cell 2`] = `
+exports[`render coupon cell with coupon 1`] = `
 <div class="van-cell van-cell--clickable van-coupon-cell">
   <div class="van-cell__title"><span>优惠券</span></div>
-  <div class="van-cell__value van-coupon-cell--selected"><span>-¥1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+  <div class="van-cell__value"><span>-¥1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
     <!----></i>
 </div>
 `;

packages/coupon-list/test/index.spec.js

@@ -109,21 +109,27 @@ test('exchange coupon', () => {
   expect(wrapper.emitted('input')[2][0]).toBe('2');
 });
 
-test('coupon cell', () => {
+test('render coupon cell', () => {
   const onClick = jest.fn();
   const wrapper = mount(CouponCell, {
-    listeners: {
+    context: {
-      click: onClick
+      on: {
+        click: onClick
+      }
     }
   });
-  expect(wrapper).toMatchSnapshot();
 
-  wrapper.setProps({
-    coupons: [{ value: 100 }],
-    chosenCoupon: 0
-  });
   expect(wrapper).toMatchSnapshot();
-
   wrapper.trigger('click');
   expect(onClick.mock.calls.length).toEqual(1);
 });
+
+test('render coupon cell with coupon', () => {
+  const wrapper = mount(CouponCell, {
+    propsData: {
+      coupons: [{ value: 100 }],
+      chosenCoupon: 0
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});