Merge pull request #375 from qonto/em-input-id

Add named argument `@inputId` to allow setting the input id

Author: mrloop

addon/components/amount-input.hbs

@@ -5,7 +5,7 @@
 
   <input
     class="amount-input__value {{@inputClass}} {{if @disabled 'disabled'}}"
-    id='amount-input'
+    id={{this.inputId}}
     type='number'
     value={{@value}}
     step={{this.step}}

addon/components/amount-input.js

@@ -44,6 +44,15 @@ export default class AmountInput extends Component {
     @type String?
   */
 
+  /**
+    A custom id applied on the input
+    @argument inputId
+    @type String?
+  */
+  get inputId() {
+    return this.argOrDefault('inputId', 'amount-input')
+  }
+
   /**
     Defines the argument sent to toFixed()
     Can be n>=0

tests/integration/components/amount-input/component-test.js

@@ -20,6 +20,7 @@ module('Integration | Component | amount-input', function(hooks) {
 
     await render(hbs`
       <AmountInput
+        @inputId='abcd'
         @currency="USD"
         @numberOfDecimal={{0}}
         @placeholder="1.000.000"
@@ -30,6 +31,7 @@ module('Integration | Component | amount-input', function(hooks) {
 
     assert.dom('.amount-input__currency').hasText('USD')
     assert.dom('input').hasValue('1')
+    assert.dom('input').hasAttribute('id', 'abcd')
 
     await fillIn('input', '10.726')
     await blur('input')
@@ -46,11 +48,13 @@ module('Integration | Component | amount-input', function(hooks) {
         @numberOfDecimal={{this.isUndefined}}
         @placeholder={{this.isUndefined}}
         @step={{this.isUndefined}}
+        @inputId={{this.isUndefined}}
         @value={{this.value}}
         @update={{fn (mut this.value)}} />
     `)
     assert.dom('.amount-input__currency').hasText('')
     assert.dom('input').hasNoAttribute('placeholder')
+    assert.dom('input').hasNoAttribute('id')
 
     // test numberOfDecimal
     await fillIn('input', '10.726')
@@ -68,6 +72,7 @@ module('Integration | Component | amount-input', function(hooks) {
 
     assert.dom('.amount-input__currency').hasText('EUR')
     assert.dom('input').hasAttribute('placeholder', '0.00')
+    assert.dom('input').hasAttribute('id', 'amount-input')
 
     // test numberOfDecimal
     await fillIn('input', '10.726')