test(LoginForm): replace setState with userEvent.type for authenticity
This commit is contained in:
@@ -10,61 +10,80 @@ describe("LoginForm", () => {
|
|||||||
vi.restoreAllMocks();
|
vi.restoreAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should render", () => {
|
it("should render form", () => {
|
||||||
render(<LoginForm />);
|
render(<LoginForm />);
|
||||||
|
const form = screen.getByRole("form");
|
||||||
|
|
||||||
expect(screen.getByRole("form")).toBeInTheDocument();
|
expect(form).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("disables submit button when form is invalid", () => {
|
it("disables submit button when form is invalid", () => {
|
||||||
render(<LoginForm />);
|
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", () => {
|
it("disables submit button when auth store status equals loading", async () => {
|
||||||
useAuthStore.getState().setEmail(MOCK_EMAIL);
|
|
||||||
useAuthStore.getState().setPassword(MOCK_PASSWORD);
|
|
||||||
useAuthStore.setState({ status: "loading" });
|
useAuthStore.setState({ status: "loading" });
|
||||||
|
|
||||||
render(<LoginForm />);
|
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", () => {
|
it("enables submit button when form is valid and auth store status isn't equal to loading", async () => {
|
||||||
useAuthStore.getState().setEmail(MOCK_EMAIL);
|
|
||||||
useAuthStore.getState().setPassword(MOCK_PASSWORD);
|
|
||||||
useAuthStore.setState({ status: "idle" });
|
useAuthStore.setState({ status: "idle" });
|
||||||
|
|
||||||
render(<LoginForm />);
|
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 () => {
|
it("updates email when user types", async () => {
|
||||||
render(<LoginForm />);
|
render(<LoginForm />);
|
||||||
const emailInput = screen.getByRole("textbox", { name: /email/i });
|
const emailInput = screen.getByRole("textbox", { name: /email/i });
|
||||||
await userEvent.type(emailInput, MOCK_EMAIL);
|
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 () => {
|
it("updates password when user types", async () => {
|
||||||
render(<LoginForm />);
|
render(<LoginForm />);
|
||||||
const passwordInput = screen.getByLabelText(/password/i);
|
const passwordInput = screen.getByLabelText(/password/i);
|
||||||
await userEvent.type(passwordInput, MOCK_PASSWORD);
|
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 () => {
|
it("calls login when submit form is valid and user clicks submit", async () => {
|
||||||
const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
|
const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
|
||||||
|
|
||||||
useAuthStore.getState().setEmail(MOCK_EMAIL);
|
|
||||||
useAuthStore.getState().setPassword(MOCK_PASSWORD);
|
|
||||||
useAuthStore.setState({ status: "idle" });
|
useAuthStore.setState({ status: "idle" });
|
||||||
|
|
||||||
render(<LoginForm />);
|
render(<LoginForm />);
|
||||||
|
|
||||||
|
const emailInput = screen.getByRole("textbox", { name: /email/i });
|
||||||
|
const passwordInput = screen.getByLabelText(/password/i);
|
||||||
const submitButton = screen.getByRole("button", { name: /login/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);
|
await userEvent.click(submitButton);
|
||||||
|
|
||||||
expect(loginSpy).toHaveBeenCalled();
|
expect(loginSpy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user