[Closes #1] [Closes !5] Migrated from PrimeVue to shadcn

tests/pages/index.test.ts

@@ -1,11 +1,52 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, beforeEach } from "vitest";
 import { mount, type VueWrapper } from "@vue/test-utils";
 import IndexPage from "~/pages/index.vue";
 
 describe("pages/index.vue", () => {
-  const wrapper: VueWrapper = mount(IndexPage, {});
+  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);
+    }
+  });
 });