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

.github/workflows/ci.yml

@@ -1,6 +1,10 @@
 name: CI script
 
-on: push 
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
  
 jobs:
   lint:
@@ -37,4 +41,24 @@ jobs:
         run: vercel pull --yes --token=${{ secrets.VERCEL_AUTH_TOKEN }}
 
       - name: 📦 Build staging app artifacts
-        run: vercel build --token=${{ secrets.VERCEL_AUTH_TOKEN }}
+        run: vercel build --token=${{ secrets.VERCEL_AUTH_TOKEN }}
+
+  test-coverage:
+    name: SonarCloud
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 
+
+      - name: 🏗 Install dependencies
+        run: yarn
+
+      - name: 📦 Test and coverage
+        run: yarn coverage
+
+      - name: 📦 SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

README.md

@@ -3,6 +3,13 @@
 </p>
 <br />
 
+<center>
+
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=liftlearning_P2Pix-Front-End&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=liftlearning_P2Pix-Front-End)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=liftlearning_P2Pix-Front-End&metric=coverage)](https://sonarcloud.io/summary/new_code?id=liftlearning_P2Pix-Front-End)
+
+</center>
+
 This application aims to create a democratic and secure solution for the purchase and sale of ERC20 tokens, through the PIX, integrating the functionalities of smart contracts (smart contracts) of the blockchain with a receipt by digital signature. Allowing the integration of national financial system transactions to public blockchains, dispensing with custody through intermediaries.
 
 # Table of Contents

babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
+      },
+    ],
+  ],
+  env: {
+    test: {
+      presets: [
+        ["@babel/preset-env", { targets: { node: "current" } }],
+        "@babel/preset-typescript",
+      ],
+    },
+  },
+};

package.json

@@ -1,11 +1,13 @@
 {
   "name": "p2pix-front-end",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts": {
     "start": "vite --host=0.0.0.0 --port 3000",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
+    "test": "vitest",
     "serve": "vue-cli-service serve",
+    "coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
@@ -25,27 +27,35 @@
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@pinia/testing": "^0.0.14",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/crc": "^3.8.0",
+    "@types/jest": "^27.0.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^16.11.68",
     "@types/qrcode": "^1.5.0",
     "@types/vue-markdown": "^2.2.1",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitest/coverage-c8": "^0.28.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.2.7",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.12",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "ethers": "^5.7.2",
+    "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.2.1",
     "typescript": "~4.7.4",
     "vite": "^3.1.8",
+    "vitest": "^0.28.1",
     "vue-tsc": "^1.0.8"
   }
 }

sonar-project.properties

@@ -0,0 +1,8 @@
+sonar.organization=liftlearning
+sonar.projectKey=liftlearning_P2Pix-Front-End
+sonar.sources=src/
+
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+sonar.exclusions=dist/**
+sonar.coverage.exclusions=**/*.spec.*

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TopBar from "./components/TopBar.vue";
+import TopBar from "./components/TopBar/TopBar.vue";
 </script>
 
 <template>
@@ -12,5 +12,3 @@ import TopBar from "./components/TopBar.vue";
     </template>
   </RouterView>
 </template>
-
-<style scoped></style>

src/assets/base.css

@@ -19,10 +19,7 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
 
-/* semantic color variables for this project */
-:root {
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);

src/blockchain/__tests__/addresses.spec.ts

@@ -0,0 +1,110 @@
+import { expectTypeOf, it, expect } from "vitest";
+import {
+  getTokenAddress,
+  getP2PixAddress,
+  getProviderUrl,
+  isPossibleNetwork,
+  possibleChains,
+  network2Chain,
+} from "../addresses";
+
+import { setActivePinia, createPinia } from "pinia";
+import { NetworkEnum } from "@/model/NetworkEnum";
+import { useEtherStore } from "@/store/ether";
+
+describe("addresses.ts types", () => {
+  it("My addresses.ts types work properly", () => {
+    expectTypeOf(getTokenAddress).toBeFunction();
+    expectTypeOf(getP2PixAddress).toBeFunction();
+    expectTypeOf(getProviderUrl).toBeFunction();
+    expectTypeOf(isPossibleNetwork).toBeFunction();
+
+    expectTypeOf(possibleChains).toBeObject();
+    expectTypeOf(network2Chain).toBeObject();
+  });
+});
+
+describe("addresses.ts functions", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("getTokenAddress Ethereum", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.ethereum);
+    expect(getTokenAddress()).toBe(
+      "0x294003F602c321627152c6b7DED3EAb5bEa853Ee"
+    );
+  });
+
+  it("getTokenAddress Polygon", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.polygon);
+    expect(getTokenAddress()).toBe(
+      "0x294003F602c321627152c6b7DED3EAb5bEa853Ee"
+    );
+  });
+
+  it("getTokenAddress Default", () => {
+    expect(getTokenAddress()).toBe(
+      "0x294003F602c321627152c6b7DED3EAb5bEa853Ee"
+    );
+  });
+
+  it("getP2PixAddress Ethereum", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.ethereum);
+    expect(getP2PixAddress()).toBe(
+      "0x5f3EFA9A90532914545CEf527C530658af87e196"
+    );
+  });
+
+  it("getP2PixAddress Polygon", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.polygon);
+    expect(getP2PixAddress()).toBe(
+      "0x5f3EFA9A90532914545CEf527C530658af87e196"
+    );
+  });
+
+  it("getP2PixAddress Default", () => {
+    expect(getP2PixAddress()).toBe(
+      "0x5f3EFA9A90532914545CEf527C530658af87e196"
+    );
+  });
+
+  it("getProviderUrl Ethereum", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.ethereum);
+    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
+  });
+
+  it("getProviderUrl Polygon", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.polygon);
+    expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL);
+  });
+
+  it("getProviderUrl Default", () => {
+    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
+  });
+
+  it("isPossibleNetwork Returns", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.ethereum);
+    expect(isPossibleNetwork("0x5")).toBe(true);
+    expect(isPossibleNetwork("5")).toBe(true);
+    expect(isPossibleNetwork("0x13881")).toBe(true);
+    expect(isPossibleNetwork("80001")).toBe(true);
+
+    expect(isPossibleNetwork("")).toBe(false);
+    expect(isPossibleNetwork(" ")).toBe(false);
+    expect(isPossibleNetwork("0x55")).toBe(false);
+  });
+});
+
+describe("addresses.ts Unset Store", () => {
+  it("getProviderUrl Unset", () => {
+    expect(getProviderUrl()).toBe(undefined);
+  });
+});

