feat: login Dialog Component - Replaced class by func. comp + added react-hook-form (#341)

* refactor: convert class to func

* refactor: changed login form logic

* refactor: conver to testing-library tests

* refactor: moved dependency

* refactor: replaced uglifyjs-webpack-plugin by terser-webpack-plugin

* fix: fixed e2e errors

* fix: fixed e2e test

* Delete settings.json

* fix: vscode settings rollback

* refactor: rollback webpack config

* refactor: updated eslint rule

* fix: removed --fix

* refactor: incresed the bundle size

src/components/LoginDialog/LoginDialog.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
+import AppContext, { AppContextProps } from '../../App/AppContext';
+import api from '../../utils/api';
+
+import LoginDialog from './LoginDialog';
+
+const appContextValue: AppContextProps = {
+  scope: '',
+  packages: [],
+  setUser: jest.fn(),
+};
+
+describe('<LoginDialog /> component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+  });
+
+  test('should render the component in default state', () => {
+    const props = {
+      onClose: jest.fn(),
+    };
+    const { container } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} />
+      </AppContext.Provider>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should load the component with the open prop', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByText } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
+    expect(loginDialogHeading).toBeTruthy();
+  });
+
+  test('onClose: should close the login modal', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    const loginDialogButton = await waitForElement(() => getByTestId('close-login-dialog-button'));
+    expect(loginDialogButton).toBeTruthy();
+
+    fireEvent.click(loginDialogButton, { open: false });
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  // TODO
+  test.skip('setCredentials - should set username and password in state', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve({
+        username: 'xyz',
+        token: 'djsadaskljd',
+      })
+    );
+
+    const { getByPlaceholderText, getByText } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    // TODO: the input's value is not being updated in the DOM
+    const userNameInput = getByPlaceholderText('Your username');
+    fireEvent.focus(userNameInput);
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+
+    // TODO: the input's value is not being updated in the DOM
+    const passwordInput = getByPlaceholderText('Your strong password');
+    fireEvent.focus(passwordInput);
+    fireEvent.change(passwordInput, { target: { value: '1234' } });
+
+    // TODO: submitting form does not work
+    const signInButton = getByText('Sign in');
+    fireEvent.click(signInButton);
+  });
+
+  test.todo('validateCredentials: should validate credentials');
+
+  test.todo('submitCredentials: should submit credentials');
+});