From 51a37a092caaa64a0f8a0a3485925418fecaf7a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoine=20de=20Chevign=C3=A9?= <antoine@tryethernal.com>
Date: Sun, 23 Feb 2025 11:59:57 +0100
Subject: [PATCH] fix tests

---
 src/components/BlockList.vue                  |   3 +-
 src/components/TransactionsList.vue           | 280 +++++++++---------
 src/main.js                                   |   2 +-
 src/plugins/pusher.js                         |   1 +
 .../unit/components/TransactionsList.spec.js  |  12 +-
 .../AddressTransactionsList.spec.js.snap      |   2 +-
 .../__snapshots__/Block.spec.js.snap          |   4 +-
 .../__snapshots__/Overview.spec.js.snap       |   2 +-
 .../__snapshots__/Transactions.spec.js.snap   |   2 +-
 .../TransactionsList.spec.js.snap             |  20 +-
 10 files changed, 175 insertions(+), 153 deletions(-)

diff --git a/src/components/BlockList.vue b/src/components/BlockList.vue
index e589a6fe..4a16fbfc 100644
--- a/src/components/BlockList.vue
+++ b/src/components/BlockList.vue
@@ -72,7 +72,8 @@ export default {
         this.headers.push({ title: 'Transaction Count', key: 'transactionNumber', sortable: false });
     },
     destroyed() {
-        this.pusherChannelHandler.unbind(null, null, this);
+        this.pusherChannelHandler.unbind();
+        this.pusherChannelHandler = null;
     },
     methods: {
         commify: ethers.utils.commify,
diff --git a/src/components/TransactionsList.vue b/src/components/TransactionsList.vue
index 5f4acd67..66cc75c3 100644
--- a/src/components/TransactionsList.vue
+++ b/src/components/TransactionsList.vue
@@ -70,7 +70,7 @@
             </template>
         </template>
         <template v-slot:item.blockNumber="{ item }">
-            <router-link style="text-decoration: none;" :to="'/block/' + item.blockNumber" :contract="item.contract">{{ commify(item.blockNumber) }}</router-link>
+            <router-link style="text-decoration: none;" :to="'/block/' + item.blockNumber" :contract="item.contract">{{ ethers.utils.commify(item.blockNumber) }}</router-link>
         </template>
         <template v-slot:item.to="{ item }">
             <v-chip size="x-small" class="mr-2" v-if="item.to && item.to === currentAddress">self</v-chip>
@@ -84,149 +84,159 @@
         </template>
     </v-data-table-server>
 </template>
+<script setup>
+import { ethers } from 'ethers';
+import { defineProps, shallowRef, ref, onMounted, onUnmounted, inject, defineEmits, watch } from 'vue';
 
-<script>
-const moment = require('moment');
-const ethers = require('ethers');
-import { getGasPriceFromTransaction } from '../lib/utils';
-import { mapStores } from 'pinia';
 import HashLink from './HashLink.vue';
-import { useCurrentWorkspaceStore } from '../stores/currentWorkspace';
 
+import { useCurrentWorkspaceStore } from '@/stores/currentWorkspace';
+import { getGasPriceFromTransaction } from '@/lib/utils';
+
+const props = defineProps({
+    currentAddress: String,
+    dense: Boolean,
+    blockNumber: String,
+    address: String,
+    withCount: Boolean
+});
+const emit = defineEmits(['listUpdated']);
+
+const currentWorkspaceStore = useCurrentWorkspaceStore();
+const $server = inject('$server');
+const $pusher = inject('$pusher');
+
+const currentOptions = ref({ page: 1, itemsPerPage: 10, sortBy: [{ key: 'timestamp', order: 'desc' }] });
+const transactions = shallowRef([]);
+const transactionCount = ref(0);
+const loading = ref(false);
+const lastUpdatedAt = ref(0);
+let pusherUnsubscribe = ref(null);
+const headers = shallowRef([]);
 const DEBOUNCING_DELAY = 3000;
 
-export default {
-    name: 'TransactionsList',
-    props: ['currentAddress', 'dense', 'blockNumber', 'address', 'withCount'],
-    components: {
-        HashLink
-    },
-    data: () => ({
-        headers: [],
-        currentOptions: { page: 1, itemsPerPage: 10, sortBy: [{ key: 'timestamp', order: 'desc' }] },
-        transactions: [],
-        transactionCount: 0,
-        loading: false,
-        lastUpdatedAt: 0,
-        debounced: false
-    }),
-    mounted() {
-        this.currentOptions.orderBy = this.blockNumber ? 'timestamp' : 'blockNumber';
-
-        this.pusherUnsubscribe = this.$pusher.onNewTransaction(transaction => {
-            if (this.blockNumber) {
-                if (transaction.blockNumber == this.blockNumber)
-                    this.getTransactions(this.currentOptions);
-            }
-            else if (this.address) {
-                if (transaction.from == this.address || transaction.to == this.address)
-                    this.getTransactions(this.currentOptions);
-            }
-            else
-                this.getTransactions(this.currentOptions);
-        }, this, this.address);
-
-        if (this.dense)
-            this.headers = [
-                { title: 'Txn Hash', key: 'hash', align: 'start' },
-                { title: 'Mined On', key: 'timestamp' },
-                { title: 'From', key: 'from' }
-            ];
+const getTransactions = ({ page, itemsPerPage, sortBy }) => {
+    if (loading.value)
+        return;
+
+    lastUpdatedAt.value = Date.now();
+    loading.value = true;
+
+    if (!page || !itemsPerPage || !sortBy || !sortBy.length)
+        return loading.value = false;
+
+    currentOptions.value = { page, itemsPerPage, sortBy };
+
+    const query = props.blockNumber ?
+        $server.getBlockTransactions(props.blockNumber, { page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !props.dense && !!props.withCount) :
+            props.address ?
+                $server.getAddressTransactions(props.address, { page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !props.dense && !!props.withCount) :
+                $server.getTransactions({ page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !props.dense && !!props.withCount);
+
+    query.then(({ data }) => {
+        transactions.value = data.items;
+        if (data.total)
+            transactionCount.value = data.total;
         else
-            this.headers = [
-                { title: 'Txn Hash', key: 'hash', align: 'start' },
-                { title: 'Method', key: 'method', sortable: false },
-                { title: 'Block', key: 'blockNumber', sortable: !this.blockNumber },
-                { title: 'Mined On', key: 'timestamp' },
-                { title: 'From', key: 'from' },
-                { title: 'To', key: 'to' },
-                { title: 'Value', key: 'value' },
-                { title: 'Fee', key: 'fee', sortable: false }
-            ];
-    },
-    destroyed() {
-        this.pusherUnsubscribe();
-    },
-    methods: {
-        getGasPriceFromTransaction,
-        moment,
-        commify: ethers.utils.commify,
-        rowClasses(item) {
-            if (item.state == 'syncing')
-                return 'isSyncing'
-        },
-        txStatus(item) {
-            if (!item) return 'unknown';
-
-            if (item.state == 'syncing') return 'syncing';
-
-            if (!item.receipt) return 'unknown';
-
-            const receipt = item.receipt;
-            if (receipt.status !== null && receipt.status !== undefined)
-                return receipt.status ? 'succeeded' : 'failed';
-
-            if (receipt.root && receipt.root != '0x' && parseInt(receipt.cumulativeGasUsed) >= parseInt(receipt.gasUsed))
-                return 'succeeded';
-
-            return 'failed';
-        },
-        getTransactions({ page, itemsPerPage, sortBy }) {
-            this.loading = true;
-            if (!this.lastUpdatedAt)
-                this.lastUpdatedAt = Date.now();
-            else if (this.lastUpdatedAt - DEBOUNCING_DELAY < Date.now() && !this.debounced && page == this.currentOptions.page && itemsPerPage == this.currentOptions.itemsPerPage && sortBy == this.currentOptions.sortBy) {
-                this.debounced = true;
-                return setTimeout(() => {
-                    this.debounced = false;
-                }, DEBOUNCING_DELAY);
-            }
+            transactionCount.value = data.items.length == currentOptions.value.itemsPerPage ?
+                (currentOptions.value.page * data.items.length) + 1 :
+                currentOptions.value.page * data.items.length;
+
+        emit('listUpdated');
+    })
+    .catch(console.log)
+    .finally(() => loading.value = false);
+};
+
+const rowClasses = (item) => {
+    if (item.state == 'syncing')
+        return 'isSyncing'
+};
+
+const getMethodName = (transaction) => {
+    if (!transaction.methodDetails) return getSighash(transaction);
+    return transaction.methodDetails.name ? transaction.methodDetails.name : getSighash(transaction);
+};
+
+const getMethodLabel = (methodDetails) => {
+    if (!methodDetails) return null;
+    return methodDetails.label ? methodDetails.label : null;
+};
+
+const getSighash = (transaction) => {
+    return transaction.data && transaction.data != '0x' ? transaction.data.slice(0, 10) : null;
+};
+
+const txStatus = (item) => {
+    if (!item) return 'unknown';
 
-            if (!page || !itemsPerPage || !sortBy || !sortBy.length)
-                return this.loading = false;
-
-            this.currentOptions = {
-                page,
-                itemsPerPage,
-                sortBy
-            };
-
-            const query = this.blockNumber ?
-                this.$server.getBlockTransactions(this.blockNumber, { page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !this.dense && !!this.withCount) :
-                    this.address ?
-                        this.$server.getAddressTransactions(this.address, { page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !this.dense && !!this.withCount) :
-                        this.$server.getTransactions({ page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }, !this.dense && !!this.withCount);
-
-            query.then(({ data }) => {
-                this.transactions = data.items;
-                if (data.total)
-                    this.transactionCount = data.total;
-                else
-                    this.transactionCount = data.items.length == this.currentOptions.itemsPerPage ?
-                        (this.currentOptions.page * data.items.length) + 1 :
-                        this.currentOptions.page * data.items.length;
-
-                        this.$emit('listUpdated');
-            })
-            .catch(console.log)
-            .finally(() => this.loading = false);
-        },
-        getMethodName(transaction) {
-            if (!transaction.methodDetails) return this.getSighash(transaction);
-            return transaction.methodDetails.name ? transaction.methodDetails.name : this.getSighash(transaction);
-        },
-        getMethodLabel(methodDetails) {
-            if (!methodDetails) return null;
-            return methodDetails.label ? methodDetails.label : null;
-        },
-        getSighash(transaction) {
-            return transaction.data && transaction.data != '0x' ? transaction.data.slice(0, 10) : null;
+    if (item.state == 'syncing') return 'syncing';
+
+    if (!item.receipt) return 'unknown';
+
+    const receipt = item.receipt;
+    if (receipt.status !== null && receipt.status !== undefined)
+        return receipt.status ? 'succeeded' : 'failed';
+
+    if (receipt.root && receipt.root != '0x' && parseInt(receipt.cumulativeGasUsed) >= parseInt(receipt.gasUsed))
+        return 'succeeded';
+
+    return 'failed';
+};
+
+watch(currentOptions, (newOptions, oldOptions) => {
+    if (JSON.stringify(newOptions) !== JSON.stringify(oldOptions))
+        getTransactions(newOptions);
+}, { deep: false });
+
+onMounted(() => {
+    currentOptions.value.sortBy = [{ key: props.blockNumber ? 'timestamp' : 'blockNumber', order: 'desc' }];
+
+    if (props.dense)
+        headers.value = [
+            { title: 'Txn Hash', key: 'hash', align: 'start' },
+            { title: 'Mined On', key: 'timestamp' },
+            { title: 'From', key: 'from' }
+        ];
+    else
+        headers.value = [
+            { title: 'Txn Hash', key: 'hash', align: 'start' },
+            { title: 'Method', key: 'method', sortable: false },
+            { title: 'Block', key: 'blockNumber', sortable: !props.blockNumber },
+            { title: 'Mined On', key: 'timestamp' },
+            { title: 'From', key: 'from' },
+            { title: 'To', key: 'to' },
+            { title: 'Value', key: 'value' },
+            { title: 'Fee', key: 'fee', sortable: false }
+        ];
+
+    pusherUnsubscribe.value = $pusher.onNewTransaction(transaction => {
+        if (lastUpdatedAt.value && Date.now() - lastUpdatedAt.value < DEBOUNCING_DELAY)
+            return;
+
+        if (props.blockNumber) {
+            if (transaction.blockNumber == props.blockNumber) {
+                getTransactions(currentOptions.value);
+            }
+        }
+        else if (props.address) {
+            if (transaction.from == props.address || transaction.to == props.address) {
+                getTransactions(currentOptions.value);
+            }
         }
-    },
-    computed: {
-        ...mapStores(useCurrentWorkspaceStore)
+        else {
+            getTransactions(currentOptions.value);
+        }
+    }, props.address);
+});
+
+onUnmounted(() => {
+    if (pusherUnsubscribe.value) {
+        pusherUnsubscribe.value();
+        pusherUnsubscribe.value = null;
     }
-}
+});
+
 </script>
 <style scoped>
 /deep/ .isSyncing {
diff --git a/src/main.js b/src/main.js
index 04005b09..cfff99ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import 'vuetify/styles'
-import { createApp } from 'vue';
+import { createApp } from 'vue/dist/vue.esm-bundler';
 import * as Sentry from "@sentry/vue";
 
 import vuetify from './plugins/vuetify';
diff --git a/src/plugins/pusher.js b/src/plugins/pusher.js
index e720c39b..db07667f 100644
--- a/src/plugins/pusher.js
+++ b/src/plugins/pusher.js
@@ -132,5 +132,6 @@ export default {
         }
 
         app.config.globalProperties.$pusher = $pusher;
+        app.provide('$pusher', $pusher);
     }
 };
diff --git a/tests/unit/components/TransactionsList.spec.js b/tests/unit/components/TransactionsList.spec.js
index aa783d11..f7e879f8 100644
--- a/tests/unit/components/TransactionsList.spec.js
+++ b/tests/unit/components/TransactionsList.spec.js
@@ -46,7 +46,11 @@ describe('TransactionsList.vue', () => {
                 withCount: true
             },
             global: {
-                stubs: ['Hash-Link']
+                stubs: ['Hash-Link'],
+                provide: {
+                    $server: server,
+                    $pusher: pusher
+                }
             }
         });
         await new Promise(process.nextTick);
@@ -66,6 +70,12 @@ describe('TransactionsList.vue', () => {
         const wrapper = mount(TransactionsList, {
             props: {
                 withCount: true
+            },
+            global: {
+                provide: {
+                    $server: server,
+                    $pusher: pusher
+                }
             }
         });
         await new Promise(process.nextTick);
diff --git a/tests/unit/components/__snapshots__/AddressTransactionsList.spec.js.snap b/tests/unit/components/__snapshots__/AddressTransactionsList.spec.js.snap
index 3ff9f6f3..b4dfb4a4 100644
--- a/tests/unit/components/__snapshots__/AddressTransactionsList.spec.js.snap
+++ b/tests/unit/components/__snapshots__/AddressTransactionsList.spec.js.snap
@@ -2,6 +2,6 @@
 
 exports[`AddressTransactionsList.vue > Should display the list 1`] = `
 "<div class="v-container v-container--fluid v-locale--is-ltr">
-  <transactions-list-stub address="0x123" currentaddress="0x123"></transactions-list-stub>
+  <transactions-list-stub address="0x123" currentaddress="0x123" dense="false" withcount="false"></transactions-list-stub>
 </div>"
 `;
diff --git a/tests/unit/components/__snapshots__/Block.spec.js.snap b/tests/unit/components/__snapshots__/Block.spec.js.snap
index ce6bdd06..808591b2 100644
--- a/tests/unit/components/__snapshots__/Block.spec.js.snap
+++ b/tests/unit/components/__snapshots__/Block.spec.js.snap
@@ -90,7 +90,7 @@ exports[`Block.vue > Should show a message if the block is syncing 1`] = `
     </div>
     <!---->
     <!---->
-    <transactions-list-stub blocknumber="1" withcount="true"></transactions-list-stub>
+    <transactions-list-stub blocknumber="1" dense="false" withcount="true"></transactions-list-stub>
     <!---->
     <!----><span class="v-card__underlay"></span>
   </div>
@@ -153,7 +153,7 @@ exports[`Block.vue > Should show the block component 1`] = `
     </div>
     <!---->
     <!---->
-    <transactions-list-stub blocknumber="1" withcount="true"></transactions-list-stub>
+    <transactions-list-stub blocknumber="1" dense="false" withcount="true"></transactions-list-stub>
     <!---->
     <!----><span class="v-card__underlay"></span>
   </div>
diff --git a/tests/unit/components/__snapshots__/Overview.spec.js.snap b/tests/unit/components/__snapshots__/Overview.spec.js.snap
index 8ad22d3d..fbe99781 100644
--- a/tests/unit/components/__snapshots__/Overview.spec.js.snap
+++ b/tests/unit/components/__snapshots__/Overview.spec.js.snap
@@ -91,7 +91,7 @@ exports[`Overview.vue > Should load the overview page 1`] = `
           <!---->
         </div>
         <!---->
-        <transactions-list-stub dense="true" class="px-4 pb-4"></transactions-list-stub>
+        <transactions-list-stub dense="true" withcount="false" class="px-4 pb-4"></transactions-list-stub>
         <!---->
         <!----><span class="v-card__underlay"></span>
       </div>
diff --git a/tests/unit/components/__snapshots__/Transactions.spec.js.snap b/tests/unit/components/__snapshots__/Transactions.spec.js.snap
index cee31b7f..c3438f6e 100644
--- a/tests/unit/components/__snapshots__/Transactions.spec.js.snap
+++ b/tests/unit/components/__snapshots__/Transactions.spec.js.snap
@@ -21,7 +21,7 @@ exports[`Transactions.vue > Should display the list 1`] = `
     <!---->
     <!---->
     <div class="v-card-text">
-      <transactions-list-stub></transactions-list-stub>
+      <transactions-list-stub dense="false" withcount="false"></transactions-list-stub>
     </div>
     <!---->
     <!----><span class="v-card__underlay"></span>
diff --git a/tests/unit/components/__snapshots__/TransactionsList.spec.js.snap b/tests/unit/components/__snapshots__/TransactionsList.spec.js.snap
index 93b953c9..3782d519 100644
--- a/tests/unit/components/__snapshots__/TransactionsList.spec.js.snap
+++ b/tests/unit/components/__snapshots__/TransactionsList.spec.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TransactionsList.vue > Should display a message if no transactions 1`] = `
-"<div data-v-40c8aafa="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table hide-table-count" item-key="hash">
+"<div data-v-40c8aafa="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table hide-table-count" dense="false" item-key="hash">
   <!---->
   <div class="v-table__wrapper">
     <table>
@@ -19,13 +19,13 @@ exports[`TransactionsList.vue > Should display a message if no transactions 1`]
               <!---->
             </div>
           </th>
-          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
-            <div class="v-data-table-header__content"><span>Block</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th--sorted v-data-table__th" colspan="1" rowspan="1">
+            <div class="v-data-table-header__content"><span>Block</span><i class="mdi-arrow-down mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
               <!---->
             </div>
           </th>
-          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th--sorted v-data-table__th" colspan="1" rowspan="1">
-            <div class="v-data-table-header__content"><span>Mined On</span><i class="mdi-arrow-down mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+            <div class="v-data-table-header__content"><span>Mined On</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
               <!---->
             </div>
           </th>
@@ -151,7 +151,7 @@ exports[`TransactionsList.vue > Should display a message if no transactions 1`]
 `;
 
 exports[`TransactionsList.vue > Should display the list 1`] = `
-"<div data-v-40c8aafa="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table hide-table-count" item-key="hash" transactions="[object Object],[object Object]">
+"<div data-v-40c8aafa="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table hide-table-count" dense="false" item-key="hash" transactions="[object Object],[object Object]">
   <!---->
   <div class="v-table__wrapper">
     <table>
@@ -169,13 +169,13 @@ exports[`TransactionsList.vue > Should display the list 1`] = `
               <!---->
             </div>
           </th>
-          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
-            <div class="v-data-table-header__content"><span>Block</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th--sorted v-data-table__th" colspan="1" rowspan="1">
+            <div class="v-data-table-header__content"><span>Block</span><i class="mdi-arrow-down mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
               <!---->
             </div>
           </th>
-          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th--sorted v-data-table__th" colspan="1" rowspan="1">
-            <div class="v-data-table-header__content"><span>Mined On</span><i class="mdi-arrow-down mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+          <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+            <div class="v-data-table-header__content"><span>Mined On</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
               <!---->
             </div>
           </th>