Correção dos testes

cypress/integration/Questions/answerQuestions.spec.js

@@ -1,5 +1,5 @@
-const { wait } = require('@testing-library/react');
 import Chance from 'chance';
+const { wait } = require('@testing-library/react');
 const chance = new Chance();
 
 describe('Login candidate user', () => {

package.json

@@ -37,6 +37,7 @@
     "docz": "^2.3.1",
     "eslint-config-prettier": "^6.12.0",
     "husky": "^4.3.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2"
   },
@@ -45,7 +46,7 @@
     "build": "react-scripts build",
     "build:prod": "REACT_APP_FIREBASE_ENV=prod REACT_APP_GA_ID='UA-170993659-2' npm run build",
     "build:dev": "REACT_APP_FIREBASE_ENV=dev npm run build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "lint": "eslint --ignore-path .gitignore --ext .js .",
     "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json)\"",

src/App.test.js

@@ -1,36 +1,62 @@
 import React from 'react';
 import {
+  screen,
   render,
   fireEvent,
+  waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
 import {
+  firebase,
   mockUnauthenticatedUser,
   mockAuthenticatedUser,
 } from 'tests/mockFirebaseAuth';
-import firebase from 'firebase/app';
 
+import questionsService from 'components/AnswersProvider/answersService';
+
+import AuthenticationProvider from './AuthenticationProvider';
+import * as tokenService from './customTokenService';
 import App from './App';
 
-describe('App', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
+jest.mock('components/CityProvider/CityProvider');
+
+beforeEach(() => {
+  jest.spyOn(tokenService, 'getCustomToken').mockResolvedValue('tokenzinho');
+  jest
+    .spyOn(questionsService, 'getAnsweredQuestions')
+    .mockResolvedValue({ 0: { answer: 'DT' }, 1: { answer: 'CT' } });
+});
 
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+const customRender = () =>
+  render(
+    <AuthenticationProvider>
+      <App />
+    </AuthenticationProvider>,
+    { wrapper: BrowserRouter },
+  );
+
+describe('App', () => {
   it('renders sign in form when user is unauthenticated', async () => {
     mockUnauthenticatedUser();
 
-    const { getByTestId } = render(<App />);
+    customRender();
 
-    fireEvent.change(getByTestId('email-input'), {
-      target: { value: 'any@email.com' },
-    });
-    fireEvent.change(getByTestId('password-input'), {
-      target: { value: 'anyPassword' },
-    });
-    fireEvent.click(getByTestId('submit-button'));
+    const emailInput = screen.getByLabelText('E-mail');
+    userEvent.type(emailInput, 'any@email.com');
 
-    await waitForElementToBeRemoved(() => getByTestId('signup-loader'));
+    const passwordInput = screen.getByTestId('password-input');
+    userEvent.type(passwordInput, 'anyPassword');
+
+    const submitButton = screen.getByRole('button', { name: 'Entrar' });
+    fireEvent.click(submitButton);
+
+    await waitForElementToBeRemoved(() => screen.getByTestId('submit-loader'));
 
     expect(firebase.auth().signInWithEmailAndPassword).toBeCalledWith(
       'any@email.com',
@@ -40,38 +66,49 @@ describe('App', () => {
 
   it('renders sign up form when user is unauthenticated', async () => {
     mockUnauthenticatedUser();
-    const { getByTestId } = render(<App />);
+    customRender();
 
-    fireEvent.click(getByTestId('signup-button'));
-    fireEvent.change(getByTestId('email-input'), {
-      target: { value: 'any@email.com' },
-    });
-    fireEvent.change(getByTestId('password-input'), {
-      target: { value: 'anyPassword' },
-    });
-    fireEvent.click(getByTestId('submit-button'));
+    userEvent.click(screen.getByTestId('signup-button'));
 
-    await waitForElementToBeRemoved(() => getByTestId('signup-loader'));
+    const emailInput = screen.getByLabelText('E-mail');
+    userEvent.type(emailInput, 'any@email.com');
 
-    expect(firebase.auth().createUserWithEmailAndPassword).toBeCalledWith(
-      'any@email.com',
-      'anyPassword',
+    const passwordInput = screen.getByLabelText('Senha');
+    userEvent.type(passwordInput, 'anyPassword');
+
+    const nameInput = screen.getByLabelText('Nome completo');
+    userEvent.type(nameInput, 'Kleber da silva');
+
+    const cityInput = screen.getByLabelText('Cidade');
+    userEvent.selectOptions(cityInput, 'campinas');
+
+    userEvent.click(screen.getByTestId('submit-button'));
+
+    await waitFor(() =>
+      expect(firebase.auth().createUserWithEmailAndPassword).toBeCalledWith(
+        'any@email.com',
+        'anyPassword',
+      ),
     );
   });
 
-  it('renders app when user is authenticated', () => {
+  it('renders app when user is authenticated', async () => {
     mockAuthenticatedUser();
+    customRender();
+
+    await waitForElementToBeRemoved(() => screen.getByTestId('page-loading'));
 
-    const { getByTestId } = render(<App />);
-    expect(getByTestId('app')).toBeVisible();
+    expect(screen.getByTestId('app')).toBeInTheDocument();
   });
 
-  it('renders sign in form when users signs out', () => {
+  it('renders sign in form when users signs out', async () => {
     mockAuthenticatedUser();
+    customRender();
 
-    const { getByTestId } = render(<App />);
+    await waitForElementToBeRemoved(() => screen.getByTestId('page-loading'));
+    fireEvent.click(screen.getByTestId('sidebar-burger'));
 
-    fireEvent.click(getByTestId('logout-button'));
+    fireEvent.click(screen.getByTestId('logout-button'));
 
     expect(firebase.auth().signOut).toBeCalledWith();
   });

src/components/AnswersProvider/AnswersProvider.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen, wait } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import AnswersProvider, { AnswersContext } from './AnswersProvider';
 import questionsService from './answersService';
 
@@ -17,22 +17,19 @@ const DataBroadcast = ({ onClick, newAnswer }) => (
     </AnswersContext.Consumer>
   </AnswersProvider>
 );
+const storedAnswers = { 0: { answer: 'DT' }, 1: { answer: 'CT' } };
+beforeEach(() => {
+  jest
+    .spyOn(questionsService, 'getAnsweredQuestions')
+    .mockImplementation(() => Promise.resolve(storedAnswers));
+});
 
 describe('QuestionsProvider', () => {
-  const storedAnswers = { 0: { answer: 'DT' }, 1: { answer: 'CT' } };
-  beforeEach(() => {
-    jest
-      .spyOn(questionsService, 'getAnsweredQuestions')
-      .mockImplementation(() => Promise.resolve(storedAnswers));
-  });
-
   it('should return all stored questions', async () => {
     const mockedOnClick = jest.fn();
     render(<DataBroadcast onClick={mockedOnClick} />);
 
-    await wait(() => {
-      fireEvent.click(screen.getByText('Get answers'));
-    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Get answers' }));
 
     expect(mockedOnClick).toHaveBeenCalledWith(storedAnswers);
   });
@@ -42,10 +39,10 @@ describe('QuestionsProvider', () => {
     const mockedOnClick = jest.fn();
     render(<DataBroadcast onClick={mockedOnClick} newAnswer={newAnswer} />);
 
-    await wait(() => {
-      fireEvent.click(screen.getByText('Update answers'));
-      fireEvent.click(screen.getByText('Get answers'));
-    });
+    fireEvent.click(
+      await screen.findByRole('button', { name: 'Update answers' }),
+    );
+    fireEvent.click(await screen.findByRole('button', { name: 'Get answers' }));
 
     const expectedState = {
       ...storedAnswers,

src/components/CityProvider/__mocks__/CityProvider.js

@@ -13,6 +13,11 @@ const CityProvider = ({ city = fakeCity, children }) => {
         })),
       })),
     })),
+    options: jest.fn({
+      projectId: jest.fn(12345),
+    }),
+    auth: jest.fn().mockReturnThis(),
+    signInWithCustomToken: jest.fn().mockResolvedValue(),
   };
 
   return (

src/components/Question/Question.js

@@ -19,6 +19,7 @@ const Question = ({ id, onSkip, onBack, value, user, minAnswers }) => {
   const { firebase, currentUser, questionnaire, cityPath } = useContext(
     CityContext,
   );
+
   const { answers, updateAnswers, getAnswersMap } = useContext(AnswersContext);
   const answersLength = Object.values(answers).length;
 
@@ -73,7 +74,7 @@ const Question = ({ id, onSkip, onBack, value, user, minAnswers }) => {
   const handleSubmit = (event) => {
     event.preventDefault();
 
-    if (!event.target.answer.value) {
+    if (!event?.target?.answer?.value) {
       setErrorMessage('Escolha uma opção.');
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
@@ -99,12 +100,16 @@ const Question = ({ id, onSkip, onBack, value, user, minAnswers }) => {
 
   const handlePrevious = () => {
     setErrorMessage(null);
-    onBack();
+    if (onBack) {
+      onBack();
+    }
   };
 
   const handleSkip = () => {
     setErrorMessage(null);
-    onSkip();
+    if (onSkip) {
+      onSkip();
+    }
   };
 
   return (

src/components/Question/Question.test.js

@@ -1,26 +1,41 @@
 import React from 'react';
-import { render, screen, wait } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
 
 import Question from './Question';
 
+import { ROLE_VOTER } from 'constants/userRoles';
+
 import CityProvider from 'components/CityProvider/CityProvider';
+import AnswersProvider from 'components/AnswersProvider/AnswersProvider';
+import questionsService from 'components/AnswersProvider/answersService';
+
+const storedAnswers = { 0: { answer: 'DT' }, 1: { answer: 'CT' } };
+beforeEach(() => {
+  jest
+    .spyOn(questionsService, 'getAnsweredQuestions')
+    .mockImplementation(() => Promise.resolve(storedAnswers));
+});
 
 jest.mock('components/CityProvider/CityProvider');
 
 describe('Question', () => {
   it('renders the provided question', async () => {
-    const mockSave = jest.fn();
+    const mockedUser = { role: ROLE_VOTER };
 
     render(
-      <CityProvider>
-        <Question id={1} onSave={mockSave} />
-      </CityProvider>,
+      <BrowserRouter>
+        <CityProvider>
+          <Question user={mockedUser} id={1} />
+        </CityProvider>
+      </BrowserRouter>,
+      {
+        wrapper: AnswersProvider,
+      },
     );
 
-    expect(screen.getByText('Any question title 1')).toBeVisible();
-    userEvent.click(screen.getByText('Discordo'));
-    userEvent.click(screen.getByText('Salvar'));
-    await wait(() => expect(mockSave).toBeCalled());
+    expect(await screen.findByText('Any question title 2')).toBeInTheDocument();
+
+    expect(screen.getByLabelText('Discordo')).toBeInTheDocument();
   });
 });

src/components/Sidebar/Navigation.js

@@ -59,6 +59,7 @@ const Navigation = ({ user }) => {
   return (
     <div>
       <StyledBurger
+        data-testid="navigation-burger"
         aria-label="Abrir ou fechar menu"
         open={true}
         onClick={toggleSidebar}
@@ -86,7 +87,9 @@ const Navigation = ({ user }) => {
       </Ul>
       <Divider />
       <QuestionsBoard user={user} />
-      <StyledLogout onClick={handleLogout}>Sair</StyledLogout>
+      <StyledLogout data-testid="logout-button" onClick={handleLogout}>
+        Sair
+      </StyledLogout>
     </div>
   );
 };

src/components/Sidebar/Sidebar.js

@@ -11,7 +11,11 @@ export default function Sidebar({ user }) {
 
   return (
     <SidebarProvider isOpen={isOpen} toggleSidebar={toggleSidebar}>
-      <StyledBurger aria-label="Abrir ou fechar menu" onClick={toggleSidebar}>
+      <StyledBurger
+        data-testid="sidebar-burger"
+        aria-label="Abrir ou fechar menu"
+        onClick={toggleSidebar}
+      >
         <span />
         <span />
         <span />

src/components/User/SignInForm.js

@@ -64,7 +64,11 @@ const SignInForm = ({ updateErrorMessage, setShowForgotPasswordForm }) => {
           disabled={loading}
           data-testid="submit-button"
         >
-          {loading ? <Spinner color="light" size="sm" /> : 'Entrar'}
+          {loading ? (
+            <Spinner data-testid="submit-loader" color="light" size="sm" />
+          ) : (
+            'Entrar'
+          )}
         </Button>
       </Form>
       <StyledSpan>

src/components/User/SignUpForm.js

@@ -144,7 +144,7 @@ const SignUpForm = ({ onBackClick, user }) => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Row>
         <Col>
-          {loading && <Spinner color="primary" />}
+          {loading && <Spinner data-testid="signup-loader" color="primary" />}
           {errorMessage && <Alert color="danger">{errorMessage}</Alert>}
 
           <FormGroup>

src/components/molecules/PageLoading/PageLoading.jsx

@@ -6,7 +6,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 const PageLoading = () => {
   return (
-    <Container fluid className="text-primary">
+    <Container fluid className="text-primary" data-testid="page-loading">
       <Row className="vh-100">
         <Col sm="12" className="text-center my-auto">
           <h1 className="display-4">

src/pages/Home.js

@@ -40,7 +40,11 @@ const HomePage = () => {
   const name = currentUser.displayName;
 
   return (
-    <Container className="py-4" style={{ lineHeight: '20px' }}>
+    <Container
+      data-testid="app"
+      className="py-4"
+      style={{ lineHeight: '20px' }}
+    >
       {!enableRanking && <Modal name={name} />}
 
       <StyledUserName className="mt-3">Olá, {name},</StyledUserName>