Teste dos componentes da primeira história concluídos e testando a pá…

…gina de Login

src/components/Button/Button.test.js

@@ -11,8 +11,8 @@ describe('Button component', () => {
 
   it('O botão deve chamar a função senForm()', () => {
     const sendForm = jest.fn();
-    render(<Button onClick={sendForm}>ENTRAR</Button>);
-    const buttonTest = screen.getByText('ENTRAR');
+    render(<Button onClick={sendForm} role="login">ENTRAR</Button>);
+    const buttonTest = screen.getByRole('login');
     user.click(buttonTest);
     expect(sendForm).toHaveBeenCalledTimes(1);
   });

src/components/Input/Input.test.js

@@ -16,11 +16,11 @@ describe('Input component', () => {
   });
 
   it('Deve chamar uma função sempre que o seu valor é alterado', () => {
-    const sendForm = jest.fn();
-    render(<Input onChange={sendForm} type="text" placeholder="Digite aqui" />);
+    const addInputValue = jest.fn();
+    render(<Input onChange={addInputValue} type="text" placeholder="Digite aqui" />);
     const inputTest = screen.getByPlaceholderText('Digite aqui');
     const text = 'oi';
     user.type(inputTest, text);
-    expect(sendForm).toHaveBeenCalledTimes(text.length);
+    expect(addInputValue).toHaveBeenCalledTimes(text.length);
   });
 })

src/hooks/useForm.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 const useForm = () => {
-
   const [form, setForm] = React.useState({
     name: '',
     email: '',
@@ -49,7 +48,7 @@ const useForm = () => {
     checked[index].classList.remove('input-radio:checked:before');
   }
 
-  return { addInputValue, validatedForm, cleanForm, form };
+  return { addInputValue, validatedForm, cleanForm, form, setForm };
 }
 
 export default useForm;

src/pages/Login/Login.test.js

@@ -0,0 +1,49 @@
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import Login from '.';
+import * as storage from '../../services/storage';
+
+let email = '';
+let password = '';
+
+const API = jest.mock('../../services/user', () => ({
+  ...jest.requireActual('../../services/user'),
+  userLogin: jest.fn()
+    .mockImplementation(email, password)
+    .mockResolvedValue('')
+}));
+
+describe('Login and UseForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Deverá logar usuário corretamente, validanto todos os testes', async () => {
+    render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+    email = '[email protected]';
+    password = '123456';
+
+    /* Event change on input */
+    const getEmail = screen.getByPlaceholderText('Digite o seu email');
+    const getPassword = screen.getByPlaceholderText('Digite a sua senha');
+    user.type(getEmail, email);
+    user.type(getPassword, password);
+
+    /* Saving value */
+    getEmail.value = email;
+    getPassword.value = password;
+
+    /* Event click on ENTER button*/
+    const login = screen.getByRole('login');
+    user.click(login);
+    storage.setUserData('Tiemi', password, 'admin');
+    expect(API.userLogin).toHaveBeenCalled();
+    expect(API.userLogin).toHaveBeenCalledTimes(1);
+    storage.deleteUserData();
+  });
+});

src/pages/Login/index.js

@@ -48,7 +48,7 @@ const Login = () => {
         value={form.email}
         text='EMAIL'
         type='text'
-        placeholder='Digite o email'
+        placeholder='Digite o seu email'
         onChange={addInputValue}
       />
       <Input
@@ -58,11 +58,11 @@ const Login = () => {
         value={form.password}
         text='SENHA'
         type='password'
-        placeholder='Digite a senha'
+        placeholder='Digite a sua senha'
         onChange={addInputValue}
       />
       {message && <Text class='form-message'>{message}</Text>}
-      <Button type='submit' class='button' onClick={sendForm}>
+      <Button type='submit' class='button' onClick={sendForm} role="login">
         ENTRAR
       </Button>
     </Form>