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 other buttons are clicked", async () => {
    const testCases = [
      { label: "Default", expected: "default" },
      { label: "Outline", expected: "outline" },
      { label: "Outlined", expected: "outlined" },
      { 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);
    }
  });
});