O documento introduz os principais conceitos e técnicas de testes no front-end, incluindo: (1) a importância dos testes para reduzir custos de correção de bugs, (2) a pirâmide de testes com ênfase em testes unitários, (3) o "Troféu de testes" e a inclusão de testes estáticos, e (3) as principais técnicas como teste de regressão, de caixa preta/branca/cinza, de fumaça e de carga.

1. INTRODUÇÃO AOS
TESTES NO FRONT-END

2. O que vai ser falado nessa Tech Talk?
O que são testes?
Qual a importância dos testes?
Custo para corrigir bugs em produção
Pirâmide de testes
Troféu de testes
Quais as principais técnicas usadas nos testes de software?

3. O que são testes?
O teste de software é um método para checar se a aplicação desenvolvida atende aos
requisitos esperados e para garantir que o programa não tenha nenhum defeito.
O teste de software é uma maneira de avaliar a qualidade da aplicação e reduzir o
risco de falha em operação.

4. Qual a importância dos testes?
Custo-benefício
Segurança
Qualidade do produto
Satisfação do cliente

5. Qual a importância dos testes?
Custo-benefício: é uma das vantagens importantes dos testes de software. Testar
qualquer projeto de TI a tempo ajuda a economizar dinheiro a longo prazo.
Segurança: é o benefício mais vulnerável e sensível dos testes de software, já que as
pessoas procuram por produtos confiáveis no mercado. Por isso, realizar o teste de
software ajuda a remover riscos e problemas mais cedo.

6. Qual a importância dos testes?
Qualidade do produto: é um requisito essencial de qualquer produto de software e,
com os testes, a equipe de desenvolvimento garante que um produto de qualidade
seja entregue aos clientes.
Satisfação do cliente: o principal objetivo de qualquer produto é a satisfação do
cliente. Nesse sentido, os testes de UI/UX garantem a melhor experiência das pessoas
usuárias.

7. Custo para corrigir bugs em produção
O gráfico Capers Jones abaixo mostra a porcentagem de defeitos introduzidos
durante cada fase do ciclo de vida de desenvolvimento. Mais importante, ele
demonstra como o custo para reparar o referido defeito passa de 1x na codificação
para mais de 640x na produção.

8. Capers Jones é um especialista americano em metodologias de engenharia de software, possui diversos livros sobre metodologias, padrões e boas praticas na engenharia de software.

9. Pirâmide de testes
A pirâmide de teste foi mencionada pela primeira vez no livro de Mike Cohn,
Succeeding with Agile (Sucesso com Ágil.)
Ele recomenda que os aplicativos sejam cobertos por muitos testes de unidade que
são a base de nossos testes. Em seguida, escrevemos testes de integração e o pico é
feito a partir de testes E2E (UI).

10. Mike Cohn é um dos contribuidores do método de desenvolvimento de software Scrum. Ele é um dos fundadores da Scrum Alliance. (Wikipedia)

11. Testam a menor unidade do sistema.
Exemplo: Testar apenas um botão.
Texto do botão
Cor
Outras propriedades específicas de um determinado botão.
Testes unitários
Print de um botão da tela de login do App BanQi*

12. Características:
São baratos
São fáceis, comparado aos outros testes.
São precisos.
Garante que cada pequena peça do sistema está funcionando.
Fogem do caso de uso do usuário.
Ferramentas para testes no ecossistema do React:
Jest (Js)
Testing Library/React
Testing Library/React Native
Enzyme
Testes unitários

13. Testam unidades de forma integrada.
Exemplo: Teste na tela de login.
Na tela de login, deve aparecer determinado texto,
determinado botão.
Quando um botão for clicado deve realizar tal navegação,
aparecer um modal, etc.
Testes de integração
Print da tela de login do App BanQi*

14. Características:
São um pouco mais difíceis que os testes unitários.
São menos precisos.
Entregam mais valor
Se aproximam mais do caso de uso
Ferramentas para testes no ecossistema do React:
Jest (Js)
Testing Library/React
Testing Library/React Native
Enzyme
Testes de integração

15. Um teste E2E, ou End-to-End, é um método de teste utilizado
para testar um fluxo da aplicação desde o começo até o fim. Seu
intuito é replicar cenários reais feitos pelos usuários com a
intenção de validar que o sistema esteja funcionando como o
esperado.
Podem ser chamados também como:
Testes de aceitação
Teste de Ponta Ponta
UI Test
Testes E2E

16. Características:
São muito caros
São mais demorados.(Tanto na criação como na execução)
Entregam mais valor
São mais complexos
São muito próximos do caso de uso do usuário.
Geralmente é feito por QA Tester.
Ferramentas para testes no ecossistema do React:
Selenium(React JS - Web)
Cypress(React JS - Web)
Detox(React Native - Mobile)
Testes E2E

17. Teste E2E feito com Detox em uma aplicação React Native

18. O troféu de teste
O Troféu de teste foi apresentado por Kent C. Dodds em 2018.
Traz um novo "teste", os testes estáticos.
Os testes estáticos, ele quer dizer linters e formatadores de código e também
verificadores de tipo como Flux e Typescript. Eles detectam erros de digitação à
medida que você escreve e modifica o código.
Tem como objetivo analisar o código sem precisar executá-lo.

