DeckList test

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"

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,13 +18,14 @@
 </template>
 
 <style lang="scss" scoped>
-@import "@/assets/scss/_variables";
+@import "@/assets/scss/_variables.scss";
 
 .decklist {
   display: flex;
   flex-direction: column;
+}
 
-  article {
+.card {
   display: flex;
   align-content: space-between;
   align-items: center;
@@ -28,7 +34,6 @@
   padding: 5px 3px;
   cursor: pointer;
 }
-}
 
 .fullname {
   display: flex;

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)

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

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;