test setChecked in TransactionForm, test for TransactionConfirmation

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

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import TransactionConfirmation from './TransactionConfirmation'
+
+const localVue = global.localVue
+
+describe('GddSend confirm', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $i18n: {
+      locale: jest.fn(() => 'en'),
+    },
+    $n: jest.fn((n) => String(n)),
+  }
+
+  const propsData = {
+    balance: 1234,
+    email: 'user@example.org',
+    amount: 12.34,
+    memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
+    loading: false,
+    selected: 'send',
+  }
+
+  const Wrapper = () => {
+    return mount(TransactionConfirmation, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component div.transaction-confirm', () => {
+      expect(wrapper.find('div.transaction-confirm').exists()).toBeTruthy()
+    })
+
+    describe('has selected "send"', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          selected: 'send',
+        })
+      })
+
+      it('renders the component div.confirm-box-send', () => {
+        expect(wrapper.find('div.confirm-box-send').exists()).toBeTruthy()
+      })
+    })
+
+    describe('has selected "link"', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          selected: 'link',
+        })
+      })
+
+      it('renders the component div.confirm-box-link', () => {
+        expect(wrapper.findAll('div.confirm-box-link').at(0).exists()).toBeTruthy()
+      })
+    })
+  })
+})

frontend/src/components/GddSend/TransactionConfirmation.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <b-row v-if="selected === 'link'">
+  <div class="transaction-confirm">
+    <b-row v-if="selected === 'link'" class="confirm-box-link">
       <b-alert class="mb-3 mt-3" show variant="muted">
         <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
 
@@ -10,7 +10,7 @@
         </div>
       </b-alert>
     </b-row>
-    <b-row v-else>
+    <b-row v-else class="confirm-box-send">
       <b-col>
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
         <b-list-group class="">
@@ -79,19 +79,13 @@
         <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="
-            selected === 'send' ? $emit('send-transaction') : $emit('send-transaction-per-link')
-          "
-        >
+        <b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
           {{ selected === 'send' ? $t('form.send_now') : $t('form.generate_now') }}
         </b-button>
       </b-col>
     </b-row>
 
-    <b-alert class="mt-3" show v-show="selected === 'link'" variant="muted">
+    <b-alert class="mt-3 confirm-box-link" show v-if="selected === 'link'" variant="muted">
       <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
 
       <p>
@@ -118,20 +112,12 @@
 export default {
   name: 'TransactionConfirmation',
   props: {
-    balance: { type: Number, default: 0 },
-    email: { type: String, default: '' },
-    amount: { type: Number, default: 0 },
-    memo: { type: String, default: '' },
-    loading: { type: Boolean, default: false },
-    selected: { type: String, required: false },
-    transactions: {
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      decay: this.transactions[0].balance,
-    }
+    balance: { type: Number, default: 0, required: true },
+    email: { type: String, default: '', required: false },
+    amount: { type: Number, default: 0, required: true },
+    memo: { type: String, default: '', required: true },
+    loading: { type: Boolean, default: false, required: true },
+    selected: { type: String, default: 'send', required: true },
   },
 }
 </script>

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

@@ -57,9 +57,10 @@ describe('GddSend', () => {
 
     describe('is selected: "send"', () => {
       beforeEach(async () => {
-        await wrapper.setData({
-          selected: 'send',
-        })
+        // await wrapper.setData({
+        //   selected: 'send',
+        // })
+        await wrapper.findAll('input[type="radio"]').at(0).setChecked()
       })
 
       describe('transaction form', () => {
@@ -243,9 +244,10 @@ describe('GddSend', () => {
 
     describe('is selected: "link"', () => {
       beforeEach(async () => {
-        await wrapper.setData({
-          selected: 'link',
-        })
+        // await wrapper.setData({
+        //   selected: 'link',
+        // })
+        await wrapper.findAll('input[type="radio"]').at(1).setChecked()
       })
 
       it('has no input field of id input-group-1', () => {

frontend/src/components/GddSend/TransactionForm.vue

@@ -2,22 +2,16 @@
   <b-row class="transaction-form">
     <b-col xl="12" md="12" class="p-0">
       <b-card class="p-0 m-0" style="background-color: #ebebeba3 !important">
-        <!-- -<QrCode @set-transaction="setTransaction"></QrCode> -->
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
-            <!-- <div>
-                 <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
-                 </div>
-                 <br />
-            -->
             <b-row>
               <b-col>
-                <b-form-radio v-model="selected" name="some-radios" value="send" size="lg">
+                <b-form-radio v-model="selected" name="radios" value="send" size="lg">
                   {{ $t('send_gdd') }}
                 </b-form-radio>
               </b-col>
               <b-col>
-                <b-form-radio v-model="selected" name="some-radios" value="link" size="lg">
+                <b-form-radio v-model="selected" name="radios" value="link" size="lg">
                   {{ $t('send_per_link') }}
                 </b-form-radio>
               </b-col>
@@ -159,16 +153,12 @@
   </b-row>
 </template>
 <script>
-// import QrCode from './QrCode'
-// import { QrcodeDropZone } from 'vue-qrcode-reader'
 import { BIcon } from 'bootstrap-vue'
 
 export default {
   name: 'TransactionForm',
   components: {
     BIcon,
-    //    QrCode,
-    // QrcodeDropZone,
   },
   props: {
     balance: { type: Number, default: 0 },
@@ -202,11 +192,6 @@ export default {
       this.form.amount = ''
       this.form.memo = ''
     },
-    /*
-     setTransaction(data) {
-       this.form.email = data.email
-       this.form.amount = data.amount
-     }, */
     normalizeAmount(isValid) {
       this.amountFocused = false
       if (!isValid) return

frontend/src/pages/Send.vue

@@ -8,14 +8,12 @@
         <template #transaction-confirmation>
           <transaction-confirmation
             :balance="balance"
-            :transactions="transactions"
             :selected="transactionData.selected"
             :email="transactionData.email"
             :amount="transactionData.amount"
             :memo="transactionData.memo"
             :loading="loading"
             @send-transaction="sendTransaction"
-            @send-transaction-per-link="sendTransactionPerLink"
             @on-reset="onReset"
           ></transaction-confirmation>
         </template>
@@ -36,7 +34,7 @@ import GddSend from '@/components/GddSend.vue'
 import TransactionForm from '@/components/GddSend/TransactionForm.vue'
 import TransactionConfirmation from '@/components/GddSend/TransactionConfirmation.vue'
 import TransactionResult from '@/components/GddSend/TransactionResult.vue'
-import { sendCoins, sendCoinsPerLink } from '@/graphql/mutations.js'
+import { sendCoins } from '@/graphql/mutations.js'
 
 const EMPTY_TRANSACTION_DATA = {
   email: '',
@@ -97,26 +95,6 @@ export default {
       this.currentTransactionStep = 2
       this.loading = false
     },
-    async sendTransactionPerLink() {
-      alert('sendTransactionPerLink: TODO : lege sendCoinsPerLink als mutation an!')
-      this.loading = true
-      this.error = false
-      this.$apollo
-        .mutate({
-          mutation: sendCoinsPerLink,
-          variables: this.transactionData,
-        })
-        .then(() => {
-          this.error = false
-          this.$emit('update-balance', this.transactionData.amount)
-        })
-        .catch((err) => {
-          this.errorResult = err.message
-          this.error = true
-        })
-      this.currentTransactionStep = 2
-      this.loading = false
-    },
     onReset() {
       this.currentTransactionStep = 0
     },