clear form.email if click send per link, tests if clicked

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

@@ -20,6 +20,11 @@ describe('GddSend', () => {
     },
   }
 
+  const SEND_TYPES = {
+    send: 'send',
+    link: 'link',
+  }
+
   const propsData = {
     balance: 0.0,
   }
@@ -34,7 +39,7 @@ describe('GddSend', () => {
     })
 
     it('renders the component', () => {
-      expect(wrapper.find('div.transaction-form').exists()).toBeTruthy()
+      expect(wrapper.find('div.transaction-form').exists()).toBe(true)
     })
 
     describe('transaction form disable because balance 0,0 GDD', () => {
@@ -51,7 +56,7 @@ describe('GddSend', () => {
         expect(wrapper.find('.text-danger').text()).toBe('form.no_gdd_available')
       })
       it('has no reset button and no submit button ', () => {
-        expect(wrapper.find('.test-buttons').exists()).toBeFalsy()
+        expect(wrapper.find('.test-buttons').exists()).toBe(false)
       })
     })
 
@@ -63,13 +68,17 @@ describe('GddSend', () => {
         await wrapper.findAll('input[type="radio"]').at(0).setChecked()
       })
 
+      it('has SEND_TYPES = send', () => {
+        expect(wrapper.vm.selected).toBe(SEND_TYPES.send)
+      })
+
       describe('transaction form', () => {
         beforeEach(() => {
           wrapper.setProps({ balance: 100.0 })
         })
         describe('transaction form show because balance 100,0 GDD', () => {
           it('has no warning message ', () => {
-            expect(wrapper.find('.errors').exists()).toBeFalsy()
+            expect(wrapper.find('.errors').exists()).toBe(false)
           })
           it('has a reset button', () => {
             expect(wrapper.find('.test-buttons').findAll('button').at(0).attributes('type')).toBe(
@@ -159,13 +168,13 @@ describe('GddSend', () => {
           it('flushes no errors when amount is valid', async () => {
             await wrapper.find('#input-group-2').find('input').setValue('87.34')
             await flushPromises()
-            expect(wrapper.find('span.errors').exists()).toBeFalsy()
+            expect(wrapper.find('span.errors').exists()).toBe(false)
           })
         })
 
         describe('message text box', () => {
           it('has an textarea field', () => {
-            expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy()
+            expect(wrapper.find('#input-group-3').find('textarea').exists()).toBe(true)
           })
 
           it('has an chat-right-text icon', () => {
@@ -187,13 +196,13 @@ describe('GddSend', () => {
           it('flushes no error message when memo is valid', async () => {
             await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
             await flushPromises()
-            expect(wrapper.find('span.errors').exists()).toBeFalsy()
+            expect(wrapper.find('span.errors').exists()).toBe(false)
           })
         })
 
         describe('cancel button', () => {
           it('has a cancel button', () => {
-            expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy()
+            expect(wrapper.find('button[type="reset"]').exists()).toBe(true)
           })
 
           it('has the text "form.cancel"', () => {
@@ -244,14 +253,22 @@ describe('GddSend', () => {
 
     describe('is selected: "link"', () => {
       beforeEach(async () => {
-        // await wrapper.setData({
-        //   selected: 'link',
-        // })
+        await wrapper.setData({
+          form: { email: 'bibi@bloxberg.de' },
+        })
         await wrapper.findAll('input[type="radio"]').at(1).setChecked()
       })
 
+      it('has SEND_TYPES = link', () => {
+        expect(wrapper.vm.selected).toBe(SEND_TYPES.link)
+      })
+
+      it('clear form.email to empty ', () => {
+        expect(wrapper.vm.form.email).toBe('')
+      })
+
       it('has no input field of id input-group-1', () => {
-        expect(wrapper.find('#input-group-1').isVisible()).toBeFalsy()
+        expect(wrapper.find('#input-group-1').isVisible()).toBe(false)
       })
     })
   })

frontend/src/components/GddSend/TransactionForm.vue

@@ -11,7 +11,13 @@
                 </b-form-radio>
               </b-col>
               <b-col>
-                <b-form-radio v-model="selected" name="radios" :value="sendTypes.link" size="lg">
+                <b-form-radio
+                  v-model="selected"
+                  name="radios"
+                  :value="sendTypes.link"
+                  size="lg"
+                  @change="form.email = ''"
+                >
                   {{ $t('send_per_link') }}
                 </b-form-radio>
               </b-col>
@@ -62,9 +68,7 @@
               </validation-provider>
             </div>
 
-            <br />
-
-            <div>
+            <div class="mt-4 mb-4">
               <validation-provider
                 :name="$t('form.amount')"
                 :rules="{
@@ -97,7 +101,7 @@
               </validation-provider>
             </div>
 
-            <div class="mt-4">
+            <div class="mb-4">
               <validation-provider
                 :rules="{
                   required: true,
@@ -125,7 +129,7 @@
                 </b-col>
               </validation-provider>
             </div>
-            <br />
+
             <div v-if="!!isBalanceDisabled" class="text-danger">
               {{ $t('form.no_gdd_available') }}
             </div>