fix transaction form test

frontend/src/components/GddSend/TransactionForm.spec.js

@@ -71,9 +71,9 @@ describe('TransactionForm', () => {
     })
 
     describe('with balance <= 0.00 GDD the form is disabled', () => {
-      it('has a disabled input field of type email', () => {
+      it('has a disabled input field of type text', () => {
         expect(
-          wrapper.find('div[data-test="input-email"]').find('input').attributes('disabled'),
+          wrapper.find('div[data-test="input-identifier"]').find('input').attributes('disabled'),
         ).toBe('disabled')
       })
 
@@ -116,51 +116,54 @@ describe('TransactionForm', () => {
           expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
         })
 
-        describe('email field', () => {
-          it('has an input field of type email', () => {
+        describe('identifier field', () => {
+          it('has an input field of type text', () => {
             expect(
-              wrapper.find('div[data-test="input-email"]').find('input').attributes('type'),
-            ).toBe('email')
+              wrapper.find('div[data-test="input-identifier"]').find('input').attributes('type'),
+            ).toBe('text')
           })
 
           it('has a label form.receiver', () => {
-            expect(wrapper.find('div[data-test="input-email"]').find('label').text()).toBe(
+            expect(wrapper.find('div[data-test="input-identifier"]').find('label').text()).toBe(
               'form.recipient',
             )
           })
 
-          it('has a placeholder "E-Mail"', () => {
+          it('has a placeholder for identifier', () => {
             expect(
-              wrapper.find('div[data-test="input-email"]').find('input').attributes('placeholder'),
-            ).toBe('form.email')
+              wrapper
+                .find('div[data-test="input-identifier"]')
+                .find('input')
+                .attributes('placeholder'),
+            ).toBe('form.identifier')
           })
 
-          it('flushes an error message when no valid email is given', async () => {
-            await wrapper.find('div[data-test="input-email"]').find('input').setValue('a')
+          it('flushes an error message when no valid identifier is given', async () => {
+            await wrapper.find('div[data-test="input-identifier"]').find('input').setValue('a')
             await flushPromises()
             expect(
-              wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
-            ).toBe('validations.messages.email')
+              wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
+            ).toBe('form.validation.valid-identifier')
           })
 
           // TODO:SKIPPED there is no check that the email being sent to is the same as the user's email.
           it.skip('flushes an error message when email is the email of logged in user', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('user@example.org')
             await flushPromises()
             expect(
-              wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
+              wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
             ).toBe('form.validation.is-not')
           })
 
-          it('trims the email after blur', async () => {
+          it('trims the identifier after blur', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('  valid@email.com  ')
-            await wrapper.find('div[data-test="input-email"]').find('input').trigger('blur')
+            await wrapper.find('div[data-test="input-identifier"]').find('input').trigger('blur')
             await flushPromises()
             expect(wrapper.vm.form.identifier).toBe('valid@email.com')
           })
@@ -304,7 +307,7 @@ Die ganze Welt bezwingen.“`)
 
           it('clears all fields on click', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('someone@watches.tv')
             await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
@@ -327,7 +330,7 @@ Die ganze Welt bezwingen.“`)
         describe('submit', () => {
           beforeEach(async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('someone@watches.tv')
             await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
@@ -380,8 +383,8 @@ Die ganze Welt bezwingen.“`)
       })
 
       describe('query for username with success', () => {
-        it('has no email input field', () => {
-          expect(wrapper.find('div[data-test="input-email"]').exists()).toBe(false)
+        it('has no identifier input field', () => {
+          expect(wrapper.find('div[data-test="input-identifier"]').exists()).toBe(false)
         })
 
         it('queries the username', () => {

frontend/src/components/Inputs/InputAmount.vue

@@ -7,9 +7,8 @@
       :name="name"
       v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
     >
-      <b-form-group :label="label" :label-for="labelFor">
+      <b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
         <b-form-input
-          data-test="input-amount"
           v-model="currentValue"
           v-bind="ariaInput"
           :id="labelFor"

frontend/src/components/Inputs/InputIdentifier.vue

@@ -5,11 +5,10 @@
     :name="name"
     v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
   >
-    <b-form-group :label="label" :label-for="labelFor" data-test="input-email">
+    <b-form-group :label="label" :label-for="labelFor" data-test="input-identifier">
       <b-form-input
         v-model="currentValue"
         v-bind="ariaInput"
-        data-test="input-identifier"
         :id="labelFor"
         :name="name"
         :placeholder="placeholder"

frontend/src/pages/Send.spec.js

@@ -66,8 +66,11 @@ describe('Send', () => {
       beforeEach(async () => {
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(0).setChecked()
-        await transactionForm.find('[data-test="input-identifier"]').setValue('user@example.org')
-        await transactionForm.find('[data-test="input-amount"]').setValue('23.45')
+        await transactionForm
+          .find('[data-test="input-identifier"]')
+          .find('input')
+          .setValue('user@example.org')
+        await transactionForm.find('[data-test="input-amount"]').find('input').setValue('23.45')
         await transactionForm.find('textarea').setValue('Make the best of it!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()
@@ -91,10 +94,12 @@ describe('Send', () => {
           })
 
           it('restores the previous data in the formular', () => {
-            expect(wrapper.find('[data-test="input-identifier"]').vm.$el.value).toBe(
+            expect(wrapper.find('[data-test="input-identifier"]').find('input').vm.$el.value).toBe(
               'user@example.org',
             )
-            expect(wrapper.find('[data-test="input-amount"]').vm.$el.value).toBe('23.45')
+            expect(wrapper.find('[data-test="input-amount"]').find('input').vm.$el.value).toBe(
+              '23.45',
+            )
             expect(wrapper.find('textarea').vm.$el.value).toBe('Make the best of it!')
           })
         })
@@ -188,7 +193,7 @@ describe('Send', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
           const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
-          await transactionForm.find('[data-test="input-amount"]').setValue('34.56')
+          await transactionForm.find('[data-test="input-amount"]').find('input').setValue('34.56')
           await transactionForm.find('textarea').setValue('Make the best of it!')
           await transactionForm.find('form').trigger('submit')
           await flushPromises()
@@ -248,7 +253,7 @@ describe('Send', () => {
         })
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(1).setChecked()
-        await transactionForm.find('[data-test="input-amount"]').setValue('56.78')
+        await transactionForm.find('[data-test="input-amount"]').find('input').setValue('56.78')
         await transactionForm.find('textarea').setValue('Make the best of the link!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()