tests for Send.spec.js

frontend/src/components/ClipboardCopy.vue

@@ -28,8 +28,8 @@ export default {
         .then(() => {
           this.toastSuccess(this.$t('gdd_per_link.link-copied'))
         })
-        .catch((err) => {
+        .catch(() => {
-          this.toastError(this.$t('gdd_per_link.not-copied', { err }))
+          this.toastError(this.$t('gdd_per_link.not-copied'))
         })
     },
   },

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

@@ -11,7 +11,6 @@ describe('GddSend confirm', () => {
     $i18n: {
       locale: jest.fn(() => 'en'),
     },
-    $n: jest.fn((n) => String(n)),
   }
 
   const propsData = {

frontend/src/components/GddSend/TransactionConfirmationLink.vue

@@ -4,7 +4,7 @@
       <b-col class="text-right mt-4 mb-3">
         <div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
 
-        <h1>− {{ $n(amount, 'decimal') }} GDD</h1>
+        <h1>{{ (amount * -1) | GDD }}</h1>
         <b class="mt-2">{{ memo }}</b>
       </b-col>
     </b-row>
@@ -20,7 +20,7 @@
           <strong>{{ $t('form.your_amount') }}</strong>
         </b-col>
         <b-col class="text-right">
-          <strong>− {{ $n(amount, 'decimal') }} GDD</strong>
+          <strong>{{ (amount * -1) | GDD }}</strong>
         </b-col>
       </b-row>
       <b-row class="pr-3">
@@ -28,12 +28,12 @@
           <strong>Vergänglichkeit für 14 Tage</strong>
         </b-col>
         <b-col class="text-right borderbottom">
-          <strong>~ {{ $n(amount * 0.028, 'decimal') }}</strong>
+          <strong>~ {{ (amount * 0.028 * -1) | GDD }}</strong>
         </b-col>
       </b-row>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
-        <b-col class="text-right">~ {{ $n(balance - amount - amount * 0.028, 'decimal') }}</b-col>
+        <b-col class="text-right">~ {{ (balance - amount - amount * 0.028) | GDD }}</b-col>
       </b-row>
     </b-container>
 

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

@@ -11,7 +11,6 @@ describe('GddSend confirm', () => {
     $i18n: {
       locale: jest.fn(() => 'en'),
     },
-    $n: jest.fn((n) => String(n)),
   }
 
   const propsData = {

frontend/src/components/GddSend/TransactionConfirmationSend.vue

@@ -18,7 +18,7 @@
               <div class="m-1 mt-2">GDD</div>
             </b-input-group-prepend>
 
-            <div class="p-3">− {{ $n(amount, 'decimal') }} GDD</div>
+            <div class="p-3">{{ (amount * -1) | GDD }}</div>
           </b-input-group>
 
           <br />
@@ -44,12 +44,12 @@
           <strong>{{ $t('form.your_amount') }}</strong>
         </b-col>
         <b-col class="text-right borderbottom">
-          <strong>− {{ $n(amount, 'decimal') }} GDD</strong>
+          <strong>{{ (amount * -1) | GDD }}</strong>
         </b-col>
       </b-row>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
-        <b-col class="text-right">~ {{ $n(balance - amount, 'decimal') }}</b-col>
+        <b-col class="text-right">{{ (balance - amount) | GDD }}</b-col>
       </b-row>
     </b-container>
 

frontend/src/mixins/toaster.js

@@ -13,7 +13,7 @@ export const toasters = {
       })
     },
     toast(message, options) {
-      message = message.replace(/^GraphQL error: /, '')
+      if (message.replace) message = message.replace(/^GraphQL error: /, '')
       this.$bvToast.toast(message, {
         autoHideDelay: 5000,
         appendToast: true,

frontend/src/pages/Send.spec.js

@@ -1,12 +1,16 @@
 import { mount } from '@vue/test-utils'
 import Send from './Send'
-import { toastErrorSpy } from '../../test/testSetup'
+import { toastErrorSpy, toastSuccessSpy } from '@test/testSetup'
+import { TRANSACTION_STEPS } from '@/components/GddSend.vue'
+import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'
 
-const sendCoinsMock = jest.fn()
+const apolloMutationMock = jest.fn()
-sendCoinsMock.mockResolvedValue('success')
+apolloMutationMock.mockResolvedValue('success')
 
-const createTransactionLinkMock = jest.fn()
+const navigatorClipboardMock = jest.fn()
-createTransactionLinkMock.mockResolvedValue('error')
+
+// const createTransactionLinkMock = jest.fn()
+// createTransactionLinkMock.mockRejectedValue({ message: 'OOPS' })
 
 const localVue = global.localVue
 
@@ -20,6 +24,7 @@ describe('Send', () => {
     GdtBalance: 1234.56,
     transactions: [{ balance: 0.1 }],
     pending: true,
+    currentTransactionStep: TRANSACTION_STEPS.transactionConfirmationSend,
   }
 
   const mocks = {
@@ -31,7 +36,7 @@ describe('Send', () => {
       },
     },
     $apollo: {
-      mutate: sendCoinsMock,
+      mutate: apolloMutationMock,
     },
   }
 
@@ -49,7 +54,7 @@ describe('Send', () => {
     })
 
     /* SEND */
-    describe('transaction form', () => {
+    describe('transaction form send', () => {
       beforeEach(async () => {
         wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
           email: 'user@example.org',
@@ -66,7 +71,7 @@ describe('Send', () => {
     describe('confirm transaction if selected:send', () => {
       beforeEach(() => {
         wrapper.setData({
-          currentTransactionStep: 1,
+          currentTransactionStep: TRANSACTION_STEPS.transactionConfirmationSend,
           transactionData: {
             email: 'user@example.org',
             amount: 23.45,
@@ -96,8 +101,9 @@ describe('Send', () => {
         })
 
         it('calls the API when send-transaction is emitted', async () => {
-          expect(sendCoinsMock).toBeCalledWith(
+          expect(apolloMutationMock).toBeCalledWith(
             expect.objectContaining({
+              mutation: sendCoins,
               variables: {
                 email: 'user@example.org',
                 amount: 23.45,
@@ -113,7 +119,7 @@ describe('Send', () => {
           expect(wrapper.emitted('update-balance')).toEqual([[23.45]])
         })
 
-        it('shows the succes page', () => {
+        it('shows the success page', () => {
           expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_success')
         })
       })
@@ -121,7 +127,7 @@ describe('Send', () => {
       describe('transaction is confirmed and server response is error', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
-          sendCoinsMock.mockRejectedValue({ message: 'recipient not known' })
+          apolloMutationMock.mockRejectedValue({ message: 'recipient not known' })
           await wrapper
             .findComponent({ name: 'TransactionConfirmationSend' })
             .vm.$emit('send-transaction')
@@ -142,51 +148,111 @@ describe('Send', () => {
     })
 
     /* LINK */
-    describe('transaction form', () => {
+
+    describe('transaction form link', () => {
       beforeEach(async () => {
-        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+        apolloMutationMock.mockResolvedValue({
-          amount: 23.45,
+          data: { createTransactionLink: { code: '0123456789' } },
-          memo: 'Make the best of it!',
+        })
+        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+          amount: 56.78,
+          memo: 'Make the best of it link!',
           selected: 'link',
         })
       })
       it('steps forward in the dialog', () => {
         expect(wrapper.findComponent({ name: 'TransactionConfirmationLink' }).exists()).toBe(true)
       })
+
+      describe('transaction is confirmed and server response is success', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmationLink' })
+            .vm.$emit('send-transaction')
+        })
+
+        it('calls the API when send-transaction is emitted', async () => {
+          expect(apolloMutationMock).toBeCalledWith(
+            expect.objectContaining({
+              mutation: createTransactionLink,
+              variables: {
+                amount: 56.78,
+                memo: 'Make the best of it link!',
+              },
+            }),
+          )
+        })
+
+        it.skip('emits update-balance', () => {
+          expect(wrapper.emitted('update-balance')).toBeTruthy()
+          expect(wrapper.emitted('update-balance')).toEqual([[56.78]])
+        })
+
+        it('find components ClipBoard', () => {
+          expect(wrapper.findComponent({ name: 'ClipboardCopy' }).exists()).toBe(true)
+        })
+
+        it('shows the success message', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('gdd_per_link.created')
+        })
+
+        it('shows the close button', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('form.close')
+        })
+
+        describe('Copy link to Clipboard', () => {
+          const navigatorClipboard = navigator.clipboard
+          beforeAll(() => {
+            delete navigator.clipboard
+            navigator.clipboard = { writeText: navigatorClipboardMock }
+          })
+          afterAll(() => {
+            navigator.clipboard = navigatorClipboard
+          })
+
+          describe('copy with success', () => {
+            beforeEach(async () => {
+              navigatorClipboardMock.mockResolvedValue()
+              await wrapper.findAll('button').at(0).trigger('click')
+            })
+
+            it('toasts success message', () => {
+              expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-copied')
+            })
+          })
+
+          describe('copy with error', () => {
+            beforeEach(async () => {
+              navigatorClipboardMock.mockRejectedValue()
+              await wrapper.findAll('button').at(0).trigger('click')
+            })
+
+            it('toasts error message', () => {
+              expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied')
+            })
+          })
+        })
+
+        describe('close button click', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('button').at(1).trigger('click')
+          })
+
+          it('Shows the TransactionForm', () => {
+            expect(wrapper.findComponent({ name: 'TransactionForm' }).exists()).toBe(true)
+          })
+        })
       })
 
       describe('send apollo if transaction link with error', () => {
         beforeEach(() => {
-        createTransactionLinkMock.mockRejectedValue({ message: 'OUCH!' })
+          apolloMutationMock.mockRejectedValue({ message: 'OUCH!' })
-        wrapper = Wrapper()
           wrapper.find('button.btn-success').trigger('click')
         })
 
         it('toasts an error message', () => {
-        expect(toastErrorSpy).toBeCalledWith('unregister_mail.error')
+          expect(toastErrorSpy).toBeCalledWith({ message: 'OUCH!' })
-      })
-    })
-
-    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: 'TransactionConfirmationSend' }).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',
         })
       })
     })