glowing-fiesta/tests/pages/index.test.ts

43 lines
1.4 KiB
TypeScript

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