The document provides a comprehensive guide on integrating testing frameworks like Jasmine and Mocha with JavaScript applications, including setups for Cordova and Angular2 with TypeScript. It outlines the necessary npm packages, configuration steps for Karma, and demo examples for testing using these frameworks. Contact information for the authors and links to their blog and GitHub repository are also included.

1. Globalcode – Open4education
Trilha Javascript
Integrando frameworks de teste em
sua aplicação Javascript

2. Globalcode – Open4education
Agenda
Frameworks de Teste
Bibliotecas de Teste
Demo Jasmine
Demo Mocha
Demo Mocha aplicativo Cordova
Demo Mocha aplicativo Angular2 + Typescript

3. Globalcode – Open4education
Frameworks de Teste
QUnit
Jasmine
Mocha

4. Globalcode – Open4education
Bibliotecas de Teste
Karma
Chai
should, expect, assert
Sinon
Protractor
Supertest

5. Globalcode – Open4education
Demo Jasmine +
Karma

6. Globalcode – Open4education
Demo Jasmine + Karma
1. Módulos NPM:
gulp, gulp-karma-runner, jasmine-core, karma, karma-chrome-
launcher, karma-html-detailed-repórter, karma-jasmine
2. Inicializar karma.conf.js (karma init
karma.conf.js)
• Especificar jasmine como Framework de teste
• Configurar htmlDetailed reporter
3. Definir tasks gulp para executar karma
4. Definir arquivo de teste usando jasmine

7. Globalcode – Open4education
Demo Mocha + Karma

8. Globalcode – Open4education
Demo Mocha + Karma
1. Módulos NPM:
gulp, gulp-karma-runner, ,mocha, karma, karma-chrome-launcher,
karma-html-detailed-repórter, karma-mocha, karma-chai
2. Inicializar karma.conf.js (karma init karma.conf.js)
• especificar jasmine como Framework de teste
• Configurar htmlDetailed reporter
3. Definir tasks gulp para executar karma
4. Definir arquivo de teste usando jasmine

9. Globalcode – Open4education
Demo Cordova
Testando com Mocha + Karma

10. Globalcode – Open4education
Demo Cordova
1. Instalar pacotes NPM: mocha ou jasmine
2. Instalar cordova e ripple-emulator via npm
3. Adicionar plataforma no projeto. Exemplo:
cordova platform add android
4. Instalar extensão Cordova Tools no VSCode
5. No VSCode, fazer build do projeto cordova
cordova build
6. Configurar build (ripple emulator) ou debug (configure cordova e use
“simulate android in browser”)

11. Globalcode – Open4education
Demo Angular2 +
Typescript
Testando com Mocha + Karma

12. Globalcode – Open4education
Demo Angular2 +
Typescript
1. Instalar pacotes NPM: mocha ou jasmine
2. Modulos Typescript:
typescript, typings, ts-loader, karma-typescript-preprocessor2
3. Inicializar karma.conf.js e especificar mocha e chai
como Frameworks de teste
4. Definir tasks gulp para executar karma
5. Definir arquivo de teste usando chai

13. Globalcode – Open4education
Contato
João Ronaldo Cunha
joao.cunha@eldorado.org.br
Vinicius Dias
vinicius.dias@eldorado.org.br
Blog
http://talkitbr.com
https://github.com/talkitbr