Palestra apresentada na trilha JavaScript, no dia 05/07.

1. Globalcode – Open4education
5 libs de teste JavaScript que
você deveria conhecer
Stefan Teixeira
stefanfk@gmail.com / @stefan_teixeira

2. • QA Automation Engineer @ Toptal
• Blogs técnicos: stefanteixeira.com.br (pt-br) /
stefanteixeira.com (en)
• Co-organizador dos meetups DevOps Carioca e Grupo de
Testes Carioca
Contatos:
• E-mail: stefanfk@gmail.com
• Twitter: twitter.com/stefan_teixeira
• LinkedIn: linkedin.com/in/stefanteixeira
• GitHub: github.com/stefanteixeira
• SlideShare: slideshare.net/stefanteixeira
Sobre

3. Testes
Automatizados

4. Pirâmide de Automação de Testes
(Mike Cohn - Succeeding With Agile)

8. 5 libs que você
deveria conhecer

15. #1
Karma

16. Karma
• Criado pelo Vojta Jína (na época,
membro da equipe do AngularJS)
https://karma-runner.github.io/1.0/index.html | https://github.com/karma-runner/karma

17. Karma
• Criado pelo Vojta Jína (na época,
membro da equipe do AngularJS)
• Executa os testes (de unidade) em
browsers reais
https://karma-runner.github.io/1.0/index.html | https://github.com/karma-runner/karma

18. Karma
• Feature de “watch” para feedback
imediato a cada save
https://karma-runner.github.io/1.0/index.html | https://github.com/karma-runner/karma

19. Karma
• Feature de “watch” para feedback
imediato a cada save
• Integração com qualquer testing
framework, além de libs de code
coverage, mocks, task runners
https://karma-runner.github.io/1.0/index.html | https://github.com/karma-runner/karma

20. Karma Browsers

22. Projeto de exemplo
• https://github.com/stefanteixeira/fav-organizer/
blob/master/config/karma.config.js (config file)
• https://github.com/stefanteixeira/fav-organizer/
blob/master/Gruntfile.js#L48 (Grunt config)

23. #2
Sinon.js

24. Sinon.js
• Melhor framework para mocks/
stubs/spies
http://sinonjs.org | https://github.com/sinonjs/sinon

25. Sinon.js
• Melhor framework para mocks/
stubs/spies
• Também facilita testes de AJAX e
criação de fake servers
http://sinonjs.org | https://github.com/sinonjs/sinon

26. Simples spies e stubs

27. Links recomendados
• Unit Test like a Secret Agent with Sinon.js: http://
elijahmanor.com/unit-test-like-a-secret-agent-
with-sinon-js/
• Explicando diferenças entre mocks, stubs e spies:
http://gaboesquivel.com/blog/2014/unit-testing-
mocks-stubs-and-spies/

28. #3
Supertest

29. Supertest
• Criado pelo TJ Holowaychuk
https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

30. Supertest
• Criado pelo TJ Holowaychuk
• MUITO simples
https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

31. Supertest
• Criado pelo TJ Holowaychuk
• MUITO simples
• Independente de framework
(Jasmine, Mocha, etc)
https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

32. GET

33. POST

34. supertest-as-promised
https://www.npmjs.com/package/supertest-as-promised
https://github.com/WhoopInc/supertest-as-promised

35. Projeto de exemplo
• https://github.com/stefanteixeira/demo-
supertest
• API REST simples com Node.js + MongoDB
• Testes com Supertest (com e sem Promises)

36. #4
Protractor

37. Protractor
• Framework para testes e2e (end-
to-end)
http://www.protractortest.org | https://github.com/angular/protractor

38. Protractor
• Framework para testes e2e (end-to-
end)
• Usa o Selenium WebDriver
(WebDriverJs)
http://www.protractortest.org | https://github.com/angular/protractor

39. Protractor
• Criado pela equipe do AngularJS
http://www.protractortest.org | https://github.com/angular/protractor

40. Protractor
• Criado pela equipe do AngularJS
• Também funciona (e muito bem)
com apps não-Angular
http://www.protractortest.org | https://github.com/angular/protractor

42. Projeto de exemplo
• Protractor + AngularJS app: https://github.com/
stefanteixeira/fav-organizer/tree/master/test/ui
• Protractor + app não-AngularJS: https://
github.com/stefanteixeira/github-tests

43. Links recomendados
• API Docs: http://angular.github.io/protractor/#/api
• Posts do Daniel Amorim no blog da ThoughtWorks:
• https://www.thoughtworks.com/pt/insights/
blog/testing-angularjs-apps-protractor
• https://www.thoughtworks.com/pt/insights/
blog/hands-protractor-3-steps
• Posts/vídeos do Walmyr Filho sobre Protractor:
http://talkingabouttesting.com/tag/protractor/

44. #5
VisualReview-
protractor

45. VisualReview-protractor
• API do VisualReview pro Protractor
para Visual Regression Testing
https://github.com/xebia/VisualReview | https://github.com/xebia/VisualReview-protractor

46. VisualReview-protractor
• API do VisualReview pro Protractor
para Visual Regression Testing
• MUITO simples
https://github.com/xebia/VisualReview | https://github.com/xebia/VisualReview-protractor

47. Exemplo

48. Projeto de exemplo / Links
• Projeto de exemplo do repo oficial: https://
github.com/xebia/VisualReview-protractor/tree/
master/example-project
• Posts/vídeos do Walmyr Filho: https://
talkingabouttesting.com/tag/visualreview-2/

49. Globalcode – Open4education
Stefan Teixeira
@stefan_teixeira
stefanfk@gmail.com
Obrigado!
stefanteixeira.com.br
stefanteixeira.com