Merge pull request #2577 from gradido/2560-style-and-design-send-link

refactor(frontend): link send result style

.github/workflows/test.yml

@@ -437,7 +437,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 92
+          min_coverage: 93
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/components/ClipboardCopy.vue

@@ -1,17 +1,31 @@
 <template>
   <div class="clipboard-copy">
-    <div v-if="canCopyLink" size="lg" class="mb-5">
+    <div v-if="canCopyLink" class="mb-5">
-      <div class="d-flex">
+      <div>
-        <div>
+        <label>{{ $t('gdd_per_link.copy-link') }}</label>
-          <label>{{ $t('gdd_per_link.copy-link') }}</label>
+        <div
-          <div class="pointer text-center bg-secondary gradido-border-radius p-4" @click="copyLink">
+          class="pointer text-center bg-secondary gradido-border-radius p-3"
-            {{ link }}
+          @click="copyLink"
+          data-test="copyLink"
+        >
+          {{ link }}
+          <div>
+            <b-button class="p-4">
+              <b-icon icon="link45deg"></b-icon>
+            </b-button>
           </div>
         </div>
-        <div class="ml-5">
+      </div>
-          <label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
+      <div class="mt-5">
+        <label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
+        <div
+          class="pointer text-center bg-secondary gradido-border-radius p-3"
+          data-test="copyLinkWithText"
+          @click="copyLinkWithText"
+        >
+          {{ linkText }}
           <div>
-            <b-button @click="copyLinkWithText" class="p-4">
+            <b-button class="p-4">
               <b-icon icon="link45deg"></b-icon>
             </b-button>
           </div>

frontend/src/components/DecayInformations/CollapseLinksList.spec.js

