diff --git a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx index df67a4f..5bbe66e 100644 --- a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx +++ b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx @@ -10,61 +10,80 @@ describe("LoginForm", () => { vi.restoreAllMocks(); }); - it("should render", () => { + it("should render form", () => { render(); + const form = screen.getByRole("form"); - expect(screen.getByRole("form")).toBeInTheDocument(); + expect(form).toBeInTheDocument(); }); it("disables submit button when form is invalid", () => { render(); - 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(); - 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(); - 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(); 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(); 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(); + + 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(); }); });