#VemProReact #JEP #11

#VemProReact

Correção da atividade!

yarn upgrade-interactive
...
"collectCoverageFrom": [
  "src/**/*.js",
  "!src/dev/**",
  "!src/**/*.styles.js",
  "!src/lib/services/graphql/**",
  "!src/lib/setupTests.js"
]
...

package.json

#VemProReact

Correção da atividade!

...

let props;

describe('LotacaoPrincipal component', () => {
  beforeEach(() => {
    props = {
      foro: {}
    };
  });

  test('Should renders the component', () => {
    const { container } = render(<LotacaoPrincipal {...props} />);

    expect(container).toBeDefined();
  });
});

LotacaoPrincipal.test.js

#VemProReact

Correção da atividade!

...

test('Should renders the component', () => {

...

test('Should renders the component with options', async () => {

...

test('Should renders the component with value', () => {

...

test('Should handle input change', async () => {

...

test('Should handle option change', async () => {

...

SelectCargo.test.js

#VemProReact

Correção da atividade!

...

test('Should renders the component with Auth', async () => {
  const { container, queryByText } = render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <ToastProvider maxSnack={3}>
        <Dados {...props} />
      </ToastProvider>
    </MockedProvider>
  );

  await wait(0);

  const button = queryByText('SAVE');

  expect(container).toBeDefined();
  expect(button).not.toBeNull();
});

...

Dados.test.js

#VemProReact

Correção da atividade!

...

test('Should execute callback function', () => {
  
...

test('Should execute callback function after default wait', () => {

...

debounce.test.js

#VemProReact

Correção da atividade!

#Desafio!

https://git-unj.softplan.com.br/vemproreact-jep/vemproreact-jep => aula-10-desafio

#VemProReact

__mocks__

  • Pasta criada para colocar os mocks dos testes
  • Criamos uma pasta __mocks__ na raiz do projeto
  • Queries / Mutations response
  • REST response
  • Props default values

Referências para estudos:

https://jestjs.io/docs/en/manual-mocks

#VemProReact

paths

O problema:

import { GET_SOMETHING } from '../../../../services/graphql/queries';
import { MOCK_SOMETHING } from '../../../../../__mocks__/apollo/something';

#VemProReact

paths

A solução:

{
  "compilerOptions": {
    "baseUrl": "src/lib"
  }
}

jsconfig.json

"jest": {
  "moduleNameMapper": {
    "^lib(.*)$": "<rootDir>/src/lib$1",
    "^__mocks__(.*)$": "<rootDir>/__mocks__$1"
  }
}

package.json

import { GET_SOMETHING } from 'services/graphql/queries';
import { MOCK_SOMETHING } from '__mocks__/apollo/something';

#VemProReact

data-testid

  • Criado para dar um id para o elemento
     
  • Evita que os testes quebrem por alterações strings ou de CSS, por exemplo
     
  • Facilita a automatização dos testes E2E

#VemProReact

Defects

#VemProReact

Fluxo GitLab

  • Baixar o projeto na versão correta
     
  • Criar uma branch com o nome fix/NUMERO_DEFECT
     
  • Corrigir o erro e fazer os commits
     
  • Abrir um MR da sua branch para a branch original

#VemProReact

Dúvidas?

#VemProReact

Atividade!

  1. Clonar o repositório das aulas (branch: aula-11)
  2. Criar uma branch fix/123456-{NOME}-{SOBRENOME}
  3. Renomear os arquivos index.js (components) para NomeDoComponent.js e criar um novo index.js que vai importá-lo e exportá-lo como default
  4. Mover os mocks dos testes para a pasta __mocks__ seguindo uma estrutura lógica/domínio
  5. Configurar o jsconfig.json / moduleNameMapper e resolver todos os imports
  6. Adicionar data-testid aos elementos e substituir todos os getByText e queryByText
  7. Abrir um MR para a branch aula-11 e marcar Daniel Xavier como Assignee

#VemProReact

Obrigado!

Made with Slides.com