Initial commit from ZIP

evg-outbo-web/src/__tests__/Login.test.tsx

@@ -0,0 +1,109 @@
+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');
+  });
+});