88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
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
|
|
});
|
|
});
|
|
});
|