DeckList test
This commit is contained in:
parent
090081c198
commit
6ccb3ea566
5 changed files with 48 additions and 14 deletions
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="cardpicker" :style="grid">
|
<section class="cardpicker" :style="grid">
|
||||||
<article
|
<article
|
||||||
@click="_picked(card.data)"
|
@click="() => _picked(card.data)"
|
||||||
class="ccgcard"
|
class="ccgcard"
|
||||||
v-for="(card, i) in cards"
|
v-for="(card, i) in cards"
|
||||||
:key="i + card.data.ID"
|
:key="i + card.data.ID"
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="decklist">
|
<section class="decklist">
|
||||||
<article @click="_drop(card)" v-for="(card, i) in cards" :key="i">
|
<article
|
||||||
|
class="card"
|
||||||
|
@click="() => _drop(card)"
|
||||||
|
v-for="(card, i) in cards"
|
||||||
|
:key="i"
|
||||||
|
>
|
||||||
<div class="amt">{{ card.howmany }}</div>
|
<div class="amt">{{ card.howmany }}</div>
|
||||||
<div class="fullname">
|
<div class="fullname">
|
||||||
<div class="name">{{ card.data.Name }}</div>
|
<div class="name">{{ card.data.Name }}</div>
|
||||||
|
@ -13,13 +18,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/assets/scss/_variables";
|
@import "@/assets/scss/_variables.scss";
|
||||||
|
|
||||||
.decklist {
|
.decklist {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
article {
|
.card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -27,7 +33,6 @@
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 5px 3px;
|
padding: 5px 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullname {
|
.fullname {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
||||||
import { shallowMount } from "@vue/test-utils";
|
import { shallowMount } from "@vue/test-utils";
|
||||||
import { CardSlot } from "@/mlpccg";
|
|
||||||
|
|
||||||
// Generate 10 test cards
|
// Generate 10 test cards
|
||||||
const testCards = new Array(10)
|
const testCards = new Array(10)
|
||||||
|
|
30
src/tests/unit/components/DeckList.spec.ts
Normal file
30
src/tests/unit/components/DeckList.spec.ts
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import DeckList from "@/components/DeckBuilder/DeckList.vue";
|
||||||
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
|
||||||
|
// Generate 10 test cards
|
||||||
|
const testCards = new Array(3).fill("test").map((t, i) => ({
|
||||||
|
ID: `test${i}`,
|
||||||
|
Name: `Test name ${i}`,
|
||||||
|
Subname: `Subname ${i}`
|
||||||
|
}));
|
||||||
|
const testSlots = testCards.map((c, i) => ({ data: c, limit: 3, howmany: i }));
|
||||||
|
|
||||||
|
describe("components/DeckBuilder/CardPicker", () => {
|
||||||
|
test("DeckList correctly detects card info", () => {
|
||||||
|
const wrapper = shallowMount(DeckList, {
|
||||||
|
propsData: {
|
||||||
|
cards: testSlots
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const cards = wrapper.findAll(".card");
|
||||||
|
expect(cards.contains(".fullname")).toBe(true);
|
||||||
|
for (let index = 0; index < testSlots.length; index++) {
|
||||||
|
const item = cards.at(index);
|
||||||
|
const card = testSlots[index];
|
||||||
|
expect(item.find(".amt").text()).toEqual(`${card.howmany}`);
|
||||||
|
expect(item.find(".fullname .name").text()).toEqual(card.data.Name);
|
||||||
|
expect(item.find(".fullname .subname").text()).toEqual(card.data.Subname);
|
||||||
|
//TODO Add more fields check as they are added
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -64,7 +64,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/assets/scss/_variables";
|
@import "@/assets/scss/_variables.scss";
|
||||||
|
|
||||||
.deckbuilder {
|
.deckbuilder {
|
||||||
background: url("../assets/images/backgrounds/deckbuilderbg.webp") center;
|
background: url("../assets/images/backgrounds/deckbuilderbg.webp") center;
|
||||||
|
|
Loading…
Reference in a new issue