Testes unitários com JavaScript Apresentado na Oi Internet Tech Talk Danilo Vitoriano e Cadu Pedroni

1. Testes com
JavaScript

2. Cadu Pedroni
Danilo Vitoriano
São Paulo, 2016

3. Por que testar?
Eis a questão

4. Aplicação sem testes
Fonte: @darlanmendonca

5. Tipos de Testes
- Unitário
- Integração
- Regressão
- Aceitação
- Caixa-preta
- Caixa-branca
- Interface

7. 90%
Dos testes são unitários, cobrindo quase todos os comportamentos.

8. Testes de
Interfaces

9. Checklist de uma rotina de testes de interface
Validar Interfaces, se tudo está no lugar
Verificar navegações entre interfaces e APIs, links, requisições
Checar condições de usabilidade, SEO, atributos
Verificar integridade dos dados recebidos e apresentados
Verificar o estado dos objetos de uma interface, se está ativo, desabilitado, etc.
Verificar o formato de campos alfanuméricos, datas, etc.

10. TDD
Red, Green, Refactor
1. Escreve o teste
2. O teste falha
3. Escreve o código
4. O teste passa
Test Driven Development

11. BDD
Mocks, Stubs, Fakes, Dummies
1. Given (dado)
2. When (quando)
3. Then (então)
Behavior Driven Development

13. Ferramentas

14. Selenium
http://docs.seleniumhq.org/
Selenium WebDriver é um conjunto de
ferramentas para automatizar os
navegadores em várias plataformas.

15. WebdriverIO
webdriver.io
Permite que você controle um browser ou um aplicativo
móvel, sem o trabalho de configuração e gerenciamento
das sessões de Selenium para você.
Com as funções de $ e $$, o WebDriverIO fornece atalhos
que podem ser encadeados para capturar elementos da
árvore do DOM.
É possível fazer screenshots.

16. Jasmine
http://jasmine.github.io/
É um framework de desenvolvimento BDD
para testar código JavaScript.
Ele não requer um DOM.

17. Karma
karma-runner.github.io
Karma gera um servidor web que executa o
código-fonte contra o código de teste para
cada um dos navegadores conectados.
Os resultados são examinados e exibidos via
linha de comando para o desenvolvedor de
tal forma que eles podem ver quais
navegadores e testes passaram ou falharam.

18. Protractor
www.protractortest.org
Protractor é um framework de teste para
aplicações AngularJS, executando em um
navegador, interagindo com ele, como um
usuário faria.
Desenvolvida sobre o WebDriverJS, ele
suporta a sintaxe específica do AngularJS,
executando automaticamente o próximo
passo em seu teste no momento em que a
página da Web termina as tarefas pendentes.

19. Testes de Componentes
Angular 2: Angular CLI
ReactJS: JEST

20. Mocha
mochajs.org
O mocha é um framework de teste
JavaScript com NodeJS, que possibilita a
cobertura dos testes tanto no back-end
quanto no front-end.
Devido sua flexibilidade e simplicidade aceita
os estilos de teste TDD, BDD e é compatível
com QUnit.

21. PhantomJS
phantomjs.org
É um WebKit programável com uma API de
JavaScript.
Tem suporte rápido e nativo para vários
padrões web: manipulação do DOM, CSS
selector, JSON, Canvas e SVG.
Executa testes funcionais com frameworks
como o Jasmine, QUnit, Mocha, Capybara,
WebDriver e muitos outros.
- CAPTURA DE TELA
- AUTOMAÇÃO DE PÁGINA
- MONITORAMENTO DE REDE

22. QUnit
qunitjs.com
QUnit é um framework de testes unitários de
fácil uso com JavaScript.
É usado pelo jQuery, jQuery UI e jQuery
Mobile.
Capaz de testar qualquer código JavaScript
genérico, incluindo-se ele mesmo.

23. Chai
chaijs.com
Chai é uma biblioteca de “assertion”
BDD/TDD para Node e para o navegador,
que pode ser acoplada com qualquer
framework de testes de JavaScript.

24. teste1.spec
describe(“Agrupamento de testes”, function(){
it(“Descrição do teste 1”,
function(){
expect(true).toBeTruthy();
});
it(“Descrição do teste 2”, function(){
expect(false).not.toBeTruthy();
});
it(“Descrição do teste 3”, function(){
expect(1+1).toEqual(2);
});
it(“Descrição do teste 4”, function(){
expect(response).toEqual({prop:value}
);
});
});
Testing toBeTruthy and toEqual
Exemplo com Jasmine + JavaScript

25. teste2.spec
describe("Button Click Event Tests", function()
{
var spyEvent;
beforeEach(function() {
setUpHTMLFixture();
});
it ("should invoke the btnShowMessage click
event.", function() {
spyEvent = spyOnEvent('#btnShowMessage',
'click');
$('#btnShowMessage').trigger( "click" );
expect('click').toHaveBeenTriggeredOn('#btnShow
Message');
expect(spyEvent).toHaveBeenTriggered();
});
});
Testing That A DOM Event Was Fired
Exemplo com Jasmine + jQuery

26. teste3.spec
var webdriverio = require('webdriverio');
var options = { desiredCapabilities: {
browserName: 'chrome' } };
var client = webdriverio.remote(options);
client
.init()
.url('https://duckduckgo.com/')
.setValue('#search_form_input_homepage',
'WebdriverIO')
.click('#search_button_homepage')
.getTitle().then(function(title) {
console.log('Title is: ' + title);
// outputs:
// "Title is: WebdriverIO (Software) at
DuckDuckGo"
})
.end();
Testing a text in a title
Exemplo com WebdriverIO

27. Links Úteis
- WebDriverJS: https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs
- Angular CLI: https://cli.angular.io/
- React JEST: https://facebook.github.io/jest/
- Testing DOM Events Using jQuery and Jasmine 2.0:
http://www.htmlgoodies.com/beyond/javascript/js-ref/testing-dom-events-using-jquery-and-
jasmine-2.0.html
- Circle CI: https://circleci.com/
- Mike Cohn: https://www.amazon.com/Succeeding-Agile-Software-Development-
Using/dp/0321579364
- Page Object: http://martinfowler.com/bliki/PageObject.html
- Começar e manter uma suíte de testes: https://tech.vivareal.com.br/começar-e-manter-uma-
suíte-de-testes-8d3d1534a9f3

28. TKS!