From ff652fa72e0085106997648ceeb716022e65300a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Apr 2022 08:48:19 +0200
Subject: [PATCH 1/2] load transaction link on click

---
 .../Transactions/TransactionLinkSummary.vue         | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index 7807a5bf7..16a623a92 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-slot-link gradido-shadow-inset">
     <div>
-      <div @click="visible = !visible">
+      <div @click="showTransactionLinks()">
         <!-- Collaps Icon  -->
         <collapse-icon class="text-right" :visible="visible" />
         <div>
@@ -79,6 +79,14 @@ export default {
     }
   },
   methods: {
+    showTransactionLinks() {
+      if (this.visible) {
+        this.visible = false
+      } else {
+        this.updateListTransactionLinks()
+        this.visible = true
+      }
+    },
     async updateListTransactionLinks() {
       if (this.currentPage === 0) {
         this.transactionLinks = []
@@ -110,8 +118,5 @@ export default {
       this.updateListTransactionLinks()
     },
   },
-  created() {
-    this.updateListTransactionLinks()
-  },
 }
 </script>

From 0b53cfa04400cae3fdef684f3feba3723a809e45 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Apr 2022 09:15:08 +0200
Subject: [PATCH 2/2] update test

---
 .../TransactionLinkSummary.spec.js            | 191 ++++++++++--------
 .../Transactions/TransactionLinkSummary.vue   |   2 +-
 2 files changed, 107 insertions(+), 86 deletions(-)

diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.spec.js b/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
index 078ce6f97..3e57bceeb 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
@@ -100,18 +100,113 @@ describe('TransactionLinkSummary', () => {
       expect(wrapper.findComponent({ name: 'CollapseLinksList' }).exists()).toBe(true)
     })
 
-    it('calls the API to get the list transaction links', () => {
-      expect(apolloQueryMock).toBeCalledWith({
-        query: listTransactionLinks,
-        variables: {
-          currentPage: 1,
-        },
-        fetchPolicy: 'network-only',
+    describe('click on transaction links', () => {
+      beforeEach(() => {
+        wrapper.find('div.transaction-link-details').trigger('click')
       })
-    })
 
-    it('has four transactionLinks', () => {
-      expect(wrapper.vm.transactionLinks).toHaveLength(4)
+      it('calls the API to get the list transaction links', () => {
+        expect(apolloQueryMock).toBeCalledWith({
+          query: listTransactionLinks,
+          variables: {
+            currentPage: 1,
+          },
+          fetchPolicy: 'network-only',
+        })
+      })
+
+      it('has four transactionLinks', () => {
+        expect(wrapper.vm.transactionLinks).toHaveLength(4)
+      })
+
+      describe('close transaction link details', () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+          wrapper.find('div.transaction-link-details').trigger('click')
+        })
+
+        it('does not call the API', () => {
+          expect(apolloQueryMock).not.toBeCalled()
+        })
+
+        it('has no component CollapseLinksList', () => {
+          expect(wrapper.findComponent({ name: 'CollapseLinksList' }).isVisible()).toBe(false)
+        })
+      })
+
+      describe('load more transaction links', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          apolloQueryMock.mockResolvedValue({
+            data: {
+              listTransactionLinks: [
+                {
+                  amount: '76',
+                  code: 'ce28664b5308c17f931c0367',
+                  createdAt: '2022-03-16T14:22:40.000Z',
+                  holdAvailableAmount: '5.13109484759482747111',
+                  id: 87,
+                  memo:
+                    'Hat jemand die Nummer von der Hexe aus Schneewittchen? Ich bräuchte mal ein paar Äpfel.',
+                  redeemedAt: null,
+                  validUntil: '2022-03-30T14:22:40.000Z',
+                },
+                {
+                  amount: '86',
+                  code: 'ce28664b5308c17f931c0367',
+                  createdAt: '2022-03-16T14:22:40.000Z',
+                  holdAvailableAmount: '5.13109484759482747111',
+                  id: 108,
+                  memo:
+                    'Die Windfahn´ krächzt am Dach, Der Uhu im Geklüfte; Was wispert wie ein Ach Verhallend in die Lüfte?',
+                  redeemedAt: null,
+                  validUntil: '2022-03-30T14:22:40.000Z',
+                },
+                {
+                  amount: '96',
+                  code: 'ce28664b5308c17f931c0367',
+                  createdAt: '2022-03-16T14:22:40.000Z',
+                  holdAvailableAmount: '5.13109484759482747111',
+                  id: 93,
+                  memo:
+                    'Verschlafen kräht der Hahn, Ein Blitz noch, und ein trüber, Umwölbter Tag bricht an – Walpurgisnacht vorüber!',
+                  redeemedAt: null,
+                  validUntil: '2022-03-30T14:22:40.000Z',
+                },
+                {
+                  amount: '150',
+                  code: 'ce28664b5308c17f931c0367',
+                  createdAt: '2022-03-16T14:22:40.000Z',
+                  holdAvailableAmount: '5.13109484759482747111',
+                  id: 17,
+                  memo: 'Eene meene Flaschenschrank, fertig ist der Hexentrank!',
+                  redeemedAt: null,
+                  validUntil: '2022-03-30T14:22:40.000Z',
+                },
+              ],
+            },
+          })
+          await wrapper.setData({
+            currentPage: 2,
+            pending: false,
+            pageSize: 5,
+          })
+        })
+
+        it('has eight transactionLinks', () => {
+          expect(wrapper.vm.transactionLinks).toHaveLength(8)
+        })
+
+        it('loads more transaction links', () => {
+          expect(apolloQueryMock).toBeCalledWith({
+            query: listTransactionLinks,
+            variables: {
+              currentPage: 2,
+            },
+            fetchPolicy: 'network-only',
+          })
+        })
+      })
     })
 
     describe('reset transaction links', () => {
@@ -143,84 +238,10 @@ describe('TransactionLinkSummary', () => {
       })
     })
 
