96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import SignIn from "../components/SignIn";
|
|
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
|
import { MockedProvider } from "@apollo/client/testing";
|
|
import { MemoryRouter } from "react-router-dom";
|
|
import { loginMock } from "../backend/mutations/login.mock";
|
|
|
|
const mockHistoryReplace = jest.fn();
|
|
|
|
jest.mock("react-router-dom", () => ({
|
|
...jest.requireActual("react-router-dom"),
|
|
useHistory: () => ({
|
|
replace: mockHistoryReplace,
|
|
}),
|
|
}));
|
|
|
|
describe("SignIn page", () => {
|
|
beforeEach(() => mockHistoryReplace.mockReset());
|
|
|
|
test("initial state", () => {
|
|
render(
|
|
<MockedProvider mocks={loginMock}>
|
|
<MemoryRouter>
|
|
<SignIn />
|
|
</MemoryRouter>
|
|
</MockedProvider>
|
|
);
|
|
|
|
// it renders empty email and passsword fields
|
|
const emailField = screen.getByRole("textbox", { name: "Email Address" });
|
|
expect(emailField).toHaveValue("");
|
|
const passwordField = screen.getByLabelText(/Password/);
|
|
expect(passwordField).toHaveValue("");
|
|
|
|
// it renders enabled submit button
|
|
const button = screen.getByRole("button");
|
|
expect(button).not.toBeDisabled();
|
|
expect(button).toHaveTextContent("Sign In");
|
|
expect(mockHistoryReplace).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("successful login", async () => {
|
|
render(
|
|
<MockedProvider mocks={loginMock}>
|
|
<MemoryRouter>
|
|
<SignIn />
|
|
</MemoryRouter>
|
|
</MockedProvider>
|
|
);
|
|
|
|
const emailField = screen.getByRole("textbox", { name: "Email Address" });
|
|
const passwordField = screen.getByLabelText(/Password/);
|
|
const button = screen.getByRole("button", { name: /sign in/i });
|
|
|
|
// fill out and submit form
|
|
fireEvent.change(emailField, { target: { value: "test@email.com" } });
|
|
fireEvent.change(passwordField, { target: { value: "password" } });
|
|
|
|
fireEvent.click(button);
|
|
|
|
await waitFor(() => {
|
|
expect(mockHistoryReplace).toHaveBeenCalledWith("/");
|
|
});
|
|
});
|
|
|
|
test("error login", async () => {
|
|
render(
|
|
<MockedProvider mocks={loginMock}>
|
|
<MemoryRouter>
|
|
<SignIn />
|
|
</MemoryRouter>
|
|
</MockedProvider>
|
|
);
|
|
|
|
const emailField = screen.getByRole("textbox", { name: "Email Address" });
|
|
const passwordField = screen.getByLabelText(/Password/);
|
|
const button = screen.getByRole("button");
|
|
|
|
// fill out and submit form
|
|
fireEvent.change(emailField, { target: { value: "test@email.com" } });
|
|
fireEvent.change(passwordField, { target: { value: "wrong-password" } });
|
|
fireEvent.click(button);
|
|
|
|
await waitFor(() => {
|
|
// it resets button
|
|
expect(button).not.toBeDisabled();
|
|
expect(button).toHaveTextContent("Sign In");
|
|
|
|
// it displays error text
|
|
const errorText = screen.getByText(/Wrong username or password/);
|
|
expect(errorText).toBeInTheDocument();
|
|
expect(mockHistoryReplace).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|