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'); + }); });