From 6ccb3ea566441b61e3b1223e547f9f8749818ca8 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 11 Sep 2019 10:12:21 +0200
Subject: [PATCH] DeckList test

---
 src/components/DeckBuilder/CardPicker.vue    |  2 +-
 src/components/DeckBuilder/DeckList.vue      | 27 +++++++++++-------
 src/tests/unit/components/CardPicker.spec.ts |  1 -
 src/tests/unit/components/DeckList.spec.ts   | 30 ++++++++++++++++++++
 src/views/DeckBuilder.vue                    |  2 +-
 5 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 src/tests/unit/components/DeckList.spec.ts

diff --git a/src/components/DeckBuilder/CardPicker.vue b/src/components/DeckBuilder/CardPicker.vue
index 1de9c09..8690356 100644
--- a/src/components/DeckBuilder/CardPicker.vue
+++ b/src/components/DeckBuilder/CardPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="cardpicker" :style="grid">
     <article
-      @click="_picked(card.data)"
+      @click="() => _picked(card.data)"
       class="ccgcard"
       v-for="(card, i) in cards"
       :key="i + card.data.ID"
diff --git a/src/components/DeckBuilder/DeckList.vue b/src/components/DeckBuilder/DeckList.vue
index 1625597..6196f15 100644
--- a/src/components/DeckBuilder/DeckList.vue
+++ b/src/components/DeckBuilder/DeckList.vue
@@ -1,6 +1,11 @@
 <template>
   <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="fullname">
         <div class="name">{{ card.data.Name }}</div>
@@ -13,21 +18,21 @@
 </template>
 
 <style lang="scss" scoped>
-@import "@/assets/scss/_variables";
+@import "@/assets/scss/_variables.scss";
 
 .decklist {
   display: flex;
   flex-direction: column;
+}
 
-  article {
-    display: flex;
-    align-content: space-between;
-    align-items: center;
-    border: 1px solid $grey;
-    border-radius: 10px;
-    padding: 5px 3px;
-    cursor: pointer;
-  }
+.card {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+  border: 1px solid $grey;
+  border-radius: 10px;
+  padding: 5px 3px;
+  cursor: pointer;
 }
 
 .fullname {
diff --git a/src/tests/unit/components/CardPicker.spec.ts b/src/tests/unit/components/CardPicker.spec.ts
index f1aa003..6a93cd6 100644
--- a/src/tests/unit/components/CardPicker.spec.ts
+++ b/src/tests/unit/components/CardPicker.spec.ts
@@ -1,6 +1,5 @@
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 import { shallowMount } from "@vue/test-utils";
-import { CardSlot } from "@/mlpccg";
 
 // Generate 10 test cards
 const testCards = new Array(10)
diff --git a/src/tests/unit/components/DeckList.spec.ts b/src/tests/unit/components/DeckList.spec.ts
new file mode 100644
index 0000000..1d550dd
--- /dev/null
+++ b/src/tests/unit/components/DeckList.spec.ts
@@ -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
+    }
+  });
+});
diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index 23e6eeb..7f49bdb 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -64,7 +64,7 @@
 </template>
 
 <style lang="scss" scoped>
-@import "@/assets/scss/_variables";
+@import "@/assets/scss/_variables.scss";
 
 .deckbuilder {
   background: url("../assets/images/backgrounds/deckbuilderbg.webp") center;