test: SignIn page

frontend/package.json

@@ -32,8 +32,8 @@
   "scripts": {
     "dev": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:coverage": "react-scripts test --coverage --watchAll false",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --coverage --watchAll false",
     "eject": "react-scripts eject"
   },
   "jest": {
@@ -71,6 +71,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "prettier": "^2.0.5"
   }
 }

frontend/src/__tests__/pages/SignIn.spec.tsx

@@ -1,17 +1,93 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 
 import SignIn from '../../pages/SignIn';
 
+const mockedHistoryPush = jest.fn();
+const mockedSignIn = jest.fn();
+const mockedAddToast = jest.fn();
+
 jest.mock('react-router-dom', () => ({
-  useHistory: jest.fn(),
+  useHistory: () => ({
+    push: mockedHistoryPush,
+  }),
   Link: ({ children }: { children: React.ReactNode }) => children,
 }));
 
+jest.mock('../../hooks/auth', () => ({
+  useAuth: () => ({
+    signIn: mockedSignIn,
+  }),
+}));
+
+jest.mock('../../hooks/toast', () => ({
+  useToast: () => ({
+    addToast: mockedAddToast,
+  }),
+}));
+
 describe('SignIn Page', () => {
-  it('should be able to sign in', () => {
-    const { debug } = render(<SignIn />);
+  beforeEach(() => {
+    mockedHistoryPush.mockClear();
+    mockedAddToast.mockClear();
+  });
+
+  it('should be able to sign in', async () => {
+    const { getByPlaceholderText, getByText } = render(<SignIn />);
+
+    const emailField = getByPlaceholderText('E-mail');
+    const passwordField = getByPlaceholderText('Senha');
+    const buttonElement = getByText('Entrar');
+
+    fireEvent.change(emailField, { target: { value: '[email protected]' } });
+    fireEvent.change(passwordField, { target: { value: '123456' } });
+
+    fireEvent.click(buttonElement);
+
+    await waitFor(() => {
+      expect(mockedHistoryPush).toHaveBeenCalledWith('/dashboard');
+    });
+  });
+
+  it('should not be able to sign in with invalid credentials', async () => {
+    const { getByPlaceholderText, getByText } = render(<SignIn />);
+
+    const emailField = getByPlaceholderText('E-mail');
+    const passwordField = getByPlaceholderText('Senha');
+    const buttonElement = getByText('Entrar');
+
+    fireEvent.change(emailField, { target: { value: 'not-valid-email' } });
+    fireEvent.change(passwordField, { target: { value: '123456' } });
+
+    fireEvent.click(buttonElement);
+
+    await waitFor(() => {
+      expect(mockedHistoryPush).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should display an error if login fails', async () => {
+    mockedSignIn.mockImplementation(() => {
+      throw new Error();
+    });
+
+    const { getByPlaceholderText, getByText } = render(<SignIn />);
+
+    const emailField = getByPlaceholderText('E-mail');
+    const passwordField = getByPlaceholderText('Senha');
+    const buttonElement = getByText('Entrar');
+
+    fireEvent.change(emailField, { target: { value: '[email protected]' } });
+    fireEvent.change(passwordField, { target: { value: '123456' } });
+
+    fireEvent.click(buttonElement);
 
-    debug();
+    await waitFor(() => {
+      expect(mockedAddToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'error',
+        }),
+      );
+    });
   });
 });

frontend/src/pages/SignIn/index.tsx

@@ -83,7 +83,7 @@ const SignIn: React.FC = () => {
               name="password"
               icon={FiLock}
               type="password"
-              placeholder="password"
+              placeholder="Senha"
             />
 
             <Button type="submit">Entrar</Button>