DeckList test
Some checks failed
continuous-integration/drone/push Build is failing
continuous-integration/drone/pr Build is passing

This commit is contained in:
Hamcha 2019-09-11 10:12:21 +02:00
parent 090081c198
commit 6ccb3ea566
Signed by: hamcha
GPG key ID: 44AD3571EB09A39E
5 changed files with 48 additions and 14 deletions

View file

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

View file

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

View file

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

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

View file

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