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