Download - Unit Test JavaScript
Testes com JavaScript
Cadu PedroniDanilo Vitoriano
São Paulo, 2016
Por que testar?Eis a questão
Tipos de Testes
- Unitário
- Integração
- Regressão
- Aceitação
- Caixa-preta
- Caixa-branca
- Interface
90%Dos testes são unitários, cobrindo quase todos os comportamentos.
Testes de Interfaces
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.
TDDRed, Green, Refactor1. Escreve o teste2. O teste falha3. Escreve o código4. O teste passa
Test Driven Development
BDDMocks, Stubs, Fakes, Dummies1. Given (dado)2. When (quando)3. Then (então)
Behavior Driven Development
Ferramentas
Seleniumhttp://docs.seleniumhq.org/
Selenium WebDriver é um conjunto de ferramentas para automatizar os navegadores em várias plataformas.
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.
Jasminehttp://jasmine.github.io/
É um framework de desenvolvimento BDD para testar código JavaScript.
Ele não requer um DOM.
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.
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.
Testes de Componentes
Angular 2: Angular CLI
ReactJS: JEST
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.
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
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.
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.
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
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
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
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
TKS!
