Merge branch 'responsividade' 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
@@ -31,7 +31,8 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         </div>
         <div class="my-5">
           <p class="text-sm">
-            <b>Não encontrou os tokens? </b><br/>Clique no botão abaixo para <br />
+            <b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
+            <br />
             cadastrar o BRZ em sua carteira.
           </p>
         </div>
@@ -50,7 +51,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="text-container mt-16 lg-view">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Histórico de compras
+        >Gerenciar transações
       </span>
     </div>
     <div class="w-full max-w-4xl lg-view">
@@ -60,7 +61,10 @@ const emit = defineEmits(["makeAnotherTransaction"]);
       >
       </ListingComponent>
     </div>
-    <RouterLink to="/transaction_history" class="mt-8 text-white text-2xl font-bold">
+    <RouterLink
+      to="/transaction_history"
+      class="mt-8 text-white text-2xl font-bold"
+    >
       Gerenciar Transações
     </RouterLink>
   </div>

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;
@@ -69,75 +74,73 @@ watch(props, async (): Promise<void> => {
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 
-// initial itemsToShow value
+// initial itemsToShow valueb
 showInitialItems();
 </script>
 
 <template>
   <div class="blur-container">
     <div
-      class="grid grid-cols-4 grid-flow-row w-full px-6"
-      v-if="itemsToShow.length != 0"
-    >
-      <span class="text-xs text-gray-50 font-medium justify-self-center"
-        >Valor</span
-      >
-      <span class="text-xs text-gray-50 font-medium justify-self-center"
-        >Data</span
-      >
-      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
-        props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
-      }}</span>
-      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
-        props.isManageMode ? "Retirar tokens" : "Checar transação"
-      }}</span>
-    </div>
-    <div
-      class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
+      class="w-full bg-white p-6 rounded-lg"
       v-for="(item, index) in itemsToShow"
       :key="item.blockNumber"
     >
-      <span class="last-release-info">
-        {{
-          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
-        }}
-        BRZ
-      </span>
-
-      <!-- TODO: change this hardcoded date -->
-      <span class="last-release-info"> 20 out 2022 </span>
-
-      <span class="last-release-info" v-if="!props.isManageMode">
-        {{ getEventName((item as Event).event) }}
-      </span>
-
-      <div
-        v-if="!props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="openEtherscanUrl((item as Event)?.transactionHash)"
-      >
-        <span class="last-release-info">Etherscan</span>
-        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      <div class="flex justify-between items-center">
+        <div>
+          <p class="text-sm leading-5 font-medium text-gray-600">
+            {{ getEventName((item as Event).event) }}
+          </p>
+          <p class="text-xl leading-7 font-semibold text-gray-900">
+            {{
+              isValidDeposit(item)
+                ? item.remaining
+                : getAmountFormatted(item.args?.amount)
+            }}
+            BRZ
+          </p>
+          <p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
+        </div>
+        <div>
+          <div class="bg-emerald-300 rounded-lg text-center mb-2">
+            Finalizado
+          </div>
+          <div
+            v-if="!props.isManageMode"
+            class="flex gap-2 cursor-pointer items-center justify-self-center"
+            @click="openEtherscanUrl((item as Event)?.transactionHash)"
+          >
+            <span class="last-release-info">Etherscan</span>
+            <img alt="Redirect image" src="@/assets/redirect.svg" />
+          </div>
+        </div>
       </div>
+      <div class="pt-5" v-if="props.isManageMode">
+        <!-- <div class="py-2">
+          <p class="text-sm leading-5 font-medium">Valor do saque</p>
+          <p class="text-2xl leading-8 font-medium">0</p>
+        </div> -->
 
-      <div
-        v-if="props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
-      >
-        <span class="last-release-info">Cancelar</span>
-        <img alt="Cancel image" src="@/assets/cancel.svg" />
-      </div>
+        <hr class="pb-3" />
+        <div class="flex justify-between items-center">
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center"
+            @click="
+              emit('cancelDeposit', (item as ValidDeposit).depositID, index)
+            "
+          >
+            <span class="last-release-info">Cancelar</span>
+          </div>
 
-      <div
-        v-if="props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="
-          emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
-        "
-      >
-        <span class="last-release-info">Retirar</span>
-        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="
+              emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
+            "
+          >
+            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <span class="last-release-info">Sacar</span>
+          </div>
+        </div>
       </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

@@ -2,7 +2,7 @@
 import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
 import { debounce } from "@/utils/debounce";
-import CustomButton from "./CustomButton.vue";
+import CustomButton from "./CustomButton/CustomButton.vue";
 import CustomModal from "./CustomModal.vue";
 import api from "../services/index";
 
@@ -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">
@@ -196,10 +198,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);
+  });
+});