Vue3

src/components/ContentModal.vue

@@ -88,6 +88,7 @@ export default {
   beforeUnmount() {
     this.contentObserver.disconnect();
   },
+  emits: ['close'],
   methods: {
     handleClose() {
       this.$emit('close');

src/components/ContinueBar.vue

@@ -46,6 +46,7 @@ export default {
       default: true,
     },
   },
+  emits: ['continue', 'secondary'],
   methods: {
     onContinue() {
       this.$emit('continue');

src/components/CurrencyInput.vue

@@ -54,7 +54,7 @@ export default {
     cypressMixin,
   ],
   props: {
-    value: {
+    modelValue: {
       type: String,
       validator: (value) => {
         return isValidInput(value);
@@ -111,7 +111,7 @@ export default {
     }
   },
   created() {
-    this.formattedValue = convertNumberToFormattedString(this.value);
+    this.formattedValue = convertNumberToFormattedString(this.modelValue);
     this.inputValue = this.formattedValue;
   },
   mounted() {
@@ -121,7 +121,7 @@ export default {
     this.$refs.input.removeEventListener('paste', this.handlePaste);
   },
   watch: {
-    value(newValue) {
+    modelValue(newValue) {
       if (this.isEditing) {
         this.inputValue = newValue || null;
       } else {
@@ -130,13 +130,14 @@ export default {
       }
     }
   },
+  emits: ['update:modelValue', 'input', 'blur'],
   methods: {
     handleFocus() {
       this.isEditing = true;
-      this.inputValue = this.value;
+      this.inputValue = this.modelValue;
     },
     handleBlur(event) {
-      let value = this.value;
+      let value = this.modelValue;
 
       this.isEditing = false;
       value = this.removeLeadingZeros(value);
@@ -153,15 +154,15 @@ export default {
     },
     handleInput(event) {
       const value = event.target.value;
-
       if (isValidInput(value)) {
         this.inputValue = value;
         this.formattedValue = convertNumberToFormattedString(value);
         this.$emit('input', value);
+        this.$emit('update:modelValue', value);
       } else {
         // Reset input value to previous value.
-        this.inputValue = this.value;
-        this.formattedValue = convertNumberToFormattedString(this.value);
+        this.inputValue = this.modelValue;
+        this.formattedValue = convertNumberToFormattedString(this.modelValue);
       }
 
       // Prevent input focus loss during rerender.
@@ -173,7 +174,7 @@ export default {
       const keyCode = event.which ? event.which : event.keyCode;
 
       if ((keyCode >= 48 && keyCode <= 57) // Number key.
-        || (keyCode === 46 && this.isCentsEnabled && !this.containsDecimal(this.value)) // Decimal key.
+        || (keyCode === 46 && this.isCentsEnabled && !this.containsDecimal(this.modelValue)) // Decimal key.
         || keyCode === 45) // Minus key
       {
         return true;

stories/components/ContentModal.stories.js

@@ -7,8 +7,7 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template = (args) => ({
   components: {
     ContentModal,
     Button,
@@ -18,6 +17,7 @@ const Template = (args, { argTypes }) => ({
     count: 0,
     isCountRendered: true,
   }),
+  setup() { return { args }; },
   created() {
     setInterval(() => {
       // Used to trigger a DOM change manually.
@@ -40,7 +40,7 @@ const Template = (args, { argTypes }) => ({
     <div>
       <Button label="Open Modal" @click="handleClickOpenModal()" />
       <ContentModal v-if="isModalShown"
-        v-bind="$props"
+        v-bind="args"
         @close="handleClose()">
         <p>Hello World!</p>
         <p>This is a link to Google: <a href="https://google.ca" target="_blank">click here</a></p>

stories/components/ContinueBar.stories.js

@@ -6,10 +6,10 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template = (args) => ({
+  setup() { return { args }; },
   components: { ContinueBar },
-  template: '<ContinueBar v-bind="$props" />',
+  template: '<ContinueBar v-bind="args" />',
 });
 
 export const Example = Template.bind({});

stories/components/CurrencyInput.stories.js

@@ -7,12 +7,12 @@ export default {
 };
 
 const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes).filter((x) => x !== 'value'),
+  setup() { return { args }; },
   components: { CurrencyInput },
   data: () => ({
     value: null,
   }),
-  template: '<CurrencyInput v-bind="$props" v-model="value" />',
+  template: '<CurrencyInput v-bind="args" v-model="value" />',
 });
 
 export const Example = Template.bind({});

tests/unit/components/CurrencyInput.spec.js

@@ -1,14 +1,14 @@
 import { mount } from '@vue/test-utils';
-import Component from '../../../src/components/CurrencyInput.vue';
+import CurrencyInput from '../../../src/components/CurrencyInput.vue';
 
 describe('CurrencyInput.vue', () => {
   it('renders', () => {
-    const wrapper = mount(Component);
+    const wrapper = mount(CurrencyInput);
     expect(wrapper.element).toBeDefined();
   });
 
   it('removeLeadingZeros() removes leading zeros', () => {
-    const wrapper = mount(Component);
+    const wrapper = mount(CurrencyInput);
     expect(wrapper.vm.removeLeadingZeros('0')).toBe('0');
     expect(wrapper.vm.removeLeadingZeros('00')).toBe('0');
     expect(wrapper.vm.removeLeadingZeros('000')).toBe('0');
@@ -37,11 +37,33 @@ describe('CurrencyInput.vue', () => {
 
 describe('NumberInput getCypressValue()', () => {
   it('contains cypress Value', () => {
-    const wrapper = mount(Component, {
+    const wrapper = mount(CurrencyInput, {
       props: {
         cypressId: 'potato'
       }
     });
     expect(wrapper.find("[data-cy=potato]").exists()).toBe(true)
   });
 });
+
+describe("CurrencyInput event handling", () => {
+  it("works correctly with v-model", async () => {
+    const wrapper = mount({
+      data() {
+        return { currency: "11" };
+      },
+      template: '<div><CurrencyInput v-model="currency" /></div>',
+      components: { CurrencyInput },
+    });
+
+    expect(wrapper.vm.currency).toBe("11");
+    const baseInput = wrapper.find("input");
+    await baseInput.setValue("1111");
+
+    // Model value is unformatted
+    expect(wrapper.vm.currency).toBe("1111");
+
+    // Displayed value is formatted
+    expect(baseInput.element.value).toBe("1,111")
+  });
+});