unit test javascript
Post on 10-Feb-2017
32 views
Embed Size (px)
TRANSCRIPT
Testes com JavaScript
Cadu PedroniDanilo Vitoriano So Paulo, 2016
Por que testar?Eis a questo
Aplicao sem testesFonte: @darlanmendonca
Tipos de TestesUnitrioIntegraoRegressoAceitaoCaixa-pretaCaixa-brancaInterface
90%Dos testes so unitrios, cobrindo quase todos os comportamentos.
Testes de Interfaces
Checklist de uma rotina de testes de interface
Validar Interfaces, se tudo est no lugarVerificar navegaes entre interfaces e APIs, links, requisiesChecar condies de usabilidade, SEO, atributosVerificar integridade dos dados recebidos e apresentadosVerificar o estado dos objetos de uma interface, se est ativo, desabilitado, etc.Verificar o formato de campos alfanumricos, datas, etc.
TDDRed, Green, RefactorEscreve o testeO teste falhaEscreve o cdigoO teste passaTest Driven Development
BDDMocks, Stubs, Fakes, DummiesGiven (dado)When (quando)Then (ento)Behavior Driven Development
Ferramentas
Seleniumhttp://docs.seleniumhq.org/Selenium WebDriver um conjunto de ferramentas para automatizar os navegadores em vrias plataformas.
WebdriverIOwebdriver.ioPermite que voc controle um browser ou um aplicativo mvel, sem o trabalho de configurao e gerenciamento das sesses de Selenium para voc.Com as funes de $ e $$, o WebDriverIO fornece atalhos que podem ser encadeados para capturar elementos da rvore do DOM. possvel fazer screenshots.
Jasminehttp://jasmine.github.io/ um framework de desenvolvimento BDD para testar cdigo JavaScript.Ele no requer um DOM.
Karmakarma-runner.github.ioKarma gera um servidor web que executa o cdigo-fonte contra o cdigo de teste para cada um dos navegadores conectados.Os resultados so 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.orgProtractor um framework de teste para aplicaes AngularJS, executando em um navegador, interagindo com ele, como um usurio faria.Desenvolvida sobre o WebDriverJS, ele suporta a sintaxe especfica do AngularJS, executando automaticamente o prximo passo em seu teste no momento em que a pgina da Web termina as tarefas pendentes.
Testes de ComponentesAngular 2: Angular CLIReactJS: JEST
Mochamochajs.orgO 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 compatvel com QUnit.
PhantomJSphantomjs.org um WebKit programvel com uma API de JavaScript.Tem suporte rpido e nativo para vrios padres web: manipulao 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 TELAAUTOMAO DE PGINAMONITORAMENTO DE REDE
QUnitqunitjs.comQUnit um framework de testes unitrios de fcil uso com JavaScript. usado pelo jQuery, jQuery UI e jQuery Mobile.Capaz de testar qualquer cdigo JavaScript genrico, incluindo-se ele mesmo.
Chaichaijs.comChai uma biblioteca de assertion BDD/TDD para Node e para o navegador, que pode ser acoplada com qualquer framework de testes de JavaScript.
teste1.specdescribe(Agrupamento de testes, function(){
it(Descrio do teste 1, function(){expect(true).toBeTruthy();});
it(Descrio do teste 2, function(){expect(false).not.toBeTruthy();});
it(Descrio do teste 3, function(){expect(1+1).toEqual(2);});
it(Descrio do teste 4, function(){expect(response).toEqual({prop:value});});
});Testing toBeTruthy and toEqualExemplo com Jasmine + JavaScript
teste2.specdescribe("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.specvar 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 teisWebDriverJS: https://github.com/SeleniumHQ/selenium/wiki/WebDriverJsAngular 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.htmlCircle CI: https://circleci.com/Mike Cohn: https://www.amazon.com/Succeeding-Agile-Software-Development-Using/dp/0321579364Page Object: http://martinfowler.com/bliki/PageObject.htmlComear e manter uma sute de testes: https://tech.vivareal.com.br/comear-e-manter-uma-sute-de-testes-8d3d1534a9f3
TKS!