fix tests

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,

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 {

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';

src/plugins/pusher.js

@@ -132,5 +132,6 @@ export default {
         }
 
         app.config.globalProperties.$pusher = $pusher;
+        app.provide('$pusher', $pusher);
     }
 };

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);

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>"
 `;

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>

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>

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>