110 lines
4.9 KiB
TypeScript
Executable File
110 lines
4.9 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { createMemoryHistory } from 'history';
|
|
import LoginForm from 'organisms/LoginForm';
|
|
import '@testing-library/jest-dom/extend-expect';
|
|
import { render, cleanup, waitForElement, fireEvent, act, wait } from '@testing-library/react';
|
|
import userApi from 'API/userAuthorization';
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe('Login', () => {
|
|
let history = createMemoryHistory({ initialEntries: ['/login'] });
|
|
|
|
afterEach(() => (history = createMemoryHistory({ initialEntries: ['/login'] })));
|
|
|
|
const dispatch = jest.fn();
|
|
|
|
it('renders login form properly', async () => {
|
|
const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
const passwordField = await waitForElement(() => findByTestId('password-field'));
|
|
const usernameField = await waitForElement(() => findByTestId('username-field'));
|
|
const submitButton = await waitForElement(() => findByTestId('submit-button'));
|
|
|
|
expect(submitButton.firstChild?.textContent).toBe('Zaloguj');
|
|
expect(passwordField).toHaveValue('');
|
|
expect(usernameField).toHaveValue('');
|
|
});
|
|
it('should display a blank login form', async () => {
|
|
const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
|
|
const loginForm = await findByTestId('login-form');
|
|
|
|
expect(loginForm).toHaveFormValues({
|
|
username: '',
|
|
password: '',
|
|
});
|
|
});
|
|
it('should allow entering username and password', async () => {
|
|
const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
const passwordField = await waitForElement(() => findByTestId('password-field'));
|
|
const usernameField = await waitForElement(() => findByTestId('username-field'));
|
|
await act(async () => {
|
|
fireEvent.change(passwordField, { target: { value: 'password' } });
|
|
fireEvent.change(usernameField, { target: { value: 'username' } });
|
|
});
|
|
expect(passwordField).toHaveValue('password');
|
|
expect(usernameField).toHaveValue('username');
|
|
});
|
|
it('should not submit blank form', async () => {
|
|
const { findByTestId, getByText } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
|
|
const loginForm = await findByTestId('login-form');
|
|
fireEvent.submit(loginForm);
|
|
|
|
const usernameError = await waitForElement(() => getByText('Podaj nazwę użytkownika.'));
|
|
const passwordError = await waitForElement(() => getByText('Podaj hasło.'));
|
|
|
|
expect(usernameError.innerHTML).toEqual('Podaj nazwę użytkownika.');
|
|
expect(passwordError.innerHTML).toEqual('Podaj hasło.');
|
|
});
|
|
it('should submit form with given values and redirects', async () => {
|
|
const { findByTestId, getByText } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
const passwordField = await waitForElement(() => findByTestId('password-field'));
|
|
const usernameField = await waitForElement(() => findByTestId('username-field'));
|
|
const loginForm = await findByTestId('login-form');
|
|
await act(async () => {
|
|
fireEvent.change(passwordField, { target: { value: 'password' } });
|
|
fireEvent.change(usernameField, { target: { value: 'username' } });
|
|
});
|
|
await act(async () => {
|
|
fireEvent.submit(loginForm);
|
|
});
|
|
expect(userApi.userAuthorization).toHaveBeenCalledTimes(1);
|
|
expect(history.location.pathname).toBe('/');
|
|
});
|
|
it('should display spinner on submitting form', async () => {
|
|
const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
const submitButton = await waitForElement(() => findByTestId('submit-button'));
|
|
const passwordField = await waitForElement(() => findByTestId('password-field'));
|
|
const usernameField = await waitForElement(() => findByTestId('username-field'));
|
|
const loginForm = await findByTestId('login-form');
|
|
await act(async () => {
|
|
fireEvent.change(usernameField, { target: { value: 'username' } });
|
|
});
|
|
await act(async () => {
|
|
fireEvent.change(passwordField, { target: { value: 'password' } });
|
|
});
|
|
|
|
fireEvent.submit(loginForm);
|
|
expect(submitButton).toHaveClass('is-loading');
|
|
await wait(() => expect(submitButton).not.toHaveClass('is-loading'));
|
|
});
|
|
it('should not redirect on invalid data', async () => {
|
|
userApi.userAuthorization.mockReturnValueOnce(false);
|
|
const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
|
|
const passwordField = await waitForElement(() => findByTestId('password-field'));
|
|
const usernameField = await waitForElement(() => findByTestId('username-field'));
|
|
const loginForm = await findByTestId('login-form');
|
|
await act(async () => {
|
|
fireEvent.change(passwordField, { target: { value: 'password' } });
|
|
});
|
|
await act(async () => {
|
|
fireEvent.change(usernameField, { target: { value: 'username' } });
|
|
});
|
|
await act(async () => {
|
|
fireEvent.submit(loginForm);
|
|
});
|
|
expect(history.location.pathname).toBe('/login');
|
|
});
|
|
});
|