Merge pull request #40 from aboveproperty/fix-on-update

Hi @veelci, thanks for putting this together.  I will merge this into main and cut a [2.0.0-1 pre-release](#41) shortly.  I think given the new format of the onUpdate value this should be considered a breaking change.

addon/components/input-credit-card-number.js

@@ -7,8 +7,12 @@ import isDigitKeypress from 'ember-credit-cards/utils/is-digit-keypress';
 
 const cardFromNumber = cards.fromNumber;
 
+function stripSpaces(value) {
+  return (value + '').replace(/\D/g, '');
+}
+
 function inputValid(value) {
-  value = (value + '').replace(/\D/g, '');
+  value = stripSpaces(value);
 
   var card = cardFromNumber(value);
 
@@ -25,7 +29,9 @@ export default class InputCreditCardNumberComponent extends Component {
   }
 
   set number(value) {
-    this.args.onUpdate(value);
+    if (inputValid(value)) {
+      this.args.onUpdate(stripSpaces(value));
+    }
   }
 
   @action

tests/integration/components/input-credit-card-number-test.js

@@ -19,4 +19,28 @@ module('Integration | Component | input-credit-card-number', function (hooks) {
     await typeIn('input', '5');
     assert.equal(this.element.querySelector('input').value, '4242 45');
   });
+
+  test('it should return a value without spaces', async function (assert) {
+    this.set('number', '');
+    this.set('onUpdate', (value) => {
+      this.set('number', value);
+    });
+    await render(
+      hbs`<InputCreditCardNumber @number={{this.number}} @onUpdate={{this.onUpdate}} />`
+    );
+    await typeIn('input', '41111');
+    assert.equal(this.number, '41111');
+  });
+
+  test("it shouldn't call onUpdate with an invalid length", async function (assert) {
+    this.set('number', '4111111111111111');
+    this.set('onUpdate', (value) => {
+      this.set('number', value);
+    });
+    await render(
+      hbs`<InputCreditCardNumber @number={{this.number}} @onUpdate={{this.onUpdate}} />`
+    );
+    await typeIn('input', '1');
+    assert.equal(this.number, '4111111111111111');
+  });
 });