From eb2b0e951eee0d56c2bb3603e309abdefaec1fdd Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 21 Apr 2022 14:04:04 +0200
Subject: [PATCH 1/2] reset transaction link arrays after click

---
 .../Transactions/TransactionLinkSummary.vue   | 163 +++++++++---------
 1 file changed, 82 insertions(+), 81 deletions(-)

diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index 84d0f9b84..b1ba40c69 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -37,86 +37,87 @@
   </div>
 </template>
 <script>
-import CollapseIcon from '../TransactionRows/CollapseIcon'
-import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import LinkCountRow from '../TransactionRows/LinkCountRow'
-import DecayRow from '../TransactionRows/DecayRow'
-import CollapseLinksList from '../DecayInformations/CollapseLinksList'
-import { listTransactionLinks } from '@/graphql/queries'
+ import CollapseIcon from '../TransactionRows/CollapseIcon'
+ import TypeIcon from '../TransactionRows/TypeIcon'
+ import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
+ import LinkCountRow from '../TransactionRows/LinkCountRow'
+ import DecayRow from '../TransactionRows/DecayRow'
+ import CollapseLinksList from '../DecayInformations/CollapseLinksList'
+ import { listTransactionLinks } from '@/graphql/queries'
 
-export default {
-  name: 'TransactionSlotLink',
-  components: {
-    CollapseIcon,
-    TypeIcon,
-    AmountAndNameRow,
-    LinkCountRow,
-    DecayRow,
-    CollapseLinksList,
-  },
-  props: {
-    amount: {
-      type: String,
-      required: true,
-    },
-    decay: {
-      type: Object,
-      required: true,
-    },
-    transactionLinkCount: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      visible: false,
-      transactionLinks: [],
-      currentPage: 1,
-      pageSize: 5,
-      pending: false,
-    }
-  },
-  methods: {
-    showTransactionLinks() {
-      if (this.visible) {
-        this.visible = false
-      } else {
-        this.updateListTransactionLinks()
-        this.visible = true
-      }
-    },
-    async updateListTransactionLinks() {
-      if (this.currentPage === 0) {
-        this.transactionLinks = []
-        this.currentPage = 1
-      } else {
-        this.pending = true
-        this.$apollo
-          .query({
-            query: listTransactionLinks,
-            variables: {
-              currentPage: this.currentPage,
-            },
-            fetchPolicy: 'network-only',
-          })
-          .then((result) => {
-            this.transactionLinks = [...this.transactionLinks, ...result.data.listTransactionLinks]
-            this.$emit('update-transactions')
-            this.pending = false
-          })
-          .catch((err) => {
-            this.toastError(err.message)
-            this.pending = false
-          })
-      }
-    },
-  },
-  watch: {
-    currentPage() {
-      this.updateListTransactionLinks()
-    },
-  },
-}
+ export default {
+   name: 'TransactionSlotLink',
+   components: {
+     CollapseIcon,
+     TypeIcon,
+     AmountAndNameRow,
+     LinkCountRow,
+     DecayRow,
+     CollapseLinksList,
+   },
+   props: {
+     amount: {
+       type: String,
+       required: true,
+     },
+     decay: {
+       type: Object,
+       required: true,
+     },
+     transactionLinkCount: {
+       type: Number,
+       required: true,
+     },
+   },
+   data() {
+     return {
+       visible: false,
+       transactionLinks: [],
+       currentPage: 1,
+       pageSize: 5,
+       pending: false,
+     }
+   },
+   methods: {
+     showTransactionLinks() {
+       if (this.visible) {
+         this.visible = false
+       } else {
+         this.transactionLinks = []
+         this.updateListTransactionLinks()
+         this.visible = true
+       }
+     },
+     async updateListTransactionLinks() {
+       if (this.currentPage === 0) {
+         this.transactionLinks = []
+         this.currentPage = 1
+       } else {
+         this.pending = true
+         this.$apollo
+             .query({
+               query: listTransactionLinks,
+               variables: {
+                 currentPage: this.currentPage,
+               },
+               fetchPolicy: 'network-only',
+             })
+             .then((result) => {
+               this.transactionLinks = [...this.transactionLinks, ...result.data.listTransactionLinks]
+               this.$emit('update-transactions')
+               this.pending = false
+             })
+             .catch((err) => {
+               this.toastError(err.message)
+               this.pending = false
+             })
+       }
+     },
+   },
+   watch: {
+     currentPage() {
+       this.updateListTransactionLinks()
+     },
+   },
+ }
 </script>

From 839d52748b1737ed5d8e6556760f09856a521929 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 21 Apr 2022 14:08:22 +0200
Subject: [PATCH 2/2] test reopening of transaction link details

