#VemProReact #JEP #9

#VemProReact

Correção da atividade!

...

<Header
  appName="Usuário Dashboard"
  appInitials="UD"
  clientName="#VemProReact #JEP"
  avatarInitials="DX"
  avatarAlt="Daniel Xavier"
/>

...

App.js

#VemProReact

Correção da atividade!

...

"@bayon/commons@^2.7.6":
  version "2.7.6"
  resolved "https://artifactory.softplan.com.br/artifactory/api/npm/npm/@bayon..."
  integrity sha1-xu1nelkoX1uquDU5Btx5nQWjers=
  dependencies:
    "@bayon/svg-icons" "2.3.2"
    "@material-ui/core" "4.9.1"
    classnames "2.2.6"
    date-fns "2.9.0"
    react-select "3.0.8"
    react-text-mask "5.4.3"
    react-transition-group "4.3.0"

...

yarn.lock

yarn upgrade-interactive --latest

#VemProReact

Correção da atividade!

...

const styles = {
  grid: {
    width: '100%',
    padding: '12px 24px'
  },
  title: {
    textTransform: 'uppercase'
  },
  form: {
    width: '100%'
  },
  button: {
    marginTop: '12px'
  }
};

...

export default withTranslation(['common'])(withStyles(styles)(Dados));

Dados/index.js

#VemProReact

Correção da atividade!

...

const styles = {
  grid: {
    width: '100%',
    padding: '12px 24px'
  },
  title: {
    textTransform: 'uppercase'
  }
};

...

export default withStyles(styles)(LotacaoPrincipal);

LotacaoPrincipal.js

const EmptyStateContainer = styled('div')({
  height: 'calc(100vh - 48px)'
});

LotacaoPrincipal.js

#VemProReact

Correção da atividade!

yarn add --dev @bayon/scripts

#VemProReact

Correção da atividade!

...

<Auth
  functions={['USR_USUARIOS_ACESSAR']}
  withoutAuthComponent={
    <EmptyStateContainer>
      <EmptyState
        icon="Blocked"
        title="Calma, Brother!"
        subtitle="Você não tem permissão para acessar os dados do usuário"
      />
    </EmptyStateContainer>
  }
>
  <>
    <Dados usuario={usuario} />
    <LotacaoPrincipal foro={foro} />
  </>
</Auth>

...

App.js

#VemProReact

Correção da atividade!

...

<Auth functions={['USR_USUARIOS_ALTERAR']}>
  <Grid item xs={12}>
    <Button
      className={classes.button}
      variant="primary"
      type="submit"
      loading={loading}
      disabled={loading || !canSubmit}
    >
      {t('SAVE')}
    </Button>
  </Grid>
</Auth>

...

Dados/index.js

#VemProReact

Correção da atividade!

...

const [canSubmit, setCanSubmit] = useState(false);

  useEffect(() => {
    const { id, nome, documento, genero } = usuarioForm;

    setCanSubmit(!!id && !!nome && !!documento && !!genero);
  }, [
    usuarioForm.id,
    usuarioForm.nome,
    usuarioForm.documento,
    usuarioForm.genero
  ]);

...

Dados/index.js

#VemProReact

Correção da atividade!

Dados/index.js

...

<Input
  ...
  required={true}
  error={!usuarioForm?.nome}
  errorText="Nome é um campo obrigatório"
/>

...

<Button
  className={classes.button}
  variant="primary"
  type="submit"
  loading={loading}
  disabled={loading || !canSubmit}
>
  {t('SAVE')}
</Button>

...

#VemProReact

Pirâmide de testes

O que é?

Do que é composta?

#VemProReact

Pirâmide de testes

#VemProReact

Testes unitários

O que vamos testar?

#VemProReact

Testes unitários

  • Components
     
  • Functions
     
  • Tudo mais que tiver lógica envolvida e for escrito no projeto

Na prática:

#VemProReact

Jest

  • Framework
     
  • Foco na simplicidade
     
  • Funciona muito bem com React
     
  • Recomendado pelos próprios criadores do React
     
  • Nos permite validar a cobertura do código nos testes

#VemProReact

Jest

"Jest is a delightful JavaScript Testing Framework with a focus on simplicity."

Referências para estudos:

https://jestjs.io/docs/en/getting-started.html

#VemProReact

React Testing Library

  • Library
     
  • Foco nas boas práticas de teste
     
  • Funciona muito bem com Jest
     
  • É baseado no DOM
     
  • Recomendado pelos próprios criadores do React

#VemProReact

React Testing Library

"Simple and complete React DOM testing utilities that encourage good testing practices."

Referências para estudos:

https://github.com/testing-library/react-testing-library

#VemProReact

Code Coverage

  • O que estamos testando?
     
  • O que não estamos testando?
     
  • O quanto testamos?
     
  • O quanto não testamos?

Na teoria:

#VemProReact

Code Coverage

Na prática:

  • % Statements
     
  • % Branches
     
  • % Functions
     
  • % Lines

#VemProReact

Code Coverage

MEU_PROJETO/coverage/lcov-report/index.html

Na prática:

yarn coverage

#VemProReact

Code Coverage

...

"jest": {
  "coverageThreshold": {
    "global": {
      "statements": 0,
      "branches": 0,
      "functions": 0,
      "lines": 0
    }
  },
  "collectCoverageFrom": [
    "src/**/*.js",
    "!src/dev/**",
    "!src/lib/services/graphql/**",
    "!src/lib/setupTests.js"
  ]
}

...

package.json

#VemProReact

Render Testing

Como fazer?

#VemProReact

Render Testing

Na teoria:

  • Importar o React
  • Importar o render do RTL
  • Importar o componente
  • Criar um describe ("MeuBotao component")
  • Criar um test / it ("Should renders the component")
  • Extrair o container do componente renderizado
  • Validar se o container foi criado com sucesso (expect)

#VemProReact

Render Testing

De quantas linhas de código eu preciso para ter 100% de cobertura em um componente*?

#VemProReact

Render Testing

Na prática:

import React from 'react';

// RTL
import { render } from '@testing-library/react';

// Components
import MeuBotao from '../MeuBotao';

describe('MeuBotao component', () => {
  test('Should renders the component', () => {
    const { container } = render(<MeuBotao />);

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

Com apenas 15 linhas de código eu garanto 100% de cobertura de um componente*!

#VemProReact

Dúvidas?

#VemProReact

Atividade!

  1. Criar uma pasta para cada componente, no mesmo nível e com o mesmo nome do arquivo do componente
  2. Mover o arquivo do componente para a pasta criada e renomeá-lo para index.js
  3. Criar um arquivo MyComponent.styles.js na pasta de todos os componentes que tiverem algum JSS definido e mover os respectivos códigos para esses arquivos
  4. Excluir o arquivo App.test.js
  5. Configurar o jest no package.json conforme exemplo
  6. Criar um arquivo LotacaoPrincipal.test.js na pasta LotacaoPrincipal
  7. Implementar um teste "Should renders the component"

#VemProReact

Obrigado!

#VemProReact #JEP #9

By Softplan Planejamento e Sistemas

Made with Slides.com

#VemProReact #JEP #9

Pirâmide de testes; Testes unitários; Jest; React Testing Library; Code coverage; Render testing

  • 318

More from Softplan Planejamento e Sistemas