update test

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

@@ -100,6 +100,11 @@ describe('TransactionLinkSummary', () => {
       expect(wrapper.findComponent({ name: 'CollapseLinksList' }).exists()).toBe(true)
     })
 
+    describe('click on transaction links', () => {
+      beforeEach(() => {
+        wrapper.find('div.transaction-link-details').trigger('click')
+      })
+
       it('calls the API to get the list transaction links', () => {
         expect(apolloQueryMock).toBeCalledWith({
           query: listTransactionLinks,
@@ -114,32 +119,18 @@ describe('TransactionLinkSummary', () => {
         expect(wrapper.vm.transactionLinks).toHaveLength(4)
       })
 
-    describe('reset transaction links', () => {
-      beforeEach(async () => {
+      describe('close transaction link details', () => {
+        beforeEach(() => {
           jest.clearAllMocks()
-        await wrapper.setData({
-          currentPage: 0,
-          pending: false,
-          pageSize: 5,
-        })
+          wrapper.find('div.transaction-link-details').trigger('click')
         })
 
-      it('reloads transaction links', () => {
-        expect(apolloQueryMock).toBeCalledWith({
-          query: listTransactionLinks,
-          variables: {
-            currentPage: 1,
-          },
-          fetchPolicy: 'network-only',
-        })
+        it('does not call the API', () => {
+          expect(apolloQueryMock).not.toBeCalled()
         })
 
-      it('emits update transactions', () => {
-        expect(wrapper.emitted('update-transactions')).toBeTruthy()
-      })
-
-      it('has four transaction links in list', () => {
-        expect(wrapper.vm.transactionLinks).toHaveLength(4)
+        it('has no component CollapseLinksList', () => {
+          expect(wrapper.findComponent({ name: 'CollapseLinksList' }).isVisible()).toBe(false)
         })
       })
 
@@ -216,11 +207,41 @@ describe('TransactionLinkSummary', () => {
           })
         })
       })
+    })
+
+    describe('reset transaction links', () => {
+      beforeEach(async () => {
+        jest.clearAllMocks()
+        await wrapper.setData({
+          currentPage: 0,
+          pending: false,
+          pageSize: 5,
+        })
+      })
+
+      it('reloads transaction links', () => {
+        expect(apolloQueryMock).toBeCalledWith({
+          query: listTransactionLinks,
+          variables: {
+            currentPage: 1,
+          },
+          fetchPolicy: 'network-only',
+        })
+      })
+
+      it('emits update transactions', () => {
+        expect(wrapper.emitted('update-transactions')).toBeTruthy()
+      })
+
+      it('has four transaction links in list', () => {
+        expect(wrapper.vm.transactionLinks).toHaveLength(4)
+      })
+    })
 
     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', () => {

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>