test reopening of transaction link details

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', () => {

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>