import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
import CardImage from "@/components/Cards/CardImage.vue";
import { shallowMount, mount } from "@vue/test-utils";
import { seconds } from "@/testing";

// 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 instances images for each card", () => {
    const wrapper = mount(CardPicker, {
      propsData: {
        rows: 2,
        columns: 5,
        cards: testSlots
      }
    });
    const cards = wrapper.findAll(".ccgcard");
    expect(cards.contains("img")).toBe(true);
  });

  test("CardImage correctly resolves to an URL after a while", async () => {
    const wrapper = mount(CardImage, {
      propsData: {
        id: "sb1"
      }
    });
    let src = wrapper.attributes("src");
    expect(src).toBe(""); // Should be placeholder but it gets stubbed
    await seconds(0.5);
    src = wrapper.attributes("src");
    expect(src).toMatch(/^https?:|^blob:/);
  });

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