coupon

Author: remul

src/components/CouponCode.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <input type="text" class="coupon-code" v-model="code" @input="validate">
+    <p v-text="feedback"></p>
+  </div>
+</template>
+
+<script>
+  export default {
+      data () {
+          return {
+              code: '',
+              coupons: [],
+              valid: false
+          }
+      },
+
+      computed: {
+          selectedCoupon() {
+            return this.coupons.find(coupon => coupon.code == this.code);
+          },
+
+          message() {
+              return this.selectedCoupon.message;
+          },
+
+          feedback () {
+              if (this.valid) {
+                  return `Coupon Redeemed: ${this.message}`;
+              }
+
+              return 'Invalid Coupon Code';
+          }
+      },
+
+      methods: {
+          validate () {
+              this.valid = !! this.selectedCoupon;
+
+              if (this.valid) {
+                  this.$emit('applied', this.selectedCoupon.discount);
+              }
+          }
+      }
+  }
+</script>

test/couponCode.spec.js

@@ -0,0 +1,52 @@
+import {mount} from "@vue/test-utils";
+import expect from 'expect';
+import CouponCode from "../src/components/CouponCode";
+
+describe('CouponCode', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(CouponCode);
+
+    wrapper.setData({
+      coupons: [
+        {
+          code: '50OFF',
+          message: '50% Off!',
+          discount: 50
+        }
+      ]
+    });
+  });
+
+  it('accepts the coupon code', () => {
+    expect(wrapper.contains('input.coupon-code')).toBe(true);
+  });
+
+  it('validates a real provided coupon code', () => {
+    enterCouponCode('50OFF');
+
+    expect(wrapper.html()).toContain('Coupon Redeemed: 50% Off!');
+  });
+
+  it('validates a fake provided coupon code', () => {
+    enterCouponCode('NOTREAL');
+
+    expect(wrapper.html()).toContain('Invalid Coupon Code');
+  });
+
+  it('broadcasts the percentage when a valid coupon code is applied', () => {
+    enterCouponCode('50OFF');
+
+    expect(wrapper.emitted().applied).toBeTruthy();
+    expect(wrapper.emitted().applied[0]).toEqual([50]);
+  });
+
+  function enterCouponCode(code) {
+    let couponCode = wrapper.find('input.coupon-code');
+
+    couponCode.element.value = code;
+    couponCode.trigger('input');
+  }
+
+});