Merge branch 'master' into clean-up-registration-flow

frontend/src/components/GddSend/TransactionConfirmationLink.vue

@@ -33,9 +33,7 @@
       </b-row>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
-        <b-col class="text-right">
-          {{ $t('math.aprox') }} {{ (balance - amount - amount * 0.028) | GDD }}
-        </b-col>
+        <b-col class="text-right">{{ $t('math.aprox') }} {{ totalBalance | GDD }}</b-col>
       </b-row>
     </b-container>
 
@@ -44,7 +42,7 @@
         <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
       </b-col>
       <b-col class="text-right">
-        <b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
+        <b-button variant="success" :disabled="disabled" @click="$emit('send-transaction')">
           {{ $t('form.generate_now') }}
         </b-button>
       </b-col>
@@ -61,6 +59,17 @@ export default {
     memo: { type: String, required: true },
     loading: { type: Boolean, required: true },
   },
+  computed: {
+    totalBalance() {
+      return this.balance - this.amount * 1.028
+    },
+    disabled() {
+      if (this.TotalBalance < 0) {
+        return true
+      }
+      return this.loading
+    },
+  },
 }
 </script>
 <style>

frontend/src/pages/Send.spec.js

@@ -4,6 +4,7 @@ import { toastErrorSpy, toastSuccessSpy } from '@test/testSetup'
 import { TRANSACTION_STEPS } from '@/components/GddSend.vue'
 import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'
 import DashboardLayout from '@/layouts/DashboardLayout_gdd.vue'
+import flushPromises from 'flush-promises'
 
 const apolloMutationMock = jest.fn()
 apolloMutationMock.mockResolvedValue('success')
@@ -57,12 +58,13 @@ describe('Send', () => {
 
     describe('fill transaction form for send coins', () => {
       beforeEach(async () => {
-        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
-          email: 'user@example.org',
-          amount: 23.45,
-          memo: 'Make the best of it!',
-          selected: SEND_TYPES.send,
-        })
+        const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
+        await transactionForm.findAll('input[type="radio"]').at(0).setChecked()
+        await transactionForm.find('input[type="email"]').setValue('user@example.org')
+        await transactionForm.find('input[type="text"]').setValue('23.45')
+        await transactionForm.find('textarea').setValue('Make the best of it!')
+        await transactionForm.find('form').trigger('submit')
+        await flushPromises()
       })
 
       it('steps forward in the dialog', () => {
@@ -74,7 +76,8 @@ describe('Send', () => {
           beforeEach(async () => {
             await wrapper
               .findComponent({ name: 'TransactionConfirmationSend' })
-              .vm.$emit('on-reset')
+              .find('button.btn-secondary')
+              .trigger('click')
           })
 
           it('shows the transaction formular again', () => {
@@ -98,7 +101,8 @@ describe('Send', () => {
             jest.clearAllMocks()
             await wrapper
               .findComponent({ name: 'TransactionConfirmationSend' })
-              .vm.$emit('send-transaction')
+              .find('button.btn-success')
+              .trigger('click')
           })
 
           it('calls the API when send-transaction is emitted', async () => {
@@ -131,7 +135,8 @@ describe('Send', () => {
             apolloMutationMock.mockRejectedValue({ message: 'recipient not known' })
             await wrapper
               .findComponent({ name: 'TransactionConfirmationSend' })
-              .vm.$emit('send-transaction')
+              .find('button.btn-success')
+              .trigger('click')
           })
 
           it('has a component TransactionResultSendError', () => {
@@ -160,11 +165,12 @@ describe('Send', () => {
         apolloMutationMock.mockResolvedValue({
           data: { createTransactionLink: { code: '0123456789' } },
         })
-        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
-          amount: 56.78,
-          memo: 'Make the best of the link!',
-          selected: SEND_TYPES.link,
-        })
+        const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
+        await transactionForm.findAll('input[type="radio"]').at(1).setChecked()
+        await transactionForm.find('input[type="text"]').setValue('56.78')
+        await transactionForm.find('textarea').setValue('Make the best of the link!')
+        await transactionForm.find('form').trigger('submit')
+        await flushPromises()
       })
 
       it('steps forward in the dialog', () => {
@@ -176,7 +182,8 @@ describe('Send', () => {
           jest.clearAllMocks()
           await wrapper
             .findComponent({ name: 'TransactionConfirmationLink' })
-            .vm.$emit('send-transaction')
+            .find('button.btn-success')
+            .trigger('click')
         })
 
         it('calls the API when send-transaction is emitted', async () => {
@@ -252,10 +259,13 @@ describe('Send', () => {
         })
       })
 
-      describe('send apollo if transaction link with error', () => {
-        beforeEach(() => {
+      describe('apollo call returns error', () => {
+        beforeEach(async () => {
           apolloMutationMock.mockRejectedValue({ message: 'OUCH!' })
-          wrapper.find('button.btn-success').trigger('click')
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmationLink' })
+            .find('button.btn-success')
+            .trigger('click')
         })
 
         it('toasts an error message', () => {