O documento apresenta uma discussão sobre testes de software para uma calculadora desenvolvida em React. Ele discute os requisitos funcionais, validação da estrutura dos componentes, integração entre componentes, automação de testes funcionais e de interface gráfica usando bibliotecas como Jest, Chai e Enzyme.

1. Júlio de Lima
Lead QA Engineer
Capco
Desenvolvendo como QAs
15 slides30 min

2. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Base da nossa
discussão!
1

3. Vou verificá-los e desafiá-los antes de iniciar o
desenvolvimento
Requisitos
2

4. Pessoas podem informar um número, seguido de um
operador matemático e mais um número. Se
pressionarem igual, o resultado do cálculo deverá ser
apresentado.
“
Requisito baseado
na calculadora do Mac!
3

5. Qualquer pessoa pode informar um número via teclado ou
mouse, seguido de um operador matemático e mais um número.
Se pressionarem igual ou qualquer operador, o resultado do
cálculo deverá ser apresentado mas se pressionar mais uma
vez o valor deverá permanecer o mesmo.
Quem?Quais? Como?
Esse Se, tem E ou OU?
Esse resultado, tem MAS?
3

6. Vou validar sua estrutura e suas condições lógicas
Componentes
4

7. class CalculatorKey extends React.Component {
render() {
const { onPress, className } = this.props
return (
<PointTarget onPoint={onPress}>
<button className={`calculator-key ${className}`}/>
</PointTarget>
)
}
}
Classe CalculatorKey 5

8. class CalculatorKey extends React.Component {
render() {
const { onPress, className } = this.props
return (
<PointTarget onPoint={onPress}>
<button className={`calculator-key ${className}`}/>
</PointTarget>
)
}
}
Classe CalculatorKey
Possui a className
que eu imputei?
Dispara a o método que defini ao clicar?
5

9. inputDigit(digit) {
const { displayValue, waitingForOperand } = this.state
if (waitingForOperand) {
this.setState({ displayValue: String(digit), waitingForOperand: false })
} else {
this.setState({ displayValue: displayValue === '0' ? String(digit) : displayValue + digit })
}
}
Classe Calculator 6

10. inputDigit(digit) {
const { displayValue, waitingForOperand } = this.state
if (waitingForOperand) {
this.setState({ displayValue: String(digit), waitingForOperand: false })
} else {
this.setState({ displayValue: displayValue === '0' ? String(digit) : displayValue + digit })
}
}
Classe Calculator
Verdadeiro e Falso desse condicional
Verdadeiro e Falso desse condicional
6

11. Vou validar a integração que existe entre os
componentes para validar que são capazes de
funcionar de maneira integrada
Integração entre Componentes
7

12. Qualquer pessoa pode informar um número via teclado ou
mouse, seguido de um operador matemático e mais um número.
Se pressionarem igual ou qualquer operador, o resultado do
cálculo deverá ser apresentado mas se pressionar mais uma
vez o valor deverá permanecer o mesmo.
“
8

13. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
Primeiro valor
Número; Operador matemático
Operação Matemática
Número; Operador matemático
Segundo valor
Número; Operador matemático
Obter resultado
Pressionar o operador uma vez; Pressionar o operador duas vezes
Partição de Equivalência 9

14. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
Variáveis Partições T1 T2 T3 T4 T5 T6
Primeiro valor
10 x x x x x x
+
Operação Matemática
10 x x x x
+ x x
Segundo valor
10 x x x x
+ x x
Obter resultado
Pressionar + uma vez x x x
Pressionar + duas
vezes
x x x
Resultados Visor da calculadora 101010 101010 1010 1010 20 20
Tabela de Decisão 10

15. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
Variáveis Partições T1 T2 T3 T4 T5 T6
Primeiro valor
10 x x x x x x
+
Operação Matemática
10 x x x x
+ x x
Segundo valor
10 x x x x
+ x x
Obter resultado
Pressionar + uma vez x x x
Pressionar + duas
vezes
x x x
Resultados Visor da calculadora 101010 101010 1010 1010 20 20
Tabela de Decisão -> Testes que falharam! 10

16. Para não ter que repetir os testes sempre que
alterar algo no código, vou automatiza-los criando
scripts de teste que repitam minhas ações
Automatizando os testes da UI
11

17. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Passos do script de teste:
Ação Objeto Valor
- - -
- - -
- - -
- - -
- - -
- - -
- - -
12

18. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
- - -
- - -
- - -
- - -
- - -
- - -
Passos do script de teste: 12

19. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
- - -
- - -
- - -
- - -
- - -
Passos do script de teste: 12

20. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
- - -
- - -
- - -
- - -
Passos do script de teste: 12

21. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
Clicar .calculator-key.key-1 -
- - -
- - -
- - -
Passos do script de teste: 12

22. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
- - -
- - -
Passos do script de teste: 12

23. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
- - -
Passos do script de teste: 12

24. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Ação Objeto Valor
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
Clicar .calculator-key.key-1 -
Clicar .calculator-key.key-0 -
Clicar .calculator-key.key-add -
Validar .calculator-display 20
Passos do script de teste: 12

25. Vou usar scripts de teste que validam a aplicação
sob a perspectiva visual, ou seja, posicionamento e
estilos
Automatizando testes da estrutura visual
13

26. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
14

27. Como um usuário
Quero calcular valores usando operações matemáticas
Para ser ágil ao atender meus clientes
Exemplo de requisito
React Calculator
A Pen by @mjijackson
codepen.io/mjijackson/pen/xOzyGX
Regras:
- Deve estar ao lado do ponto
- Deve estar abaixo do +
- Deve ser laranja com fonte
branca!
14

28. Jest, Chai, Enzyme, Sion, Cypress e Galen
Libraries que poderiam ser utilizadas
15
Teste funcional
na UI
Testes na estrutura
interna do componente
Validação estrutural
Da interface gráfica

29. Júlio de Lima
Lead QA Engineer
Capco
iam@juliodelima.com.br
@juliodelimas
Dúvidas?