src/blockchain/events.ts

@@ -55,7 +55,7 @@ const getValidDeposits = async (
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
 
-  p2pContract = getContract(); // get metamask provider contract
+  if (!contract) p2pContract = getContract(); // get metamask provider contract
 
   const depositList = await Promise.all(
     eventsDeposits.map(async (deposit) => {

src/blockchain/wallet.ts

@@ -75,7 +75,7 @@ const listAllTransactionByWalletAddress = async (
 const listReleaseTransactionByWalletAddress = async (
   walletAddress: string
 ): Promise<Event[]> => {
-  const p2pContract = getContract();
+  const p2pContract = getContract(true);
 
   const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
   const eventsReleasedLocks = await p2pContract.queryFilter(

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

src/model/mock/EventMock.ts

@@ -0,0 +1,92 @@
+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",
+  },
+];

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent;
+  export default component;
+}

src/svgTransform.js

@@ -0,0 +1,11 @@
+module.exports = {
+  process() {
+    return {
+      code: `module.exports = {};`,
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return "svgTransform";
+  },
+};

src/views/FaqView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Faq, Section } from "@/model/Faq";
+import type { Faq } from "@/model/Faq";
 import { ref } from "vue";
 import { marked } from "marked";
 
@@ -100,6 +100,7 @@ const openItem = (index: number) => {
         <h3
           :class="index == selectedSection ? 'selected-sumario' : 'sumario'"
           v-for="(f, index) in faq"
+          v-bind:key="f.name"
           @click="setSelectedSection(index)"
         >
           {{ f.name }}
@@ -107,7 +108,10 @@ const openItem = (index: number) => {
       </div>
 
       <div class="w-4/6">
-        <div v-for="(item, index) in faq[selectedSection].items">
+        <div
+          v-for="(item, index) in faq[selectedSection].items"
+          v-bind:key="item.title"
+        >
           <div class="flex cursor-pointer" @click="openItem(index)">
             <img
               alt="plus"

src/views/HomeView.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import SearchComponent from "../components/SearchComponent.vue";
-import ValidationComponent from "../components/LoadingComponent.vue";
-import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
+import SearchComponent from "@/components/SearchComponent.vue";
+import ValidationComponent from "@/components/LoadingComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
 import { ref, onMounted } from "vue";
-
 import { useEtherStore } from "@/store/ether";
-import QrCodeComponent from "../components/QrCodeComponent.vue";
+import QrCodeComponent from "@/components/QrCodeComponent.vue";
 import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
-import { updateWalletStatus } from "@/blockchain/wallet";
+import {
+  updateWalletStatus,
+  listReleaseTransactionByWalletAddress,
+} from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
-import { listReleaseTransactionByWalletAddress } from "@/blockchain/wallet";
 import type { Event } from "ethers";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 
@@ -118,5 +119,3 @@ onMounted(async () => {
     />
   </div>
 </template>
-
-<style scoped></style>

src/views/ManageBidsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import type { BigNumber } from "ethers";
 import { ref, watch, onMounted } from "vue";
 import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods";
@@ -26,7 +26,7 @@ onMounted(async () => {
 
 const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
   const response = await cancelDeposit(depositID);
-  if (response == true) {
+  if (response) {
     console.log("Depósito cancelado com sucesso.");
     depositList.value.splice(index, 1);
   }
@@ -34,7 +34,7 @@ const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
 
 const handleWithDrawDeposit = async (depositID: BigNumber, index: number) => {
   const response = await withdrawDeposit(depositID);
-  if (response == true) {
+  if (response) {
     console.log("Token retirado com sucesso.");
     depositList.value.splice(index, 1);
   }

src/views/SellerView.vue

@@ -75,5 +75,3 @@ const sendNetwork = async () => {
     />
   </div>
 </template>
-
-<style scoped></style>

src/views/TransactionHistoryView.vue

@@ -2,7 +2,7 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { ref, watch, onMounted } from "vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
 import type { Event } from "ethers";
 import type { ValidDeposit } from "@/model/ValidDeposit";

tsconfig.json

@@ -6,6 +6,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
+    "types": ["jest", "node"],
     "resolveJsonModule": true
   },
 

vite.config.ts

@@ -1,11 +1,21 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vite";
+import { defineConfig } from "vitest/config";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    coverage: {
+      provider: "c8",
+      all: true,
+      src: ["./src"],
+      reporter: ["text", "lcov", "html"],
+    },
+  },
   plugins: [vue(), vueJsx()],
   resolve: {
     alias: {