@@ -10,6 +10,12 @@ const mocks = {
   $tc: jest.fn((tc) => tc),
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
+  $store: {
+    state: {
+      firstName: 'Bibi',
+      lastName: 'Bloxberg',
+    },
+  },
 }
 
 const propsData = {

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -7,6 +7,7 @@
       :memo="memo"
       :validUntil="validUntil"
     ></clipboard-copy>
+    <label>{{ $t('qrCode') }}</label>
     <div class="text-center">
       <div><figure-qr-code :link="link" /></div>
       <div>

frontend/src/components/Transactions/TransactionLinkSummary.spec.js

@@ -17,6 +17,12 @@ const mocks = {
   $apollo: {
     query: apolloQueryMock,
   },
+  $store: {
+    state: {
+      firstName: 'Bibi',
+      lastName: 'Bloxberg',
+    },
+  },
 }
 
 const propsData = {
@@ -102,10 +108,10 @@ describe('TransactionLinkSummary', () => {
 
     describe('click on transaction links', () => {
       beforeEach(async () => {
-        wrapper.find('div.transaction-slot-link').trigger('click')
+        wrapper.find('div.row').trigger('click')
       })
 
-      it.skip('calls the API to get the list transaction links', () => {
+      it('calls the API to get the list transaction links', () => {
         expect(apolloQueryMock).toBeCalledWith({
           query: listTransactionLinks,
           variables: {
@@ -115,14 +121,14 @@ describe('TransactionLinkSummary', () => {
         })
       })
 
-      it.skip('has four transactionLinks', () => {
+      it('has four transactionLinks', () => {
         expect(wrapper.vm.transactionLinks).toHaveLength(4)
       })
 
       describe('close transaction link details', () => {
         beforeEach(() => {
           jest.clearAllMocks()
-          wrapper.find('div.transaction-slot-link').trigger('click')
+          wrapper.find('div.row').trigger('click')
         })
 
         it('does not call the API', () => {
@@ -136,10 +142,10 @@ describe('TransactionLinkSummary', () => {
         describe('reopen transaction link details', () => {
           beforeEach(() => {
             jest.clearAllMocks()
-            wrapper.find('div.transaction-slot-link').trigger('click')
+            wrapper.find('div.row').trigger('click')
           })
 
-          it.skip('calls the API to get the list transaction links', () => {
+          it('calls the API to get the list transaction links', () => {
             expect(apolloQueryMock).toBeCalledWith({
               query: listTransactionLinks,
               variables: {
@@ -149,7 +155,7 @@ describe('TransactionLinkSummary', () => {
             })
           })
 
-          it.skip('has four transactionLinks', () => {
+          it('has four transactionLinks', () => {
             expect(wrapper.vm.transactionLinks).toHaveLength(4)
           })
         })
@@ -215,7 +221,7 @@ describe('TransactionLinkSummary', () => {
         })
 
         it('has eight transactionLinks', () => {
-          expect(wrapper.vm.transactionLinks).toHaveLength(4)
+          expect(wrapper.vm.transactionLinks).toHaveLength(8)
         })
 
         it('loads more transaction links', () => {
@@ -230,19 +236,19 @@ describe('TransactionLinkSummary', () => {
 
         describe('close transaction link list', () => {
           beforeEach(async () => {
-            wrapper.find('div.transaction-slot-link').trigger('click')
+            wrapper.find('div.row').trigger('click')
           })
           describe('reopen transaction link list', () => {
             beforeEach(async () => {
               jest.clearAllMocks()
-              wrapper.find('div.transaction-slot-link').trigger('click')
+              wrapper.find('div.row').trigger('click')
             })
 
-            it.skip('calls the API once', () => {
+            it('calls the API once', () => {
               expect(apolloQueryMock).toBeCalledTimes(1)
             })
 
-            it.skip('calls the API with current page one', () => {
+            it('calls the API with current page one', () => {
               expect(apolloQueryMock).toBeCalledWith({
                 query: listTransactionLinks,
                 variables: {
@@ -289,10 +295,10 @@ describe('TransactionLinkSummary', () => {
       })
     })
 
-    describe.skip('loads transaction links with error', () => {
+    describe('loads transaction links with error', () => {
       beforeEach(() => {
         apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
-        wrapper.find('div.transaction-slot-link').trigger('click')
+        wrapper.find('div.row').trigger('click')
       })
 
       it('toasts an error message', () => {

frontend/src/mixins/copyLinks.js

@@ -24,15 +24,7 @@ export const copyLinks = {
     },
     copyLinkWithText() {
       navigator.clipboard
-        .writeText(
+        .writeText(this.linkText)
-          `${this.link}
-${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
-"${this.memo}"
-${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
-            date: this.$d(new Date(this.validUntil), 'short'),
-          })}
-${this.$t('gdd_per_link.link-hint')}`,
-        )
         .then(() => {
           this.toastSuccess(this.$t('gdd_per_link.link-and-text-copied'))
         })
@@ -42,4 +34,15 @@ ${this.$t('gdd_per_link.link-hint')}`,
         })
     },
   },
+  computed: {
+    linkText() {
+      return `${this.link}
+${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
+"${this.memo}"
+${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
+        date: this.$d(new Date(this.validUntil), 'short'),
+      })}
+${this.$t('gdd_per_link.link-hint')}`
+    },
+  },
 }

frontend/src/pages/Send.spec.js

@@ -254,7 +254,7 @@ describe('Send', () => {
           describe('copy link with success', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockResolvedValue()
-              await wrapper.find('.pointer').trigger('click')
+              await wrapper.find('div[data-test="copyLink"]').trigger('click')
             })
 
             it('should call clipboard.writeText', () => {
@@ -270,7 +270,7 @@ describe('Send', () => {
           describe('copy link with error', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockRejectedValue()
-              await wrapper.find('.clipboard-copy').find('.btn-secondary').trigger('click')
+              await wrapper.find('div[data-test="copyLink"]').trigger('click')
             })
 
             it('toasts error message', () => {
@@ -292,7 +292,7 @@ describe('Send', () => {
           describe('copy link and text with success', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockResolvedValue()
-              await wrapper.findAll('button').at(0).trigger('click')
+              await wrapper.find('div[data-test="copyLinkWithText"]').trigger('click')
             })
 
             it('should call clipboard.writeText', () => {
@@ -312,7 +312,7 @@ describe('Send', () => {
           describe('copy link and text with error', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockRejectedValue()
-              await wrapper.findAll('button').at(0).trigger('click')
+              await wrapper.find('div[data-test="copyLinkWithText"]').trigger('click')
             })
 
             it('toasts error message', () => {