ilia/auth-remote-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(LoginForm): replace setState with userEvent.type for authenticity

Browse Source
This commit is contained in:
Ilia Mashkov
2026-03-24 20:29:16 +03:00
parent 70bcf7fdcf
commit 4d854d08a3
1 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/features/auth/ui/LoginForm/LoginForm.spec.tsx
View File

@@ -10,61 +10,80 @@ describe("LoginForm", () => {
vi.restoreAllMocks();
});
it("should render", () => {
it("should render form", () => {
render(<LoginForm />);
const form = screen.getByRole("form");
expect(screen.getByRole("form")).toBeInTheDocument();
expect(form).toBeInTheDocument();
});
it("disables submit button when form is invalid", () => {
render(<LoginForm />);
expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
const loginButton = screen.getByRole("button", { name: /login/i });
expect(loginButton).toBeDisabled();
});
it("disables submit button when auth store status equals loading", () => {
useAuthStore.getState().setEmail(MOCK_EMAIL);
useAuthStore.getState().setPassword(MOCK_PASSWORD);
it("disables submit button when auth store status equals loading", async () => {
useAuthStore.setState({ status: "loading" });
render(<LoginForm />);
expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
const emailInput = screen.getByRole("textbox", { name: /email/i });
const passwordInput = screen.getByLabelText(/password/i);
const loginButton = screen.getByRole("button", { name: /login/i });
await userEvent.type(emailInput, MOCK_EMAIL);
await userEvent.type(passwordInput, MOCK_PASSWORD);
expect(loginButton).toBeDisabled();
});
it("enables submit button when form is valid and auth store status isn't equal to loading", () => {
useAuthStore.getState().setEmail(MOCK_EMAIL);
useAuthStore.getState().setPassword(MOCK_PASSWORD);
it("enables submit button when form is valid and auth store status isn't equal to loading", async () => {
useAuthStore.setState({ status: "idle" });
render(<LoginForm />);
expect(screen.getByRole("button", { name: /login/i })).toBeEnabled();
const emailInput = screen.getByRole("textbox", { name: /email/i });
const passwordInput = screen.getByLabelText(/password/i);
const loginButton = screen.getByRole("button", { name: /login/i });
await userEvent.type(emailInput, MOCK_EMAIL);
await userEvent.type(passwordInput, MOCK_PASSWORD);
expect(loginButton).toBeEnabled();
});
it("updates email when user types", async () => {
render(<LoginForm />);
const emailInput = screen.getByRole("textbox", { name: /email/i });
await userEvent.type(emailInput, MOCK_EMAIL);
expect(selectAuthData(useAuthStore.getState()).email).toBe(MOCK_EMAIL);
const storeEmailValue = selectAuthData(useAuthStore.getState()).email;
expect(storeEmailValue).toBe(MOCK_EMAIL);
});
it("updates password when user types", async () => {
render(<LoginForm />);
const passwordInput = screen.getByLabelText(/password/i);
await userEvent.type(passwordInput, MOCK_PASSWORD);
expect(selectAuthData(useAuthStore.getState()).password).toBe(
MOCK_PASSWORD,
);
const storePasswordValue = selectAuthData(useAuthStore.getState()).password;
expect(storePasswordValue).toBe(MOCK_PASSWORD);
});
it("calls login when submit form is valid and user clicks submit", async () => {
const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
useAuthStore.getState().setEmail(MOCK_EMAIL);
useAuthStore.getState().setPassword(MOCK_PASSWORD);
useAuthStore.setState({ status: "idle" });
render(<LoginForm />);
const emailInput = screen.getByRole("textbox", { name: /email/i });
const passwordInput = screen.getByLabelText(/password/i);
const submitButton = screen.getByRole("button", { name: /login/i });
await userEvent.type(emailInput, MOCK_EMAIL);
await userEvent.type(passwordInput, MOCK_PASSWORD);
await userEvent.click(submitButton);
expect(loginSpy).toHaveBeenCalled();
});
});