Improve test and withdraw input style

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -56,7 +56,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="w-full max-w-4xl lg-view">
       <ListingComponent
-        :deposit-list="[]"
+        :valid-deposits="[]"
         :walletTransactions="lastWalletReleaseTransactions"
         :isManageMode="false"
       >

src/components/ListingComponent/ListingComponent.vue

@@ -9,7 +9,7 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  depositList: ValidDeposit[];
+  validDeposits: ValidDeposit[];
   walletTransactions: Event[];
 }>();
 
@@ -32,10 +32,10 @@ const callWithdraw = async () => {
 };
 
 const getRemaining = (): number => {
-  if (props.depositList instanceof Array) {
+  if (props.validDeposits instanceof Array) {
     // Here we are getting only the first element of the list because
     // in this release only the BRL token is being used.
-    const deposit = props.depositList[0]; 
+    const deposit = props.validDeposits[0];
     return deposit ? deposit.remaining : 0;
   }
   return 0;
@@ -115,18 +115,17 @@ showInitialItems();
         </div>
       </div>
       <div class="pt-5">
-        <div class="py-2">
+        <div class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
             name=""
             id=""
             placeholder="0"
-            class="text-2xl"
+            class="text-2xl text-gray-900 w-full outline-none"
             v-model="withdrawAmount"
           />
         </div>
-
         <hr class="pb-3" />
         <div class="flex justify-end items-center">
           <div

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

@@ -13,8 +13,8 @@ describe("ListingComponent.vue", () => {
   test("Test Message when an empty array is received", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
-        walletTransactions: []
+        validDeposits: [],
+        walletTransactions: [],
       },
     });
 
@@ -24,7 +24,7 @@ describe("ListingComponent.vue", () => {
   test("Test number of elements in the list first render", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
+        validDeposits: [],
         walletTransactions: MockEvents,
       },
     });
@@ -37,8 +37,8 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
-        walletTransactions: [],
+        validDeposits: MockValidDeposits,
+        walletTransactions: MockEvents,
       },
     });
     const btn = wrapper.find("button");
@@ -50,13 +50,13 @@ describe("ListingComponent.vue", () => {
 
     elements = wrapper.findAll(".item-container");
 
-    expect(elements).toHaveLength(5);
+    expect(elements).toHaveLength(4);
   });
 
   test("Test withdraw offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
+        validDeposits: MockValidDeposits,
         walletTransactions: MockEvents,
       },
     });