Unit Test JavaScript

Testes com JavaScript

Cadu PedroniDanilo Vitoriano

São Paulo, 2016

Por que testar?Eis a questão

Aplicação sem testes

Fonte: @darlanmendonca

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!