(#5) adicionando testes modal

Co-authored-by: Sergio Cipriano <sergiosacj@protonmail.com>

frontend/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

frontend/package.json

@@ -2,8 +2,8 @@
   "name": "ta-na-mesa",
   "version": "0.1.0",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",

frontend/src/__tests__/components/Modal/LoginModal/LoginModal.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+import LoginModal from '../../../../components/Modal/LoginModal/index';
+
+describe('LoginModal', () => {
+  it('renders nothing when not visible', () => {
+    const props = {
+      title: 'Some content',
+      visible: false,
+      onClose: () => {
+        return;
+      },
+    };
+    render(<LoginModal {...props} />);
+
+    expect(screen.queryByText('Some content')).not.toBeVisible();
+  });
+
+  it('renders content when visible', () => {
+    const props = {
+      title: 'Some content',
+      visible: true,
+      onClose: () => {
+        return;
+      },
+    };
+    render(<LoginModal {...props} />);
+
+    expect(screen.getByText('Some content')).toBeVisible();
+  });
+
+  it('fires onClosed when clicking the button', () => {
+    const onCloseHandler = jest.fn();
+    const props = {
+      title: 'Some content',
+      visible: true,
+      onClose: onCloseHandler,
+    };
+    render(<LoginModal {...props} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onCloseHandler).toHaveBeenCalled();
+  });
+
+  it('fires onClosed when pressing esc', () => {
+    const onCloseHandler = jest.fn();
+    const props = {
+      title: 'Some content',
+      visible: true,
+      onClose: onCloseHandler,
+    };
+    render(<LoginModal {...props} />);
+
+    fireEvent.keyDown(document.body, {
+      key: 'Escape',
+      keyCode: 27,
+      which: 27,
+    });
+
+    expect(onCloseHandler).toHaveBeenCalled();
+  });
+});

frontend/src/components/Modal/LoginModal/index.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useRef } from 'react';
 import { Container } from 'components/Modal/LoginModal/styles';
 
 type Props = {
-  title?: string;
+  title: string;
   visible: boolean;
   onClose: (event: any) => void;
 };
 
-const Modal: React.FC<Props> = ({ title, visible, onClose }) => {
+const LoginModal: React.FC<Props> = ({ title, visible, onClose }) => {
   const modalRef = useRef(null);
 
   useEffect(() => {
@@ -41,4 +41,4 @@ const Modal: React.FC<Props> = ({ title, visible, onClose }) => {
   );
 };
 
-export default Modal;
+export default LoginModal;