Merge branch 'develop' of https://github.com/liftlearning/P2Pix-Front-End into responsividade

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import type { Event } from "ethers";
 
 // props

src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts

@@ -0,0 +1,38 @@
+import { shallowMount } from "@vue/test-utils";
+import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
+import { createPinia, setActivePinia } from "pinia";
+import { MockEvents } from "@/model/mock/EventMock";
+
+describe("BuyConfirmedComponent.vue", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const wrapper = shallowMount(BuyConfirmedComponent, {
+    props: {
+      lastWalletReleaseTransactions: MockEvents,
+      tokenAmount: 1,
+    },
+  });
+
+  test("Test component Header Text", () => {
+    expect(wrapper.html()).toContain("Os tokens já foram transferidos");
+    expect(wrapper.html()).toContain("para a sua carteira!");
+  });
+
+  test("Test component Container Text", () => {
+    expect(wrapper.html()).toContain("Tokens recebidos");
+    expect(wrapper.html()).toContain("BRZ");
+    expect(wrapper.html()).toContain("Não encontrou os tokens?");
+    expect(wrapper.html()).toContain("Clique no botão abaixo para");
+    expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
+  });
+
+  test("Test makeAnotherTransactionEmit", async () => {
+    wrapper.vm.$emit("makeAnotherTransaction");
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("makeAnotherTransaction")).toBeTruthy();
+  });
+});

src/components/CustomButton/__tests__/CustomButton.spec.ts

@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import CustomButton from "../CustomButton.vue";
+
+describe("CustomButton.vue", () => {
+  test("Test button content", () => {
+    const wrapper = mount(CustomButton, {
+      props: {
+        text: "Testing",
+      },
+    });
+
+    expect(wrapper.html()).toContain("Testing");
+  });
+
+  test("Test if disabled props works", () => {
+    const wrapper = mount(CustomButton, {
+      props: {
+        isDisabled: true,
+      },
+    });
+
+    //@ts-ignore
+    const button = wrapper.find(".button") as HTMLButtonElement;
+    //@ts-ignore
+    expect(button.element.disabled).toBe(true);
+  });
+});

src/components/ListingComponent/ListingComponent.vue

@@ -3,7 +3,7 @@ import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { useEtherStore } from "@/store/ether";
 import { formatEther } from "@ethersproject/units";
-import type { Event } from "ethers";
+import type { BigNumber, Event } from "ethers";
 import { ref, watch } from "vue";
 
 // props
@@ -55,6 +55,11 @@ const getEventName = (event: string | undefined): string => {
   return possibleEventName[event];
 };
 
+const getAmountFormatted = (amount?: BigNumber): string => {
+  if (!amount) return "";
+  return formatEther(amount);
+};
+
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -99,13 +104,14 @@ showInitialItems();
     >
       <span class="last-release-info">
         {{
-          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
+          isValidDeposit(item)
+            ? item.remaining
+            : getAmountFormatted(item.args?.amount)
         }}
         BRZ
       </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>
 
       <span class="last-release-info" v-if="!props.isManageMode">
         {{ getEventName((item as Event).event) }}
@@ -137,7 +143,7 @@ showInitialItems();
         "
       >
         <span class="last-release-info">Retirar</span>
-        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+        <img alt="Withdraw image" src="@/assets/withdraw.svg" />
       </div>
     </div>
     <div

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

@@ -0,0 +1,100 @@
+import { mount } from "@vue/test-utils";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
+import { createPinia, setActivePinia } from "pinia";
+import { expect } from "vitest";
+import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
+import { MockEvents } from "@/model/mock/EventMock";
+
+describe("ListingComponent.vue", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test("Test Headers on List in Manage Mode", () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: MockValidDeposits,
+        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: MockEvents,
+        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: MockEvents,
+        isManageMode: false,
+      },
+    });
+
+    const elements = wrapper.findAll(".transaction-date");
+
+    expect(elements).toHaveLength(3);
+  });
+
+  test("Test load more button behavior", async () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: MockValidDeposits,
+        isManageMode: false,
+      },
+    });
+    const btn = wrapper.find("button");
+
+    let elements = wrapper.findAll(".transaction-date");
+    expect(elements).toHaveLength(3);
+
+    await btn.trigger("click");
+
+    elements = wrapper.findAll(".transaction-date");
+
+    expect(elements).toHaveLength(5);
+  });
+
+  test("Test cancel offer button emit", async () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        walletTransactions: MockValidDeposits,
+        isManageMode: true,
+      },
+    });
+    wrapper.vm.$emit("cancelDeposit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("cancelDeposit")).toBeTruthy();
+  });
+
+  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/components/QrCodeComponent.vue

