78 lines
2.7 KiB
TypeScript
78 lines
2.7 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();
|
|
});
|
|
});
|
|
});
|