Merge pull request #1806 from gradido/load-transaction-links-on-click

fix: Load Transaction Link Details on Click
2025-12-13 07:45:54 +00:00 · 2022-04-20 13:19:09 +02:00 · 2022-04-20 13:19:09 +02:00 · 7a388d5ee6
commit 7a388d5ee6
parent efd6bfce51 7af7ee09e5
2 changed files with 115 additions and 89 deletions
--- 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', () => {
--- 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 class="transaction-link-details" @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>