-    describe('load more transaction links', () => {
-      beforeEach(async () => {
-        jest.clearAllMocks()
-        apolloQueryMock.mockResolvedValue({
-          data: {
-            listTransactionLinks: [
-              {
-                amount: '76',
-                code: 'ce28664b5308c17f931c0367',
-                createdAt: '2022-03-16T14:22:40.000Z',
-                holdAvailableAmount: '5.13109484759482747111',
-                id: 87,
-                memo:
-                  'Hat jemand die Nummer von der Hexe aus Schneewittchen? Ich bräuchte mal ein paar Äpfel.',
-                redeemedAt: null,
-                validUntil: '2022-03-30T14:22:40.000Z',
-              },
-              {
-                amount: '86',
-                code: 'ce28664b5308c17f931c0367',
-                createdAt: '2022-03-16T14:22:40.000Z',
-                holdAvailableAmount: '5.13109484759482747111',
-                id: 108,
-                memo:
-                  'Die Windfahn´ krächzt am Dach, Der Uhu im Geklüfte; Was wispert wie ein Ach Verhallend in die Lüfte?',
-                redeemedAt: null,
-                validUntil: '2022-03-30T14:22:40.000Z',
-              },
-              {
-                amount: '96',
-                code: 'ce28664b5308c17f931c0367',
-                createdAt: '2022-03-16T14:22:40.000Z',
-                holdAvailableAmount: '5.13109484759482747111',
-                id: 93,
-                memo:
-                  'Verschlafen kräht der Hahn, Ein Blitz noch, und ein trüber, Umwölbter Tag bricht an – Walpurgisnacht vorüber!',
-                redeemedAt: null,
-                validUntil: '2022-03-30T14:22:40.000Z',
-              },
-              {
-                amount: '150',
-                code: 'ce28664b5308c17f931c0367',
-                createdAt: '2022-03-16T14:22:40.000Z',
-                holdAvailableAmount: '5.13109484759482747111',
-                id: 17,
-                memo: 'Eene meene Flaschenschrank, fertig ist der Hexentrank!',
-                redeemedAt: null,
-                validUntil: '2022-03-30T14:22:40.000Z',
-              },
-            ],
-          },
-        })
-        await wrapper.setData({
-          currentPage: 2,
-          pending: false,
-          pageSize: 5,
-        })
-      })
-
-      it('has eight transactionLinks', () => {
-        expect(wrapper.vm.transactionLinks).toHaveLength(8)
-      })
-
-      it('loads more transaction links', () => {
-        expect(apolloQueryMock).toBeCalledWith({
-          query: listTransactionLinks,
-          variables: {
-            currentPage: 2,
-          },
-          fetchPolicy: 'network-only',
-        })
-      })
-    })
-
     describe('loads transaction links with error', () => {
       beforeEach(() => {
         apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
-        wrapper = Wrapper()
+        wrapper.find('div.transaction-link-details').trigger('click')
       })
 
       it('toasts an error message', () => {
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index 16a623a92..84d0f9b84 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-slot-link gradido-shadow-inset">
     <div>
-      <div @click="showTransactionLinks()">
+      <div class="transaction-link-details" @click="showTransactionLinks()">
         <!-- Collaps Icon  -->
         <collapse-icon class="text-right" :visible="visible" />
         <div>