19. Kent C. Dodds é muito conhecimento na comunidade React, ele atua na construção de diversas bibliotecas/frameworks .
Possui diversos artigos sobre boas praticas em escrever testes e sobre assuntos na comunidade Front-End no geral.
Apresentou pela primeira vez o "O troféu de teste" em um tweet feito em 2018.

20. Tem como objetivo analisar o código sem precisar executá-lo,
verificando se as boas práticas adotadas foram efetuadas. O
principal objetivo dessa técnica é identificar erros de
programação, tais como:
Práticas ruins
Falhas de segurança
Testes Estáticos

21. Eslint/Prettier
Typescript

22. As Técnicas de Teste de Software podem ser definidas como as diferentes maneiras
e métodos de testar os programas e instruções, dessa forma garantimos que estejam
funcionando bem e realizando as tarefas especificadas para as quais foram
projetados.
Algumas técnicas de teste de software:
Teste de Regressão
Teste de caixa preta
Teste de caixa branca
Teste de caixa cinza
Teste de Fumaça(Smoke testing)
Teste de carga
Teste de estresse
Testes de usuabilidade
Quais as principais técnicas usadas nos testes de
software?

23. Teste de Regressão
Alterações e atualizações são feitas no software continuamente. Por isso, o teste
de regressão garante que novas versões ou atualizações não tenham criado
problemas para outras áreas que funcionavam bem. O teste é realizado usando
casos de teste anteriores e os novos resultados comparados com os resultados
anteriores.
Teste de caixa preta
Esse é o teste feito em todo o sistema por pessoas que não têm nenhuma idéia
sobre o design, estrutura e implementação do software. Ele é testado para erros
na interface, desempenho, comportamento, estruturas de dados, funções, etc.
Quais as principais técnicas usadas nos testes de
software?

24. Teste de caixa branca
Semelhante ao teste de caixa preta, exceto que o design, a estrutura e a
implementação do software são conhecidos pela pessoa testadora.
Teste de caixa cinza
Um teste que compreende os dois ideais do teste da caixa preta e da caixa
branca: algumas partes do design, estrutura e implementação do item são
conhecidas da pessoa testadora e outras não.
Quais as principais técnicas usadas nos testes de
software?

25. Teste de fumaça
Smoke testing ou teste de fumaça são testes básicos que verificam as funcionalidade
básicas da aplicação, é um processo que deve ser executado de forma rápida para
determinar se o build ou a compilação da aplicação realizada está estável ou não. É uma
confirmação para a equipe decidir se avança ou não para novos testes. Consiste em um
conjunto mínimo de testes para validar as principais funcionalidades.
Teste de carga
O teste de carga é a prática de simular o uso do mundo real, ou carregar, em qualquer
software, site, aplicativo web, API ou sistema para analisar e identificar fatores como
capacidade de resposta, degradação e escalabilidade.
Testar o comportamento em um cenário com muitos usuários.
Quais as principais técnicas usadas nos testes de
software?

26. Teste de estresse
É realizado para submeter o software a situações extremas. Basicamente, o teste de
estresse baseia-se em testar os limites do software e avaliar seu comportamento. Assim,
avalia-se até quando o software pode ser exigido e quais as falhas (se existirem)
decorrentes do teste.
Testa a aplicação até o seu limite.
Teste de usuabilidade
O foco do teste de usabilidade é verificar a interface do usuário, como o texto do site, as
mensagens que aparecem no site, as fontes e as cores usadas no site, etc.
O conteúdo exibido para os usuários no aplicativo está gramaticalmente correto.
As mensagens de erro têm uma linguagem uniforme e gramaticalmente correta.
Os botões e campos têm nomes uniformes e significativos.
Os campos desabilitados e obrigatórios são exibidos da maneira esperada.
Os campos têm dicas de ferramentas e marcadores adequados e fáceis de entender.
etc
Quais as principais técnicas usadas nos testes de
software?

27. FIM!

28. E aí, você!
Bora testar!!!!!?

29. Teste de software: o que é, importância e como fazer? [O GUIA]
https://blog.betrybe.com/tecnologia/teste-software-guia/
Tweet: O Troféu de teste
https://twitter.com/kentcdodds/status/960723172591992832
Why the test pyramid is a bullsh*t — guide to testing towards modern frontend and backend
apps
https://medium.com/@mateuszroth/why-the-test-pyramid-is-a-bullshit-guide-to-testing-towards-modern-frontend-and-backend-apps-4246e89b87bd
Teste de Estresse
http://qualidade-de-software.blogspot.com/2010/01/teste-de-
estresse.html#:~:text=%C3%89%20realizado%20para%20submeter%20o,se%20existirem)%20decorrentes%20do%20teste.
Teste E2E com Detox
https://github.com/wix/Detox
Kubernetes DevOps Tip #7: Cost of Repair in Development vs. Production
https://steinkorsveien.wordpress.com/2021/01/25/the-business%E2%80%8B-value-of-continuous-testing/
The Testing Trophy and Testing Classifications(Kent C. Dodds)
https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications
Capers Jones
https://en.wikipedia.org/wiki/Capers_Jones
Mike Cohn
https://en.wikipedia.org/wiki/Mike_Cohn