Improve and fix ListingComponent test and add mocks for event and valid deposit

src/components/ListingComponent/__tests__/ListingComponent.spec.ts

@@ -1,63 +1,19 @@
 import { mount } from "@vue/test-utils";
-import ListingComponent from "../ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-
+import { createPinia, setActivePinia } from "pinia";
-const depositsMocked = [
+import { expect } from 'vitest'
-  {
+import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
-    depositId: 1,
+import { MockEvents } from "@/model/mock/EventMock";
-    event: "DepositAdded",
-    args: {
-      amount: 100,
-    },
-  },
-  {
-    depositId: 2,
-    event: "DepositAdded",
-    args: {
-      amount: 200,
-    },
-  },
-  {
-    depositId: 3,
-    event: "DepositAdded",
-    args: {
-      amount: 300,
-    },
-  },
-  {
-    depositId: 4,
-    event: "DepositAdded",
-    args: {
-      amount: 400,
-    },
-  },
-  {
-    depositId: 5,
-    event: "DepositAdded",
-    args: {
-      amount: 500,
-    },
-  },
-  {
-    depositId: 6,
-    event: "DepositAdded",
-    args: {
-      amount: 600,
-    },
-  },
-  {
-    depositId: 7,
-    event: "DepositAdded",
-    args: {
-      amount: 700,
-    },
-  },
-];
 
 describe("ListingComponent.vue", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
   test("Test Headers on List in Manage Mode", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        walletTransactions: depositsMocked,
+        walletTransactions: MockValidDeposits,
         isManageMode: true,
       },
     });
@@ -71,7 +27,7 @@ describe("ListingComponent.vue", () => {
   test("Test Headers on List in Unmanage Mode", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        walletTransactions: depositsMocked,
+        walletTransactions: MockEvents,
         isManageMode: false,
       },
     });
@@ -85,12 +41,12 @@ describe("ListingComponent.vue", () => {
   test("Test number of elements in the list first render", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        walletTransactions: depositsMocked,
+        walletTransactions: MockEvents,
         isManageMode: false,
       },
     });
 
-    const elements = wrapper.findAll(".transfer-type");
+    const elements = wrapper.findAll(".transaction-date");
 
     expect(elements).toHaveLength(3);
   });
@@ -98,38 +54,47 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        walletTransactions: depositsMocked,
+        walletTransactions: MockValidDeposits,
         isManageMode: false,
       },
     });
-
     const btn = wrapper.find("button");
-    await btn.trigger("click");
 
-    let elements = wrapper.findAll(".transfer-type");
+    let elements = wrapper.findAll(".transaction-date");
-
+    expect(elements).toHaveLength(3);
-    expect(elements).toHaveLength(6);
 
     await btn.trigger("click");
 
-    elements = wrapper.findAll(".transfer-type");
+    elements = wrapper.findAll(".transaction-date");
 
-    expect(elements).toHaveLength(7);
+    expect(elements).toHaveLength(5);
   });
 
-  test("Test cancel offer button", async () => {
+  test("Test cancel offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        walletTransactions: depositsMocked,
+        walletTransactions: MockValidDeposits,
         isManageMode: true,
       },
     });
+    wrapper.vm.$emit("cancelDeposit");
 
-    const cancelButton = wrapper.find('img[alt="Cancel image"]');
+    await wrapper.vm.$nextTick();
-    await cancelButton.trigger("click");
 
-    const elements = wrapper.findAll(".transaction-date");
+    expect(wrapper.emitted("cancelDeposit")).toBeTruthy();
+  });
 
-    expect(elements).toHaveLength(2);
+  test("Test withdraw offer button emit", async () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: MockValidDeposits,
+        isManageMode: true,
+      },
+    });
+    wrapper.vm.$emit("withdrawDeposit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("withdrawDeposit")).toBeTruthy();
   });
 });

src/model/mock/EventMock.ts

@@ -0,0 +1,101 @@
+import type { Event } from "ethers";
+import { vi } from "vitest";
+
+export const MockEvents: Event[] = [
+    {
+        "blockNumber": 1,
+        "blockHash": "0x8",
+        "transactionIndex": 1,
+        "removed": false,
+        "address": "0x0",
+        "data": "0x0",
+        "topics": [
+            "0x0",
+            "0x0"
+        ],
+        "transactionHash": "0x0",
+        "logIndex": 1,
+        "event": "DepositAdded",
+        "eventSignature": "DepositAdded(address,uint256,address,uint256)",
+        "args": [
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x00"
+            },
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x6c6b935b8bbd400000"
+            },
+        ],
+        getBlock: vi.fn(),
+        removeListener: vi.fn(),
+        getTransaction: vi.fn(),
+        getTransactionReceipt: vi.fn(),
+    },
+    {
+        "blockNumber": 2,
+        "blockHash": "0x8",
+        "transactionIndex": 2,
+        "removed": false,
+        "address": "0x0",
+        "data": "0x0",
+        "topics": [
+            "0x0",
+            "0x0"
+        ],
+        "transactionHash": "0x0",
+        "logIndex": 2,
+        "event": "LockAdded",
+        "eventSignature": "LockAdded(address,uint256,address,uint256)",
+        "args": [
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x00"
+            },
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x6c6b935b8bbd400000"
+            },
+        ],
+        getBlock: vi.fn(),
+        removeListener: vi.fn(),
+        getTransaction: vi.fn(),
+        getTransactionReceipt: vi.fn(),
+    },
+    {
+        "blockNumber": 3,
+        "blockHash": "0x8",
+        "transactionIndex": 3,
+        "removed": false,
+        "address": "0x0",
+        "data": "0x0",
+        "topics": [
+            "0x0",
+            "0x0"
+        ],
+        "transactionHash": "0x0",
+        "logIndex": 3,
+        "event": "LockReleased",
+        "eventSignature": "LockReleased(address,uint256,address,uint256)",
+        "args": [
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x00"
+            },
+            "0x0",
+            {
+                "type": "BigNumber",
+                "hex": "0x6c6b935b8bbd400000"
+            },
+        ],
+        getBlock: vi.fn(),
+        removeListener: vi.fn(),
+        getTransaction: vi.fn(),
+        getTransactionReceipt: vi.fn(),
+    }
+  ];

src/model/mock/ValidDepositMock.ts

@@ -0,0 +1,40 @@
+import { parseEther } from "ethers/lib/utils";
+import type { ValidDeposit } from "../ValidDeposit";
+
+export const MockValidDeposits: ValidDeposit[] = [
+    {
+        "blockNumber": 1,
+        "depositID": parseEther("1"),
+        "remaining": 70,
+        "seller": "mockedSellerAddress",
+        "pixKey": "123456789"
+    },
+    {
+        "blockNumber": 2,
+        "depositID": parseEther("2"),
+        "remaining": 200,
+        "seller": "mockedSellerAddress",
+        "pixKey": "123456789"
+    },
+    {
+        "blockNumber": 3,
+        "depositID": parseEther("3"),
+        "remaining": 1250,
+        "seller": "mockedSellerAddress",
+        "pixKey": "123456789"
+    },
+    {
+        "blockNumber": 4,
+        "depositID": parseEther("4"),
+        "remaining": 4000,
+        "seller": "mockedSellerAddress",
+        "pixKey": "123456789"
+    },
+    {
+        "blockNumber": 5,
+        "depositID": parseEther("5"),
+        "remaining": 2000,
+        "seller": "mockedSellerAddress",
+        "pixKey": "123456789"
+    }
+  ]