import { beforeEach, describe, expect, it } from "vitest";
import { mount, type VueWrapper } from "@vue/test-utils";
import IndexPage from "~/pages/index.vue";

describe("pages/index.vue", () => {
  let wrapper: VueWrapper;

  beforeEach(() => {
    wrapper = mount(IndexPage);
  });

  it("loads without crashing", () => {
    expect(wrapper.exists()).toBe(true);
  });

  it("displays initial state correctly", () => {
    const displayElement = wrapper.find(".text-lime-500");
    expect(displayElement.exists()).toBe(true);
    expect(displayElement.text()).toBe("None");
  });

  it("updates text when Default button is clicked", async () => {
    // Find button method 1: by text content inside button elements
    const buttons = wrapper.findAll("button");
    const defaultBtn = buttons.find((b) => b.text() === "Default");

    expect(defaultBtn?.exists()).toBe(true);

    await defaultBtn?.trigger("click");
    expect(wrapper.find(".text-lime-500").text()).toBe("default");
  });

  it("updates text when other buttons are clicked", async () => {
    const testCases = [
      { label: "Outline", expected: "outline" },
      { label: "Ghost", expected: "ghost" },
      { label: "Link", expected: "link" },
      { label: "Secondary", expected: "secondary" },
      { label: "Destructive", expected: "destructive" },
    ];

    for (const { label, expected } of testCases) {
      const buttons = wrapper.findAll("button");
      const btn = buttons.find((b) => b.text() === label);

      expect(btn?.exists(), `Button with label ${label} should exist`).toBe(true);
      await btn?.trigger("click");

      expect(wrapper.find(".text-lime-500").text()).toBe(expected);
    }
  });
});