unit test javascript

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!