import DeckList from "@/components/DeckBuilder/DeckList.vue";
import { shallowMount } from "@vue/test-utils";
import { colorNames } from "@/mlpccg";

// Generate 10 test cards
const testCards = new Array(3).fill("test").map((t, i) => ({
  ID: `test${i}`,
  Name: `Test name ${i}`,
  Subname: `Subname ${i}`,
  Type: "Friend",
  Element: [colorNames[i]],
  Power: i,
  Cost: i,
  Requirement: { Generosity: i }
}));
const testSlots = testCards.map((c, i) => ({ data: c, limit: 3, howmany: i }));

describe("components/DeckBuilder/DeckList", () => {
  test("DeckList correctly detects card info", () => {
    const wrapper = shallowMount(DeckList, {
      propsData: {
        cards: testSlots
      }
    });
    const cards = wrapper.findAll(".ccgcard");
    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
    }
  });
});