Globalcode – Open4education

5 libs de teste JavaScript que você deveria conhecer

Stefan Teixeirastefanfk@gmail.com / @stefan_teixeira

• 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

Testes Automatizados

Pirâmide de Automação de Testes

(Mike Cohn - Succeeding With Agile)

5 libs que você deveria conhecer

#1 Karma

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

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

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

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

Karma Browsers

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)

#2 Sinon.js

Sinon.js

• Melhor framework para mocks/stubs/spies

http://sinonjs.org | https://github.com/sinonjs/sinon

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

Simples spies e stubs

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/

#3 Supertest

Supertest

• Criado pelo TJ Holowaychuk

https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

Supertest

• Criado pelo TJ Holowaychuk

• MUITO simples

https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

Supertest

• Criado pelo TJ Holowaychuk

• MUITO simples

• Independente de framework (Jasmine, Mocha, etc)

https://www.npmjs.com/package/supertest | https://github.com/visionmedia/supertest

GET

POST

supertest-as-promised

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

Projeto de exemplo

• https://github.com/stefanteixeira/demo-supertest

• API REST simples com Node.js + MongoDB

• Testes com Supertest (com e sem Promises)

#4 Protractor

Protractor

• Framework para testes e2e (end-to-end)

http://www.protractortest.org | https://github.com/angular/protractor

Protractor

• Framework para testes e2e (end-to-end)

• Usa o Selenium WebDriver (WebDriverJs)

http://www.protractortest.org | https://github.com/angular/protractor

Protractor

• Criado pela equipe do AngularJS

http://www.protractortest.org | https://github.com/angular/protractor

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

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

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/

#5 VisualReview-

protractor

VisualReview-protractor

• API do VisualReview pro Protractor para Visual Regression Testing

https://github.com/xebia/VisualReview | https://github.com/xebia/VisualReview-protractor

VisualReview-protractor

• API do VisualReview pro Protractor para Visual Regression Testing

• MUITO simples

https://github.com/xebia/VisualReview | https://github.com/xebia/VisualReview-protractor

Exemplo

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/

Globalcode – Open4education

Stefan Teixeira @stefan_teixeira stefanfk@gmail.com

Obrigado!

stefanteixeira.com.br stefanteixeira.com