Create tests to Listing Component
Šī revīzija ir iekļauta:
vecāks
2c78a203b0
revīzija
98a5959369
@ -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<{
|
||||
|
@ -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" }}
|
135
src/components/ListingComponent/__tests__/ListingComponent.spec.ts
Parasts fails
135
src/components/ListingComponent/__tests__/ListingComponent.spec.ts
Parasts fails
@ -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);
|
||||
});
|
||||
});
|
@ -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";
|
||||
|
||||
|
@ -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();
|
||||
|
Notiek ielāde…
x
Atsaukties uz šo jaunā problēmā
Block a user