TDC 2016 SP - 5 libs de teste JavaScript que você deveria conhecer

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

Transcript

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