1. Testes unitários com QUnit

2. Sobre o QUnit
• Framework de testes unitário para javascript
• De uso fácil e bem documentado
• Indicado para testar código javascript, independente de markup
• Desenvolvido originalmente por John Resig, criador do jQuery
• Utilizado por: jQuery, jQuery UI, jQuery Mobile
• Existem diversos plugins e métodos de integração
213/3/2014

3. 13/3/2014 3
Teste unitário

4. Definição
Teste unitário
413/3/2014
“É um código
executável que
testa uma unidade
funcional do
software”

5. Por que testar?
• Testes são documentação executável
• Testes garantes mudanças sem erros
• Problemas são facilmente identificados
513/3/2014
Teste unitário

6. Sobre teste unitário
Teste unitário
613/3/2014
“Um
desenvolvedor
que não faz testes
é como um
cirurgião que não
lava as mãos”
Robert C. Martin
(Uncle Bob)

7. 13/3/2014 7
Como utilizar o QUnit

8. 13/3/2014 8
testes
HTML
QUnit
+
+
Testes unitários

9. HTML
Exemplo – Widgets do UOL Perfil
913/3/2014

10. Testes
Exemplo – Widgets do UOL Perfil
1013/3/2014

11. Exemplo: Widgets do UOL Perfil

12. 13/3/2014 12
Também pode ser instalado via NPM
$ npm install qunit
ou se preferir
$ npm install -g qunit

13. 13/3/2014 13
Estrutura dos testes

14. Arquivos
Estrutura dos testes
1413/3/2014

15. Configuração
Estrutura dos testes
1513/3/2014
module()
Agrupa casos de teste relacionados em módulo. Ajuda na
organização.

16. Configuração
Estrutura dos testes
1613/3/2014
test()
Define um caso de teste.

17. Assertions
Estrutura dos testes
1713/3/2014
equal(), notEqual, ok(), strictEqual(),
notStrictEqual(), etc…
Asserções/Afirmações que serão utilizadas para testar a
funcionalidade. Descreve como a funcionalidade deve se
comportar.

18. Checkpoint
Estrutura dos testes
1813/3/2014

19. Complementando
Estrutura dos testes
1913/3/2014
Escrevendo mais casos de teste

20. Checkpoint
Estrutura dos testes
2013/3/2014

21. Complementando
Estrutura dos testes
2113/3/2014
Criando mais módulos

22. Checkpoint
Estrutura dos testes
2213/3/2014

23. Exemplo de erro
Estrutura dos testes
2313/3/2014

24. Mais asserts
Estrutura dos testes
2413/3/2014
strictEqual()
Verifica se o valor e tipo são iguais.
strictEqual(0, false, “Vai falhar!");
equal(0,false, “Vai passar!");
strictEqual(10,”10”, “Também var falhar!");
strictEqual(10,”10”, “Vai falhar miseravelmente!");
Como comparar com “===“ ou “!==“

25. Mais asserts
Estrutura dos testes
2513/3/2014
deepEqual()

26. Mais asserts
Estrutura dos testes
2613/3/2014
Falar de setup/teardown, deepEqual,
assyncTest

27. 13/3/2014 27
Integrando o QUnit

28. Integrando o QUnit
• Existem diversas maneiras de integração com o QUnit
• Escolha a melhor maneira de integração, baseado nas ferramentas e características
de seu projeto
2813/3/2014
Jenkins Grunt PhantomJS Qunit Notifier
. . .

29. Jenkins
Integrando o QUnit
2913/3/2014

30. PhantomJS
Integrando o QUnit
3013/3/2014

31. Qunit Notifier
Integrando o QUnit
3113/3/2014

32. Referências
QUnit: http://qunitjs.com
Github: https://github.com/jquery/qunit
Documentação: http://api.qunitjs.com
Plugins: http://qunitjs.com/plugins
Cookbook: http://qunitjs.com/cookbook
3213/3/2014

33. Av. Brig. Faria Lima, 1.384, 4º andar
CEP 01452-002 . São Paulo/SP
Telefone: 11 3914.9559
www.uol.com.br
13/3/2014 33
Obrigado ;-)
Equipe de Concepção & Interface de Produtos – P&D