Fix options clobbering (datafruits#59)

If you passed in `options` hash to a one-way-mask component it would
clobber all defaults instead of only overridding the ones specified.

Made an internal `_options` argument to differentiate between the
external one.

addon/components/one-way-credit-card-mask.js

@@ -7,9 +7,11 @@ export default OneWayInputMask.extend({
   NON_ATTRIBUTE_BOUND_PROPS: DEFAULT_NON_BOUND_PROPS.concat('separator'),
 
   init() {
-    let options = get(this, 'options');
+    this._super(...arguments);
+
+    let options = get(this, '_options');
 
-    set(this, 'options', Object.assign({}, {
+    set(this, '_options', Object.assign({}, {
       // We need to make sure we catch paste events so that we change the mask before the text
       // hits the input. This is a callback provided by Inputmask.js
       onBeforePaste: value => {
@@ -25,8 +27,6 @@ export default OneWayInputMask.extend({
         });
       },
     }, options));
-
-    this._super(...arguments);
   },
 
   /**

addon/components/one-way-input-mask.js

@@ -52,6 +52,7 @@ export default OneWayInput.extend({
    * options - Options accepted by the Inputmask library
    */
   options: null,
+  _options: null, // Internal options so external attribute doesnt clobber it
   _oldOptions: null,
 
   /**
@@ -75,7 +76,7 @@ export default OneWayInput.extend({
 
     // Give the mask some default options that can be overridden
     let options = get(this, 'options');
-    set(this, 'options', Object.assign({}, DEFAULT_OPTIONS, options));
+    set(this, '_options', Object.assign({}, DEFAULT_OPTIONS, options));
   },
 
   didInsertElement() {
@@ -90,7 +91,12 @@ export default OneWayInput.extend({
     let oldOptions = get(this, '_oldOptions');
     let didOptionsChange = areDifferent(options, oldOptions);
 
-    // We want to repply the mask if it has changed
+    if (didOptionsChange) {
+      // Override external options on top of internal options
+      set(this, '_options', Object.assign({}, get(this, '_options'), options));
+    }
+
+    // We want to reapply the mask if it has changed
     if (didMaskChange || didOptionsChange) {
       set(this, '_oldMask', mask);
       set(this, '_oldOptions', options);
@@ -153,7 +159,7 @@ export default OneWayInput.extend({
     let cursorEnd = this.element.selectionEnd;
     let unmaskedValue = this._getUnmaskedValue();
     let oldUnmaskedValue = get(this, '_value');
-    let options = get(this, 'options');
+    let options = get(this, '_options');
 
     // We only want to make changes if something is different so we don't cause infinite loops or
     // double renders.
@@ -178,7 +184,7 @@ export default OneWayInput.extend({
    * @private
    */
   _setupMask() {
-    let mask = get(this, 'mask'), options = get(this, 'options');
+    let mask = get(this, 'mask'), options = get(this, '_options');
     let inputmask = new Inputmask(mask, options);
     inputmask.mask(this.element);
 

addon/components/one-way-number-mask.js

@@ -11,7 +11,7 @@ const DEFAULT_OPTIONS = {
 
 export default OneWayInputMask.extend({
   NON_ATTRIBUTE_BOUND_PROPS: DEFAULT_NON_BOUND_PROPS.concat('decimal'),
-  
+
   /**
    * @override
    */
@@ -25,14 +25,14 @@ export default OneWayInputMask.extend({
   init() {
     this._super(...arguments);
 
-    set(this, 'options', Object.assign({}, get(this, 'options'), DEFAULT_OPTIONS));
+    set(this, '_options', Object.assign({}, get(this, '_options'), DEFAULT_OPTIONS));
 
     if (get(this, 'decimal')) {
       set(this, 'mask', 'decimal');
 
       // Give default digits if we don't have them aleady
       if (isBlank(get(this, 'options.digits'))) {
-        set(this, 'options.digits', 2);
+        set(this, '_options.digits', 2);
       }
     }
   },

tests/integration/components/one-way-number-mask-test.js

@@ -41,3 +41,14 @@ test('The parent can receive the updated value via the `update` action', async f
   await fillIn('input', 456);
   assert.equal(this.get('value'), '456');
 });
+
+test('Internal options are not clobbered by external ones', async function(assert) {
+  this.set('value', 123)
+  this.render(hbs`{{one-way-number-mask value
+    update=(action (mut value))
+    options=(hash prefix="$")
+    decimal=true}}`);
+  await fillIn('input', 1);
+  await fillIn('input', 456.78901);
+  assert.equal(find('input').value, '$456.79');
+});