Slide 1

Slide 1 text

Moldando a pirâmide de testes da sua aplicação React

Slide 2

Slide 2 text

Quem sou eu? Inajara Leppa Desenvolvedora na Creditas há 6 meses Defensora dos testes automatizados

Slide 3

Slide 3 text

Por que testar?

Slide 4

Slide 4 text

Garantir a qualidade da solução desenvolvida e reduzir riscos que podem impactar as usuárias finais da aplicação, além de servir como documentação da aplicação. “Melhor um bug na mão da desenvolvedora que na mão da usuária”

Slide 5

Slide 5 text

Testar ao longo do desenvolvimento ao invés de testar apenas no final Prevenir bugs ao invés de encontrar bugs Testar o entendimento ao invés de checar funcionalidades Construir o melhor sistema ao invés de quebrar o sistema O time é responsável pela qualidade ao invés de as testers são responsáveis pela qualidade

Slide 6

Slide 6 text

Por que automatizar?

Slide 7

Slide 7 text

Automação de testes é o uso de ferramentas para controlar a execução dos testes. Os objetivos da automação de testes é tornar a prevenção a erros mais rápida e assertiva e também economia de tempo na execução de tarefas repetitivas. Os testes automatizados servem como forma de documentar a aplicação e assim facilitar o entendimento do código e entrada de novas pessoas. “Descobrir o inesperado é mais importante do que confirmar o conhecido.“ - George E. P. Box

Slide 8

Slide 8 text

Pirâmide de testes

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

É o tipo de teste responsáveis por validar comportamentos individuais da menor partes testável de um software (ex: função, lógica de negócio). O objetivo do teste unitário é cobrir os diferentes cenários de retorno para um determinado trecho de código, incluindo falhas, casos extremos, etc.

Slide 11

Slide 11 text

Testes unitários devem ser orientados à comportamento. Isso garante que ao haver refatoração os testes não quebrem. Uma característica desse tipo de teste é ser isolado de qualquer dependência externa como banco de dados ou serviços externos e algumas vezes isolados de outras lógicas internas da aplicação, utilizando dados fakes quando necessário.

Slide 12

Slide 12 text

O teste de integração é o processo de verificar se os componentes de um software, juntos, possuem o comportamento esperado. Os testes de integração possuem isolamento com dependências de serviços externos, utilizando dados fake quando necessário testar a interface com esses serviços.

Slide 13

Slide 13 text

Testes de integração são mais utilizados para testar o comportamentos de uma funcionalidade, diferente dos testes unitários que focam mais em funções/lógicas específicas e dos testes de ponta a ponta que testam o sistema como um todo. São conhecidos também como testes de componentes ou de serviços.

Slide 14

Slide 14 text

Teste de ponta a ponta refere-se a um tipo de teste de software que envolve testar o fluxo de uma aplicação do início ao fim. O objetivo é replicar cenários reais de usuários para que o sistema possa ser validado quanto à integração e integridade dos dados. Testes unitários Testes de interface

Slide 15

Slide 15 text

Diferente dos testes unitários e de integração, os testes de ponta a ponta na maioria se comunica com as dependências externas, para conseguir garantir que o fluxo todo está funcionando. São os testes que levam mais tempo, tanto para escrever quanto para executar e por isso geralmente cobrem mais os casos de caminho feliz dos fluxos. São conhecidos também como testes funcionais, de aceitação ou de fluxo

Slide 16

Slide 16 text

Ferramentas

Slide 17

Slide 17 text

Testes unitários e integração

Slide 18

Slide 18 text

● É uma biblioteca de teste de unidade JavaScript, usada pelo Facebook para testar serviços e aplicativos React. ● Atua como um executor de teste, biblioteca de asserção e biblioteca de mocking. ● Funciona com outros frameworks Javascript.

Slide 19

Slide 19 text

● É um utilitário de teste de JavaScript para React que torna mais fácil realizar asserções, manipular e testar a saída de seus componentes. ● Funciona apenas com React. ● Possui suporte a react hooks com algumas limitações.

Slide 20

Slide 20 text

Shallow: Renderiza apenas o componente que está sendo testado, ou seja, os filhos não são renderizados. Mount: Renderização total do componente com execução dos ciclos de vida do componente. Render: Renderização total do componente sem a execução dos ciclos de vida do componente. import { shallow, render, mount } from ‘enzyme';

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

Testes de componente

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Teste com integração

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

30 [email protected] twitter: @inajara_ https://www.linkedin.com/in/inajara-leppa/