---
 .../TransactionLinkSummary.spec.js            |  21 +++
 .../Transactions/TransactionLinkSummary.vue   | 164 +++++++++---------
 2 files changed, 103 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.spec.js b/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
index 3e57bceeb..79b453344 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.spec.js
@@ -132,6 +132,27 @@ describe('TransactionLinkSummary', () => {
         it('has no component CollapseLinksList', () => {
           expect(wrapper.findComponent({ name: 'CollapseLinksList' }).isVisible()).toBe(false)
         })
+
+        describe('reopen transaction link details', () => {
+          beforeEach(() => {
+            jest.clearAllMocks()
+            wrapper.find('div.transaction-link-details').trigger('click')
+          })
+
+          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('load more transaction links', () => {
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index b1ba40c69..c24410924 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -37,87 +37,87 @@
   </div>
 </template>
 <script>
- import CollapseIcon from '../TransactionRows/CollapseIcon'
- import TypeIcon from '../TransactionRows/TypeIcon'
- import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
- import LinkCountRow from '../TransactionRows/LinkCountRow'
- import DecayRow from '../TransactionRows/DecayRow'
- import CollapseLinksList from '../DecayInformations/CollapseLinksList'
- import { listTransactionLinks } from '@/graphql/queries'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
+import LinkCountRow from '../TransactionRows/LinkCountRow'
+import DecayRow from '../TransactionRows/DecayRow'
+import CollapseLinksList from '../DecayInformations/CollapseLinksList'
+import { listTransactionLinks } from '@/graphql/queries'
 
- export default {
-   name: 'TransactionSlotLink',
-   components: {
-     CollapseIcon,
-     TypeIcon,
-     AmountAndNameRow,
-     LinkCountRow,
-     DecayRow,
-     CollapseLinksList,
-   },
-   props: {
-     amount: {
-       type: String,
-       required: true,
-     },
-     decay: {
-       type: Object,
-       required: true,
-     },
-     transactionLinkCount: {
-       type: Number,
-       required: true,
-     },
-   },
-   data() {
-     return {
-       visible: false,
-       transactionLinks: [],
-       currentPage: 1,
-       pageSize: 5,
-       pending: false,
-     }
-   },
-   methods: {
-     showTransactionLinks() {
-       if (this.visible) {
-         this.visible = false
-       } else {
-         this.transactionLinks = []
-         this.updateListTransactionLinks()
-         this.visible = true
-       }
-     },
-     async updateListTransactionLinks() {
-       if (this.currentPage === 0) {
-         this.transactionLinks = []
-         this.currentPage = 1
-       } else {
-         this.pending = true
-         this.$apollo
-             .query({
-               query: listTransactionLinks,
-               variables: {
-                 currentPage: this.currentPage,
-               },
-               fetchPolicy: 'network-only',
-             })
-             .then((result) => {
-               this.transactionLinks = [...this.transactionLinks, ...result.data.listTransactionLinks]
-               this.$emit('update-transactions')
-               this.pending = false
-             })
-             .catch((err) => {
-               this.toastError(err.message)
-               this.pending = false
-             })
-       }
-     },
-   },
-   watch: {
-     currentPage() {
-       this.updateListTransactionLinks()
-     },
-   },
- }
+export default {
+  name: 'TransactionSlotLink',
+  components: {
+    CollapseIcon,
+    TypeIcon,
+    AmountAndNameRow,
+    LinkCountRow,
+    DecayRow,
+    CollapseLinksList,
+  },
+  props: {
+    amount: {
+      type: String,
+      required: true,
+    },
+    decay: {
+      type: Object,
+      required: true,
+    },
+    transactionLinkCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      transactionLinks: [],
+      currentPage: 1,
+      pageSize: 5,
+      pending: false,
+    }
+  },
+  methods: {
+    showTransactionLinks() {
+      if (this.visible) {
+        this.visible = false
+      } else {
+        this.transactionLinks = []
+        this.updateListTransactionLinks()
+        this.visible = true
+      }
+    },
+    async updateListTransactionLinks() {
+      if (this.currentPage === 0) {
+        this.transactionLinks = []
+        this.currentPage = 1
+      } else {
+        this.pending = true
+        this.$apollo
+          .query({
+            query: listTransactionLinks,
+            variables: {
+              currentPage: this.currentPage,
+            },
+            fetchPolicy: 'network-only',
+          })
+          .then((result) => {
+            this.transactionLinks = [...this.transactionLinks, ...result.data.listTransactionLinks]
+            this.$emit('update-transactions')
+            this.pending = false
+          })
+          .catch((err) => {
+            this.toastError(err.message)
+            this.pending = false
+          })
+      }
+    },
+  },
+  watch: {
+    currentPage() {
+      this.updateListTransactionLinks()
+    },
+  },
+}
 </script>