From 1751df6a91517d8da4cfbd5f9dc876f8dde96c1d Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Tue, 10 Sep 2019 13:02:29 +0200
Subject: [PATCH] Add unit tests for CardPicker

---
 src/tests/unit/components/CardPicker.spec.ts | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/tests/unit/components/CardPicker.spec.ts

diff --git a/src/tests/unit/components/CardPicker.spec.ts b/src/tests/unit/components/CardPicker.spec.ts
new file mode 100644
index 0000000..f1aa003
--- /dev/null
+++ b/src/tests/unit/components/CardPicker.spec.ts
@@ -0,0 +1,38 @@
+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)
+  .fill("test")
+  .map((t, i) => ({ ID: `${t}${i}` }));
+const testSlots = testCards.map(c => ({ data: c, limit: 3, howmany: 1 }));
+
+describe("components/DeckBuilder/CardPicker", () => {
+  test("CardPicker correctly creates images for each card", () => {
+    const wrapper = shallowMount(CardPicker, {
+      propsData: {
+        rows: 2,
+        columns: 5,
+        cards: testSlots
+      }
+    });
+    const cards = wrapper.findAll(".ccgcard");
+    expect(cards.contains("img")).toBe(true);
+  });
+
+  test("CardPicker correctly aligns items in a grid", () => {
+    const wrapper = shallowMount(CardPicker, {
+      propsData: {
+        rows: 3,
+        columns: 5,
+        cards: testSlots
+      }
+    });
+    const section = wrapper.find(".cardpicker");
+    const style = section.attributes("style");
+    expect(style).toMatch(
+      /grid-template-rows: \S+ \S+ \S+; grid-template-columns: \S+ \S+ \S+ \S+ \S+;/i
+    );
+  });
+});