From 98a5959369a8de93f452bc2ca8bb7d43408e5e17 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 16 Jan 2023 11:23:30 -0300
Subject: [PATCH] Create tests to Listing Component

---
 .../BuyConfirmedComponent.vue                 |   2 +-
 .../ListingComponent.vue                      |   8 +-
 .../__tests__/ListingComponent.spec.ts        | 135 ++++++++++++++++++
 src/views/ManageBidsView.vue                  |   2 +-
 src/views/TransactionHistoryView.vue          |   2 +-
 5 files changed, 142 insertions(+), 7 deletions(-)
 rename src/components/{ => ListingComponent}/ListingComponent.vue (96%)
 create mode 100644 src/components/ListingComponent/__tests__/ListingComponent.spec.ts

diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index 50a33d5..ccd6634 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 
 // props
 const props = defineProps<{
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
similarity index 96%
rename from src/components/ListingComponent.vue
rename to src/components/ListingComponent/ListingComponent.vue
index a2f25cd..2a824eb 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -85,7 +85,7 @@ showInitialItems();
       </span>
 
       <!-- TODO: change this hardcoded date -->
-      <span class="last-release-info"> 20 out 2022 </span>
+      <span class="last-release-info transaction-date"> 20 out 2022 </span>
 
       <div
         v-if="props.isManageMode"
@@ -97,21 +97,21 @@ showInitialItems();
       </div>
 
       <span
-        class="last-release-info"
+        class="last-release-info transfer-type"
         v-if="item.event == 'DepositAdded' && !props.isManageMode"
       >
         {{ "Oferta" }}
       </span>
 
       <span
-        class="last-release-info"
+        class="last-release-info transfer-type"
         v-if="item.event == 'LockAdded' && !props.isManageMode"
       >
         {{ "Reserva" }}
       </span>
 
       <span
-        class="last-release-info"
+        class="last-release-info transfer-type"
         v-if="item.event == 'LockReleased' && !props.isManageMode"
       >
         {{ "Compra" }}
diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
new file mode 100644
index 0000000..c084ae9
--- /dev/null
+++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
@@ -0,0 +1,135 @@
+import { mount } from "@vue/test-utils";
+import ListingComponent from "../ListingComponent.vue";
+
+const depositsMocked = [
+  {
+    depositId: 1,
+    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", () => {
+  test("Test Headers on List in Manage Mode", () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: depositsMocked,
+        isManageMode: true,
+      },
+    });
+
+    expect(wrapper.html()).toContain("Valor");
+    expect(wrapper.html()).toContain("Data");
+    expect(wrapper.html()).toContain("Cancelar oferta");
+    expect(wrapper.html()).toContain("Retirar tokens");
+  });
+
+  test("Test Headers on List in Unmanage Mode", () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: depositsMocked,
+        isManageMode: false,
+      },
+    });
+
+    expect(wrapper.html()).toContain("Valor");
+    expect(wrapper.html()).toContain("Data");
+    expect(wrapper.html()).toContain("Tipo de transação");
+    expect(wrapper.html()).toContain("Checar transação");
+  });
+
+  test("Test number of elements in the list first render", () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: depositsMocked,
+        isManageMode: false,
+      },
+    });
+
+    const elements = wrapper.findAll(".transfer-type");
+
+    expect(elements).toHaveLength(3);
+  });
+
+  test("Test load more button behavior", async () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: depositsMocked,
+        isManageMode: false,
+      },
+    });
+
+    const btn = wrapper.find("button");
+    await btn.trigger("click");
+
+    let elements = wrapper.findAll(".transfer-type");
+
+    expect(elements).toHaveLength(6);
+
+    await btn.trigger("click");
+
+    elements = wrapper.findAll(".transfer-type");
+
+    expect(elements).toHaveLength(7);
+  });
+
+  test("Test cancel offer button", async () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: depositsMocked,
+        isManageMode: true,
+      },
+    });
+
+    const cancelButton = wrapper.find('img[alt="Cancel image"]');
+    await cancelButton.trigger("click");
+
+    const elements = wrapper.findAll(".transaction-date");
+
+    expect(elements).toHaveLength(2);
+  });
+});
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 9552912..4b7b7e8 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -2,7 +2,7 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import type { BigNumber } from "ethers";
 import { ref, watch } from "vue";
 
diff --git a/src/views/TransactionHistoryView.vue b/src/views/TransactionHistoryView.vue
index 22c555f..72ce00e 100644
--- a/src/views/TransactionHistoryView.vue
+++ b/src/views/TransactionHistoryView.vue
@@ -2,7 +2,7 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import blockchain from "../utils/blockchain";
 
 const etherStore = useEtherStore();