@@ -45,11 +45,11 @@ const validatePix = async (): Promise<void> => {
     isCodeInputEmpty.value = true;
     return;
   }
-  var sellerPixKey = props.pixTarget;
-  var transactionValue = props.tokenValue;
+  const sellerPixKey = props.pixTarget;
+  const transactionValue = props.tokenValue;
 
   if (sellerPixKey && transactionValue) {
-    var body_req = {
+    const body_req = {
       e2e_id: e2eId.value,
       pix_key: sellerPixKey,
       pix_value: transactionValue,
@@ -73,7 +73,9 @@ const validatePix = async (): Promise<void> => {
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]">
+      <span
+        class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]"
+      >
         Utilize o QR Code ou copie o código para realizar o Pix
       </span>
       <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
@@ -85,7 +87,7 @@ const validatePix = async (): Promise<void> => {
       <div
         class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
       >
-        <img :src="qrCode" class="sm:w-48 sm:h-48 w-40 h-40" />
+        <img alt="Qr code image" :src="qrCode" class="w-48 h-48" />
         <span class="text-center font-bold">Código pix</span>
         <div class="break-words w-4/5">
           <span class="text-center text-xs">
@@ -193,10 +195,6 @@ h2 {
   transform: translateX(50%);
 }
 
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
 .text-container {
   @apply flex flex-col items-center justify-center gap-4;
 }

src/components/SearchComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import CustomButton from "../components/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import CustomButton from "../../components/CustomButton.vue";
+import CustomButton from "../CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 

src/components/SellerSteps/SendNetwork.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
 
 // Emits
 const emit = defineEmits(["sendNetwork"]);

src/components/SellerSteps/WantSellComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import CustomButton from "../CustomButton.vue";
+import CustomButton from "../CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { useEtherStore } from "@/store/ether";

src/components/TopBar/TopBar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { useEtherStore } from "../store/ether";
+import { useEtherStore } from "@/store/ether";
 import { ref } from "vue";
 import { NetworkEnum } from "@/model/NetworkEnum";
-import { connectProvider, requestNetworkChange } from "../blockchain/provider";
-import ethereumImage from "../assets/ethereum.svg";
-import polygonImage from "../assets/polygon.svg";
+import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
+import ethereumImage from "@/assets/ethereum.svg";
+import polygonImage from "@/assets/polygon.svg";
 
 // Store reference
 const etherStore = useEtherStore();

src/components/TopBar/__tests__/TopBar.spec.ts

@@ -0,0 +1,35 @@
+/* eslint-disable no-undef */
+import { shallowMount } from "@vue/test-utils";
+import TopBar from "../TopBar.vue";
+import { useEtherStore } from "../../../store/ether";
+
+import { createPinia, setActivePinia } from "pinia";
+
+describe("TopBar.vue", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("should render connect wallet button", () => {
+    const wrapper = shallowMount(TopBar);
+    expect(wrapper.html()).toContain("Conectar carteira");
+  });
+
+  it("should render button to change to seller view when in buyer screen", () => {
+    const wrapper = shallowMount(TopBar);
+    expect(wrapper.html()).toContain("Quero vender");
+  });
+
+  it("should render button to change to seller view when in buyer screen", () => {
+    const etherStore = useEtherStore();
+    etherStore.setSellerView(true);
+    const wrapper = shallowMount(TopBar);
+    expect(wrapper.html()).toContain("Quero comprar");
+  });
+
+  it("should render the P2Pix logo correctly", () => {
+    const wrapper = shallowMount(TopBar);
+    const img = wrapper.findAll(".logo");
+    expect(img.length).toBe(1);
+  });
+});