[Closes #10] Reactive breadcrumbs

tests/pages/auth/create-account.test.ts

@@ -0,0 +1,88 @@
+import { mount, flushPromises } from "@vue/test-utils";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import CreateAccountPage from "~/pages/auth/create-account.vue";
+
+// Mock auth client
+const authMocks = vi.hoisted(() => ({
+  signUpEmail: vi.fn(),
+}));
+
+vi.mock("~~/shared/utils/auth-client", () => ({
+  authClient: {
+    signUp: {
+      email: authMocks.signUpEmail,
+    },
+  },
+}));
+
+// Mock UI components
+vi.mock("@/components/ui/button", () => ({
+  Button: { template: "<button><slot /></button>" },
+}));
+
+vi.mock("@/components/ui/input", () => ({
+  Input: {
+    props: ["modelValue", "id", "type"],
+    emits: ["update:modelValue"],
+    template: `<input :id="id" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
+  },
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: { template: "<div><slot /></div>" },
+  CardHeader: { template: "<div><slot /></div>" },
+  CardTitle: { template: "<h1><slot /></h1>" },
+  CardDescription: { template: "<p><slot /></p>" },
+  CardContent: { template: "<div><slot /></div>" },
+}));
+
+vi.mock("@/components/ui/field", () => ({
+  Field: { template: "<div><slot /></div>" },
+  FieldGroup: { template: "<div><slot /></div>" },
+  FieldLabel: { template: "<label><slot /></label>" },
+  FieldDescription: { template: "<span><slot /></span>" },
+}));
+
+describe("CreateAccountPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authMocks.signUpEmail.mockResolvedValue({ data: {}, error: null });
+  });
+
+  it("renders the signup form correctly", async () => {
+    const wrapper = mount(CreateAccountPage);
+
+    // Wait for any async rendering if necessary
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Create your account");
+    expect(wrapper.find('input[type="email"]').exists()).toBe(true);
+    expect(wrapper.find('input[type="password"]').exists()).toBe(true);
+  });
+
+  it("submits the form with correct data", async () => {
+    const wrapper = mount(CreateAccountPage);
+
+    await flushPromises();
+
+    // Fill the form
+    const nameInput = wrapper.find('input[id="name"]');
+    const emailInput = wrapper.find('input[id="email"]');
+    const passwordInput = wrapper.find('input[id="password"]');
+    const confirmPasswordInput = wrapper.find('input[id="confirm-password"]');
+
+    await nameInput.setValue("Test User");
+    await emailInput.setValue("test@example.com");
+    await passwordInput.setValue("password123");
+    await confirmPasswordInput.setValue("password123");
+
+    // Submit
+    await wrapper.find("form").trigger("submit");
+
+    expect(authMocks.signUpEmail).toHaveBeenCalledWith({
+      name: "Test User",
+      email: "test@example.com",
+      password: "password123", // NOSONAR - Mocked value
+    });
+  });
+});