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