({
+ defaultValues,
+ });
+
+ const onSubmit = handleSubmit(async (values) => {
+ console.log('submit')
+ });
+
+ return (
+ <>
+ Recovery
+
+ >
+ );
+};
diff --git a/web-app/client/src/components/ModalContainer/ModalContainer.test.tsx b/web-app/client/src/components/ModalContainer/ModalContainer.test.tsx
new file mode 100644
index 00000000..516d72fc
--- /dev/null
+++ b/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();
+
+ 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();
+ });
+
+
+});
diff --git a/web-app/client/src/components/ModalContainer/ModalContainer.tsx b/web-app/client/src/components/ModalContainer/ModalContainer.tsx
index 0eec6cfb..e0981c90 100644
--- a/web-app/client/src/components/ModalContainer/ModalContainer.tsx
+++ b/web-app/client/src/components/ModalContainer/ModalContainer.tsx
@@ -70,6 +70,7 @@ const ModalContainer: FCWithChildren = ({
onClick={onClose}
aria-label="Close"
className={styles.closeButton}
+ role='close'
>
diff --git a/web-app/client/src/components/ModalContainer/TestModal.tsx b/web-app/client/src/components/ModalContainer/TestModal.tsx
new file mode 100644
index 00000000..10457728
--- /dev/null
+++ b/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 (
+ <>
+ Outside
+
+
+ Test Modal
+
+ >
+ );
+};
diff --git a/web-app/client/src/components/Tooltip/Tooltip.test.tsx b/web-app/client/src/components/Tooltip/Tooltip.test.tsx
index 5e0ec544..7be459e4 100644
--- a/web-app/client/src/components/Tooltip/Tooltip.test.tsx
+++ b/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(Test 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();
});
});
diff --git a/web-app/client/src/components/Tooltip/Tooltip.tsx b/web-app/client/src/components/Tooltip/Tooltip.tsx
index 69d13062..a85a4abd 100644
--- a/web-app/client/src/components/Tooltip/Tooltip.tsx
+++ b/web-app/client/src/components/Tooltip/Tooltip.tsx
@@ -49,6 +49,7 @@ const Tooltip: FCWithChildren = ({ position = 'top', children }) => {
size={16}
color={colors.primary[100]}
className={styles.icon}
+ role='img'
/>