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

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