Create tests to Listing Component

Šī revīzija ir iekļauta:
enzoggqs 2023-01-16 11:23:30 -03:00
vecāks 2c78a203b0
revīzija 98a5959369
5 mainīti faili ar 142 papildinājumiem un 7 dzēšanām

Parādīt failu

@ -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<{

Parādīt failu

@ -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" }}

Parādīt failu

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

Parādīt failu

@ -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";

Parādīt failu

@ -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();