add test

web-app/client/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Icon from './Icon';
+
+const user = userEvent.setup();
+
+describe('Testing Icon Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Should render icon', async () => {
+    render(<Icon name="info" role="img" />);
+    expect(screen.getByRole('img'));
+  });
+});

web-app/client/src/components/Inputs/MultiSelect/MultiSelect.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MultiSelect from './MultiSelect';
+import { countries } from 'countries-list';
+
+const user = userEvent.setup();
+
+describe('Testing multi select dropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const countryNames = Object.entries(countries).map(
+      ([, country]) => country,
+    );
+
+  test('Should open dropdown, select first and second option, close by click outside', async () => {
+    render(
+      <>
+        <MultiSelect
+          label="Country"
+          placeholder="Germany"
+          options={countryNames.map(({ emoji, native, name }) => ({
+            label: `${emoji} ${native}`,
+            value: name,
+          }))}
+        />
+        <div>Outside</div>
+      </>,
+    );
+    const trigger = screen.getByText('Germany');
+    await user.click(trigger);
+    const andorra = () => screen.getByText('🇦🇩 Andorra');
+    const anguilla = () => screen.getByText('🇦🇮 Anguilla');
+    const antiguaQuery = () => screen.queryByText('🇦🇬 Antigua and Barbuda');
+    const anguillaQuery = () => screen.queryByText('🇦🇮 Anguilla');
+    expect(andorra() && anguilla());
+    expect(antiguaQuery()).not.toBeNull();
+
+    await user.click(andorra());
+    expect(andorra());
+    expect(anguillaQuery()).toBeNull();
+
+    await user.click(andorra());
+    await user.click(anguilla());
+    expect(anguillaQuery()).not.toBeNull();
+    expect(antiguaQuery()).toBeNull();
+
+    await user.click(screen.getByText('Outside'));
+    expect(antiguaQuery()).toBeNull();
+  });
+});

web-app/client/src/components/Inputs/Select/Select.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Select from './Select';
+import { countries } from 'countries-list';
+
+const user = userEvent.setup();
+
+describe('Testing select dropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const countryNames = Object.entries(countries).map(([, country]) => country);
+
+  test('Should open dropdown, select option, close by click outside', async () => {
+    render(
+      <>
+        <Select
+          label="Country"
+          placeholder="Germany"
+          options={countryNames.map(({ emoji, native, name }) => ({
+            label: `${emoji} ${native}`,
+            value: name,
+          }))}
+        />
+        <div>Outside</div>
+      </>,
+    );
+    const trigger = screen.getByText('Germany');
+    await user.click(trigger);
+    const andorra = () => screen.getByText('🇦🇩 Andorra');
+    const anguilla = screen.getByText('🇦🇮 Anguilla');
+    const anguillaQuery = () => screen.queryByText('🇦🇮 Anguilla');
+    expect(andorra());
+    expect(anguilla);
+
+    await user.click(andorra());
+    expect(andorra());
+    expect(anguillaQuery()).toBeNull();
+
+    await user.click(andorra());
+    expect(anguillaQuery()).not.toBeNull();
+    await user.click(screen.getByText('Outside'));
+    expect(anguillaQuery()).toBeNull();
+  });
+});

web-app/client/src/components/LogInModal/steps/Password.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { TestPassword } from './TestPassword';
+
+const user = userEvent.setup();
+
+describe('Testing variants for password', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+const prepare = () => {
+  render(<TestPassword />);
+  const input = screen.getByPlaceholderText('admin1234');
+  const trigger = screen.getByRole('submit');
+  const errorQuery = () =>
+    screen.queryByText('The password does not match the pattern (see tooltip)');
+  return { input, trigger, errorQuery };
+};
+
+test('Too shot password', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'Aa23.0' } });
+  await user.click(trigger);
+  expect(errorQuery()).not.toBeNull();
+});
+
+test('Password without digit', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'Aaaaaa.a' } });
+  await user.click(trigger);
+  expect(errorQuery()).not.toBeNull();
+});
+
+test('Password without special symbol', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'Aaaa2312' } });
+  await user.click(trigger);
+  expect(errorQuery()).not.toBeNull();
+});
+
+test('Password without uppercase letter', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'aaaa23.0' } });
+  await user.click(trigger);
+  expect(errorQuery()).not.toBeNull();
+});
+
+test('Password without lowercase letter', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'AAAA23.0' } });
+  await user.click(trigger);
+  expect(errorQuery()).not.toBeNull();
+});
+
+test('Good password', async () => {
+  const { input, trigger, errorQuery } = prepare();
+  fireEvent.change(input, { target: { value: 'Aaaa23.0' } });
+  await user.click(trigger);
+  expect(errorQuery()).toBeNull();
+});
+});
+

