test send.vue and ShowTransactionLinkInformations.spec.js, routes

frontend/src/pages/Send.spec.js

@@ -44,12 +44,14 @@ describe('Send', () => {
       expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
     })
 
+    /* SEND */
     describe('transaction form', () => {
       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',
         })
       })
       it('steps forward in the dialog', () => {
@@ -57,7 +59,7 @@ describe('Send', () => {
       })
     })
 
-    describe('confirm transaction', () => {
+    describe('confirm transaction if selected:send', () => {
       beforeEach(() => {
         wrapper.setData({
           currentTransactionStep: 1,
@@ -65,6 +67,7 @@ describe('Send', () => {
             email: 'user@example.org',
             amount: 23.45,
             memo: 'Make the best of it!',
+            selected: 'send',
           },
         })
       })
@@ -76,6 +79,7 @@ describe('Send', () => {
           email: 'user@example.org',
           amount: 23.45,
           memo: 'Make the best of it!',
+          selected: 'send',
         })
       })
 
@@ -94,6 +98,7 @@ describe('Send', () => {
                 email: 'user@example.org',
                 amount: 23.45,
                 memo: 'Make the best of it!',
+                selected: 'send',
               },
             }),
           )
@@ -131,5 +136,43 @@ describe('Send', () => {
         })
       })
     })
+
+    /* LINK */
+    describe('transaction form', () => {
+      beforeEach(async () => {
+        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+          amount: 23.45,
+          memo: 'Make the best of it!',
+          selected: 'link',
+        })
+      })
+      it('steps forward in the dialog', () => {
+        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBe(true)
+      })
+    })
+
+    describe('confirm transaction if selected:link', () => {
+      beforeEach(() => {
+        wrapper.setData({
+          currentTransactionStep: 1,
+          transactionData: {
+            amount: 23.45,
+            memo: 'Make the best of it!',
+            selected: 'link',
+          },
+        })
+      })
+
+      it('resets the transaction process when on-reset is emitted', async () => {
+        await wrapper.findComponent({ name: 'TransactionConfirmation' }).vm.$emit('on-reset')
+        expect(wrapper.findComponent({ name: 'TransactionForm' }).exists()).toBeTruthy()
+        expect(wrapper.vm.transactionData).toEqual({
+          email: '',
+          amount: 23.45,
+          memo: 'Make the best of it!',
+          selected: 'link',
+        })
+      })
+    })
   })
 })

frontend/src/pages/Send.vue

@@ -79,32 +79,37 @@ export default {
     async sendTransaction() {
       this.loading = true
       this.error = false
-      if (this.transactionData.selected === 'send') {
-        this.$apollo
-          .mutate({
-            mutation: sendCoins,
-            variables: this.transactionData,
-          })
-          .then(() => {
-            this.error = false
-            this.$emit('update-balance', this.transactionData.amount)
-          })
-          .catch((err) => {
-            this.errorResult = err.message
-            this.error = true
-          })
-      } else if (this.transactionData.selected === 'link') {
-        this.$apollo
-          .mutate({
-            mutation: createTransactionLink,
-            variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },
-          })
-          .then((result) => {
-            alert(result)
-          })
-          .catch((error) => {
-            this.toastError(error)
-          })
+      switch (this.transactionData.selected) {
+        case 'send':
+          this.$apollo
+            .mutate({
+              mutation: sendCoins,
+              variables: this.transactionData,
+            })
+            .then(() => {
+              this.error = false
+              this.$emit('update-balance', this.transactionData.amount)
+            })
+            .catch((err) => {
+              this.errorResult = err.message
+              this.error = true
+            })
+          break
+        case 'link':
+          this.$apollo
+            .mutate({
+              mutation: createTransactionLink,
+              variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },
+            })
+            .then((result) => {
+              alert(result)
+            })
+            .catch((error) => {
+              this.toastError(error)
+            })
+          break
+        default:
+          throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)
       }
       this.currentTransactionStep = 2
       this.loading = false

frontend/src/pages/ShowTransactionLinkInformations.spec.js

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import ShowTransactionLinkInformations from './ShowTransactionLinkInformations'
+
+const localVue = global.localVue
+
+const errorHandler = jest.fn()
+
+localVue.config.errorHandler = errorHandler
+
+const queryTransactionLink = jest.fn()
+queryTransactionLink.mockResolvedValue('success')
+
+const createMockObject = (code) => {
+  return {
+    localVue,
+    mocks: {
+      $t: jest.fn((t) => t),
+      $i18n: {
+        locale: () => 'en',
+      },
+      $store: {
+        // commit: stateCommitMock,
+      },
+      $apollo: {
+        query: queryTransactionLink,
+      },
+      $route: {
+        params: {
+          code,
+        },
+      },
+    },
+  }
+}
+
+describe('ShowTransactionLinkInformations', () => {
+  let wrapper
+
+  const Wrapper = (functionN) => {
+    return mount(ShowTransactionLinkInformations, functionN)
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject())
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.show-transaction-link-informations').exists()).toBeTruthy()
+    })
+  })
+})

frontend/src/pages/ShowTransactionLinkInformations.vue

@@ -1,12 +1,11 @@
 <template>
-  <div>
+  <div class="show-transaction-link-informations">
     <!-- Header -->
     <div class="header py-7 py-lg-8 pt-lg-9">
       <b-container>
         <div class="header-body text-center mb-7">
-          <div class="mb-5">resultDB : {{ resultDB }}</div>
           <p class="h1">
-            {{ displaySetup.user.firstName }} {{ displaySetup.user.lastName }}
+            {{ username }}
             {{ $t('transaction-link.send_you') }} {{ displaySetup.amount | GDD }}
           </p>
           <p class="h4">{{ displaySetup.memo }}</p>
@@ -26,16 +25,10 @@ export default {
   name: 'ShowTransactionLinkInformations',
   data() {
     return {
-      resultDB: {},
       displaySetup: {
-        amount: '123456',
-        linkTo: '',
-        memo: 'Test Memo, Test Memo von Ogerly, Test Memo von Ogerly für testuser',
         user: {
-          publisherId: 1,
-          firstName: 'testName',
-          lastName: 'testOgerly',
-          email: 'test@example.de',
+          firstName: '',
+          lastName: '',
         },
       },
     }
@@ -50,18 +43,19 @@ export default {
           },
         })
         .then((result) => {
-          const {
-            data: { queryTransactionLink },
-          } = result
-          this.resultDB = queryTransactionLink
-          this.displaySetup = queryTransactionLink
-          this.$store.commit('publisherId', queryTransactionLink.user.publisherId)
+          this.displaySetup = result.data.queryTransactionLink
+          this.$store.commit('publisherId', result.data.queryTransactionLink.user.publisherId)
         })
         .catch((error) => {
           this.toastError(error)
         })
     },
   },
+  computed: {
+    username() {
+      return this.displaySetup.user.firstName + ' ' + this.displaySetup.user.lastName
+    },
+  },
   created() {
     this.setTransactionLinkInformation()
   },

frontend/src/routes/router.test.js

@@ -50,7 +50,7 @@ describe('router', () => {
       })
 
       it('has sixteen routes defined', () => {
-        expect(routes).toHaveLength(16)
+        expect(routes).toHaveLength(17)
       })
 
       describe('overview', () => {