diff --git a/addon/components/input-credit-card-number.js b/addon/components/input-credit-card-number.js
index c7710cb..20234ee 100644
--- a/addon/components/input-credit-card-number.js
+++ b/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
diff --git a/tests/integration/components/input-credit-card-number-test.js b/tests/integration/components/input-credit-card-number-test.js
index 45720c0..ad55514 100644
--- a/tests/integration/components/input-credit-card-number-test.js
+++ b/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``
+ );
+ 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``
+ );
+ await typeIn('input', '1');
+ assert.equal(this.number, '4111111111111111');
+ });
});