web-app/client/src/components/LogInModal/steps/Password.tsx

@@ -67,7 +67,9 @@ const Password: FC<Props> = ({ onSuccess, email }) => {
             tooltip={passwordTooltip}
             {...register('password', {
               required: 'Required',
-              validate: (value) => isStrongPassword(value) || 'Weak password',
+              validate: (value) =>
+                isStrongPassword(value) ||
+                'The password does not match the pattern (see tooltip)',
             })}
             error={errors.password?.message}
           />

web-app/client/src/components/LogInModal/steps/TestPassword.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import isStrongPassword from 'validator/lib/isStrongPassword';
+import Button from '@components/Button';
+import { Text } from '@components/Inputs';
+import { passwordTooltip } from '@components/SignUpModal/steps/CoreInfo';
+import styles from '../LogInModal.module.scss';
+
+type Inputs = {
+  password: string;
+};
+
+const defaultValues: Inputs = {
+  password: '',
+};
+
+export const TestPassword: FC = () => {
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<Inputs>({
+    defaultValues,
+  });
+
+  const onSubmit = handleSubmit(async (values) => {
+    console.log('submit')
+  });
+
+  return (
+    <>
+      <h4 className={styles.title}>Recovery</h4>
+      <form onSubmit={onSubmit} className={styles.formContainer}>
+        <div className={styles.inputGroup}>
+          <Text
+            label="Password"
+            type="password"
+            placeholder="admin1234"
+            tooltip={passwordTooltip}
+            {...register('password', {
+              required: 'Required',
+              validate: (value) =>
+                isStrongPassword(value) ||
+                'The password does not match the pattern (see tooltip)',
+            })}
+            error={errors.password?.message}
+          />
+        </div>
+
+        <div className={styles.buttons}>
+          <Button variant="primary" type="submit" disabled={isSubmitting} role='submit'>
+            Update Password
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};

web-app/client/src/components/ModalContainer/ModalContainer.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TestModal } from './TestModal';
+
+const user = userEvent.setup();
+
+describe('Testing Modal Container as Test Modal window', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+
+  test('Should open, close by button and click outside', async () => {
+    render(<TestModal />);
+
+    const triggerOpen = screen.getByText('Test Button');
+    await user.click(triggerOpen);
+    expect(screen.getByText('Test Modal'));
+
+    const triggerClose = screen.getByRole('close');
+    await user.click(triggerClose);
+    expect(screen.queryByText('Test Modal')).toBeNull();
+
+    await user.click(triggerOpen);
+    await user.click(screen.getByText('Outside'));
+    expect(screen.queryByText('Test Modal')).toBeNull();
+  });
+
+
+});

web-app/client/src/components/ModalContainer/ModalContainer.tsx

@@ -70,6 +70,7 @@ const ModalContainer: FCWithChildren<ModalProps> = ({
                   onClick={onClose}
                   aria-label="Close"
                   className={styles.closeButton}
+                  role='close'
                 >
                   <Icon name="cross" />
                 </button>

web-app/client/src/components/ModalContainer/TestModal.tsx

@@ -0,0 +1,22 @@
+import Button from '@components/Button';
+import { FC, useState } from 'react';
+import ModalContainer from './ModalContainer';
+
+export const TestModal: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div>Outside</div>
+      <Button variant="secondary" size="sm" onClick={() => setIsOpen(true)}>
+        Test Button
+      </Button>
+      <ModalContainer isOpen={isOpen} onClose={onClose}>
+        Test Modal
+      </ModalContainer>
+    </>
+  );
+};

web-app/client/src/components/Tooltip/Tooltip.test.tsx

@@ -4,19 +4,18 @@ import Tooltip from './Tooltip';
 
 const user = userEvent.setup();
 
-describe('Text Component', () => {
+describe('Testing tooltip', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('Should render with text', async () => {
+  test('Should open with text by hover and close by unhover', async () => {
     render(<Tooltip>Test Tooltip</Tooltip>);
     const trigger = screen.getByRole('img');
-    const tooltip = screen.getByText(/test tooltip/i);
-    expect(tooltip).toHaveClass('hidden');
     await user.hover(trigger);
-    expect(tooltip).not.toHaveClass('hidden');
+    expect(screen.getByText(/test tooltip/i));
+
     await user.unhover(trigger);
-    expect(tooltip).toHaveClass('hidden');
+    expect(screen.queryByText(/test tooltip/i)).toBeNull();
   });
 });

web-app/client/src/components/Tooltip/Tooltip.tsx

@@ -49,6 +49,7 @@ const Tooltip: FCWithChildren<Props> = ({ position = 'top', children }) => {
           size={16}
           color={colors.primary[100]}
           className={styles.icon}
+          role='img'
         />
       </div>