Download - Unit Test JavaScript
![Page 1: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/1.jpg)
Testes com JavaScript
![Page 2: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/2.jpg)
Cadu PedroniDanilo Vitoriano
São Paulo, 2016
![Page 3: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/3.jpg)
Por que testar?Eis a questão
![Page 5: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/5.jpg)
Tipos de Testes
- Unitário
- Integração
- Regressão
- Aceitação
- Caixa-preta
- Caixa-branca
- Interface
![Page 6: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/6.jpg)
![Page 7: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/7.jpg)
90%Dos testes são unitários, cobrindo quase todos os comportamentos.
![Page 8: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/8.jpg)
Testes de Interfaces
![Page 9: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/9.jpg)
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.
![Page 10: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/10.jpg)
TDDRed, Green, Refactor1. Escreve o teste2. O teste falha3. Escreve o código4. O teste passa
Test Driven Development
![Page 11: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/11.jpg)
BDDMocks, Stubs, Fakes, Dummies1. Given (dado)2. When (quando)3. Then (então)
Behavior Driven Development
![Page 12: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/12.jpg)
![Page 13: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/13.jpg)
Ferramentas
![Page 14: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/14.jpg)
Seleniumhttp://docs.seleniumhq.org/
Selenium WebDriver é um conjunto de ferramentas para automatizar os navegadores em várias plataformas.
![Page 15: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/15.jpg)
WebdriverIOwebdriver.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.
![Page 16: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/16.jpg)
Jasminehttp://jasmine.github.io/
É um framework de desenvolvimento BDD para testar código JavaScript.
Ele não requer um DOM.
![Page 17: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/17.jpg)
Karmakarma-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.
![Page 18: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/18.jpg)
Protractorwww.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.
![Page 19: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/19.jpg)
Testes de Componentes
Angular 2: Angular CLI
ReactJS: JEST
![Page 20: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/20.jpg)
Mochamochajs.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.
![Page 21: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/21.jpg)
PhantomJSphantomjs.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
![Page 22: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/22.jpg)
QUnitqunitjs.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.
![Page 23: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/23.jpg)
Chaichaijs.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.
![Page 24: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/24.jpg)
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 toEqualExemplo com Jasmine + JavaScript
![Page 25: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/25.jpg)
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('#btnShowMessage'); expect(spyEvent).toHaveBeenTriggered(); }); });
Testing That A DOM Event Was FiredExemplo com Jasmine + jQuery
![Page 26: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/26.jpg)
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 titleExemplo com WebdriverIO
![Page 27: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/27.jpg)
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
![Page 28: Unit Test JavaScript](https://reader035.vdocuments.com.br/reader035/viewer/2022081502/589cd5381a28ab43388b5d37/html5/thumbnails/28.jpg)
TKS!