SlideShare uma empresa Scribd logo
1 de 28
Testes com
JavaScript
Cadu Pedroni
Danilo 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.
TDD
Red, Green, Refactor
1. Escreve o teste
2. O teste falha
3. Escreve o código
4. O teste passa
Test Driven Development
BDD
Mocks, Stubs, Fakes, Dummies
1. Given (dado)
2. When (quando)
3. Then (então)
Behavior Driven Development
Ferramentas
Selenium
http://docs.seleniumhq.org/
Selenium WebDriver é um conjunto de
ferramentas para automatizar os
navegadores em várias plataformas.
WebdriverIO
webdriver.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.
Jasmine
http://jasmine.github.io/
É um framework de desenvolvimento BDD
para testar código JavaScript.
Ele não requer um DOM.
Karma
karma-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.
Protractor
www.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
Mocha
mochajs.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.
PhantomJS
phantomjs.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
QUnit
qunitjs.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.
Chai
chaijs.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 toEqual
Exemplo 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('#btnShow
Message');
expect(spyEvent).toHaveBeenTriggered();
});
});
Testing That A DOM Event Was Fired
Exemplo 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 title
Exemplo 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!

Mais conteúdo relacionado

Mais procurados

DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsDevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsJúnior Porfirio
 
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoDesenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoGuilherme Heynemann Bruzzi
 
Comparando as Hypes - React & Vue
Comparando as Hypes - React & VueComparando as Hypes - React & Vue
Comparando as Hypes - React & VueHerbert Henrique
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front endDouglas Matoso
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsIntrodução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsGuillaume Falourd
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?akamud
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?Letticia Nicoli
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoThiago Ferreira
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobileXamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobileakamud
 
Programação funcional que funciona
Programação funcional que funcionaProgramação funcional que funciona
Programação funcional que funcionaRodrigo Serradura
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.jsDenis Velrino
 
Engenharia rever sa mentebinaria
Engenharia rever sa   mentebinariaEngenharia rever sa   mentebinaria
Engenharia rever sa mentebinariaPatrese Renan
 
Revisão de Código - Uma prática que depende da cultura
Revisão de Código - Uma prática que depende da culturaRevisão de Código - Uma prática que depende da cultura
Revisão de Código - Uma prática que depende da culturaLeandro Parazito
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp netAnderson Wernek
 
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função saveAulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função saveJorge Pires
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...MVP ShowCast
 
Xamarin em 7 minutos
Xamarin em 7 minutosXamarin em 7 minutos
Xamarin em 7 minutosakamud
 
Como criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com CypressComo criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com CypressWalmyr Lima e Silva Filho
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 

Mais procurados (20)

DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsDevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
 
Desenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do códigoDesenvolvendo uma App multiplataforma compartilhando 90% do código
Desenvolvendo uma App multiplataforma compartilhando 90% do código
 
Comparando as Hypes - React & Vue
Comparando as Hypes - React & VueComparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsIntrodução ao Github actions - TDC Connections
Introdução ao Github actions - TDC Connections
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
 
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobileXamarin + TDD - Reagindo rápido à mudanças no mundo mobile
Xamarin + TDD - Reagindo rápido à mudanças no mundo mobile
 
Programação funcional que funciona
Programação funcional que funcionaProgramação funcional que funciona
Programação funcional que funciona
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Engenharia rever sa mentebinaria
Engenharia rever sa   mentebinariaEngenharia rever sa   mentebinaria
Engenharia rever sa mentebinaria
 
Revisão de Código - Uma prática que depende da cultura
Revisão de Código - Uma prática que depende da culturaRevisão de Código - Uma prática que depende da cultura
Revisão de Código - Uma prática que depende da cultura
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp net
 
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função saveAulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
Aulas 6: usando o Jest para fazer mocks to Mongoose, testando a função save
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
 
Xamarin em 7 minutos
Xamarin em 7 minutosXamarin em 7 minutos
Xamarin em 7 minutos
 
Como criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com CypressComo criar testes rápidos e robustos com Cypress
Como criar testes rápidos e robustos com Cypress
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 

Destaque

Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingMeetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingDan Vitoriano
 
What Every Developer Should Know About Database Scalability
What Every Developer Should Know About Database ScalabilityWhat Every Developer Should Know About Database Scalability
What Every Developer Should Know About Database Scalabilityjbellis
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptjasonsich
 
Hadoop and Cassandra at Rackspace
Hadoop and Cassandra at RackspaceHadoop and Cassandra at Rackspace
Hadoop and Cassandra at RackspaceStu Hood
 
Cassandra @Formspring
Cassandra @FormspringCassandra @Formspring
Cassandra @Formspringmartincozzi
 
elm-d3 @ NYC D3.js Meetup (30 June, 2014)
elm-d3 @ NYC D3.js Meetup (30 June, 2014)elm-d3 @ NYC D3.js Meetup (30 June, 2014)
elm-d3 @ NYC D3.js Meetup (30 June, 2014)Spiros
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon
 
From 100s to 100s of Millions
From 100s to 100s of MillionsFrom 100s to 100s of Millions
From 100s to 100s of MillionsErik Onnen
 
React and Flux life cycle with JSX, React Router and Jest Unit Testing
React and  Flux life cycle with JSX, React Router and Jest Unit TestingReact and  Flux life cycle with JSX, React Router and Jest Unit Testing
React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu
 
Cassandra by example - the path of read and write requests
Cassandra by example - the path of read and write requestsCassandra by example - the path of read and write requests
Cassandra by example - the path of read and write requestsgrro
 
Factors affecting Johnson and johnson
Factors affecting Johnson and johnsonFactors affecting Johnson and johnson
Factors affecting Johnson and johnsonDeepshree Sharma
 
Cassandra at eBay - Cassandra Summit 2012
Cassandra at eBay - Cassandra Summit 2012Cassandra at eBay - Cassandra Summit 2012
Cassandra at eBay - Cassandra Summit 2012Jay Patel
 
Migrating Netflix from Datacenter Oracle to Global Cassandra
Migrating Netflix from Datacenter Oracle to Global CassandraMigrating Netflix from Datacenter Oracle to Global Cassandra
Migrating Netflix from Datacenter Oracle to Global CassandraAdrian Cockcroft
 
BI, Reporting and Analytics on Apache Cassandra
BI, Reporting and Analytics on Apache CassandraBI, Reporting and Analytics on Apache Cassandra
BI, Reporting and Analytics on Apache CassandraVictor Coustenoble
 
Waldorf Education
Waldorf EducationWaldorf Education
Waldorf EducationxMerodi
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는Taegon Kim
 

Destaque (20)

Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingMeetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
 
What Every Developer Should Know About Database Scalability
What Every Developer Should Know About Database ScalabilityWhat Every Developer Should Know About Database Scalability
What Every Developer Should Know About Database Scalability
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScript
 
Hadoop and Cassandra at Rackspace
Hadoop and Cassandra at RackspaceHadoop and Cassandra at Rackspace
Hadoop and Cassandra at Rackspace
 
Cassandra @Formspring
Cassandra @FormspringCassandra @Formspring
Cassandra @Formspring
 
elm-d3 @ NYC D3.js Meetup (30 June, 2014)
elm-d3 @ NYC D3.js Meetup (30 June, 2014)elm-d3 @ NYC D3.js Meetup (30 June, 2014)
elm-d3 @ NYC D3.js Meetup (30 June, 2014)
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
 
From 100s to 100s of Millions
From 100s to 100s of MillionsFrom 100s to 100s of Millions
From 100s to 100s of Millions
 
React and Flux life cycle with JSX, React Router and Jest Unit Testing
React and  Flux life cycle with JSX, React Router and Jest Unit TestingReact and  Flux life cycle with JSX, React Router and Jest Unit Testing
React and Flux life cycle with JSX, React Router and Jest Unit Testing
 
Cassandra by example - the path of read and write requests
Cassandra by example - the path of read and write requestsCassandra by example - the path of read and write requests
Cassandra by example - the path of read and write requests
 
Factors affecting Johnson and johnson
Factors affecting Johnson and johnsonFactors affecting Johnson and johnson
Factors affecting Johnson and johnson
 
Cassandra at eBay - Cassandra Summit 2012
Cassandra at eBay - Cassandra Summit 2012Cassandra at eBay - Cassandra Summit 2012
Cassandra at eBay - Cassandra Summit 2012
 
Migrating Netflix from Datacenter Oracle to Global Cassandra
Migrating Netflix from Datacenter Oracle to Global CassandraMigrating Netflix from Datacenter Oracle to Global Cassandra
Migrating Netflix from Datacenter Oracle to Global Cassandra
 
BI, Reporting and Analytics on Apache Cassandra
BI, Reporting and Analytics on Apache CassandraBI, Reporting and Analytics on Apache Cassandra
BI, Reporting and Analytics on Apache Cassandra
 
Waldorf Education
Waldorf EducationWaldorf Education
Waldorf Education
 
Management Consulting
Management ConsultingManagement Consulting
Management Consulting
 
ReactJs
ReactJsReactJs
ReactJs
 
Oprah Winfrey
Oprah WinfreyOprah Winfrey
Oprah Winfrey
 
Medical devices
Medical devicesMedical devices
Medical devices
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 

Semelhante a Unit Test JavaScript

[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes AutomatizadosSamanta Cicilia
 
Caipira agil automacao front end selenium
Caipira agil automacao front end seleniumCaipira agil automacao front end selenium
Caipira agil automacao front end seleniumQualister
 
Testando sua aplicação asp.net mvc de forma automatizada de ponta a ponta
Testando sua aplicação asp.net mvc de forma automatizada de ponta a pontaTestando sua aplicação asp.net mvc de forma automatizada de ponta a ponta
Testando sua aplicação asp.net mvc de forma automatizada de ponta a pontatdc-globalcode
 
Todas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágilTodas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágilElias Nogueira
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliverySamanta Cicilia
 
Testes automatizados cp
Testes automatizados cpTestes automatizados cp
Testes automatizados cpcesarvianna
 
Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01Douglas Roeder
 
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu Software
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu SoftwareDevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu Software
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu SoftwareAndré Dias
 
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...Renato Groff
 
Automação de testes para equipes agile
Automação de testes para equipes agileAutomação de testes para equipes agile
Automação de testes para equipes agileAlini Rebonatto
 
Testes de aceitação automatizados com robotium utilizando a técnica bdd TDC...
Testes de aceitação automatizados com robotium utilizando a técnica bdd   TDC...Testes de aceitação automatizados com robotium utilizando a técnica bdd   TDC...
Testes de aceitação automatizados com robotium utilizando a técnica bdd TDC...Rafael Chiavegatto
 
Paralelize seus testes web e mobile para ter feedbacks mais rápidos
Paralelize seus testes web e mobile para ter feedbacks mais rápidosParalelize seus testes web e mobile para ter feedbacks mais rápidos
Paralelize seus testes web e mobile para ter feedbacks mais rápidosElias Nogueira
 
Testes com TestLink e Selenium
Testes com TestLink e SeleniumTestes com TestLink e Selenium
Testes com TestLink e SeleniumAndré Thiago
 
Spring roo produtividade no java
Spring roo produtividade no javaSpring roo produtividade no java
Spring roo produtividade no javaPedro Cavalero
 
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EEUso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EEMarco Antonio Maciel
 
Testes para Android de ponta a ponta
Testes para Android de ponta a pontaTestes para Android de ponta a ponta
Testes para Android de ponta a pontaElias Nogueira
 

Semelhante a Unit Test JavaScript (20)

[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados
 
Caipira agil automacao front end selenium
Caipira agil automacao front end seleniumCaipira agil automacao front end selenium
Caipira agil automacao front end selenium
 
Conhecendo o Ruby on Rails
Conhecendo o Ruby on RailsConhecendo o Ruby on Rails
Conhecendo o Ruby on Rails
 
Testando sua aplicação asp.net mvc de forma automatizada de ponta a ponta
Testando sua aplicação asp.net mvc de forma automatizada de ponta a pontaTestando sua aplicação asp.net mvc de forma automatizada de ponta a ponta
Testando sua aplicação asp.net mvc de forma automatizada de ponta a ponta
 
Todas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágilTodas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágil
 
TDC 2011 Trilha de Teste
TDC 2011 Trilha de TesteTDC 2011 Trilha de Teste
TDC 2011 Trilha de Teste
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous Delivery
 
Testes automatizados cp
Testes automatizados cpTestes automatizados cp
Testes automatizados cp
 
Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01
 
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu Software
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu SoftwareDevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu Software
DevOps Summit Brasil: +10 Ferramentas para Melhorar a Qualidade do seu Software
 
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
Automatizando o teste de aplicações Web com Selenium WebDriver e Azure DevOps...
 
Test day 2012
Test day 2012Test day 2012
Test day 2012
 
Automação de testes para equipes agile
Automação de testes para equipes agileAutomação de testes para equipes agile
Automação de testes para equipes agile
 
Testes de aceitação automatizados com robotium utilizando a técnica bdd TDC...
Testes de aceitação automatizados com robotium utilizando a técnica bdd   TDC...Testes de aceitação automatizados com robotium utilizando a técnica bdd   TDC...
Testes de aceitação automatizados com robotium utilizando a técnica bdd TDC...
 
Paralelize seus testes web e mobile para ter feedbacks mais rápidos
Paralelize seus testes web e mobile para ter feedbacks mais rápidosParalelize seus testes web e mobile para ter feedbacks mais rápidos
Paralelize seus testes web e mobile para ter feedbacks mais rápidos
 
Testes com TestLink e Selenium
Testes com TestLink e SeleniumTestes com TestLink e Selenium
Testes com TestLink e Selenium
 
Spring roo produtividade no java
Spring roo produtividade no javaSpring roo produtividade no java
Spring roo produtividade no java
 
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EEUso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
 
Testes para Android de ponta a ponta
Testes para Android de ponta a pontaTestes para Android de ponta a ponta
Testes para Android de ponta a ponta
 
Continuous Deployment e DevOps na Nuvem
Continuous Deployment e DevOps na NuvemContinuous Deployment e DevOps na Nuvem
Continuous Deployment e DevOps na Nuvem
 

Mais de Dan Vitoriano

Workshop React Hooks
Workshop React HooksWorkshop React Hooks
Workshop React HooksDan Vitoriano
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasDan Vitoriano
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoDan Vitoriano
 
Times digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorTimes digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorDan Vitoriano
 
GraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIGraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIDan Vitoriano
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline FirstDan Vitoriano
 
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Dan Vitoriano
 
The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991Dan Vitoriano
 
Especificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletEspecificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletDan Vitoriano
 
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...Dan Vitoriano
 
Fullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsFullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsDan Vitoriano
 
Apresentação FEMUG-ABC
Apresentação FEMUG-ABCApresentação FEMUG-ABC
Apresentação FEMUG-ABCDan Vitoriano
 
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Dan Vitoriano
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsDan Vitoriano
 
Google Material design
Google Material designGoogle Material design
Google Material designDan Vitoriano
 

Mais de Dan Vitoriano (20)

Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
 
Workshop React Hooks
Workshop React HooksWorkshop React Hooks
Workshop React Hooks
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
JavaScript das Ruas
JavaScript das RuasJavaScript das Ruas
JavaScript das Ruas
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 
Times digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorTimes digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e Endeavor
 
GraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIGraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your API
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
React Native
React NativeReact Native
React Native
 
Pdsp #3
Pdsp #3Pdsp #3
Pdsp #3
 
Pdsp #2
Pdsp #2Pdsp #2
Pdsp #2
 
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
 
The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991
 
Especificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletEspecificações UX/UI CMA Tablet
Especificações UX/UI CMA Tablet
 
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
 
Fullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsFullcircle papers - Sobre Blogs
Fullcircle papers - Sobre Blogs
 
Apresentação FEMUG-ABC
Apresentação FEMUG-ABCApresentação FEMUG-ABC
Apresentação FEMUG-ABC
 
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
 
Google Material design
Google Material designGoogle Material design
Google Material design
 

Unit Test JavaScript

  • 3. Por que testar? Eis a questão
  • 5. Tipos de Testes - Unitário - Integração - Regressão - Aceitação - Caixa-preta - Caixa-branca - Interface
  • 6.
  • 7. 90% Dos testes são unitários, cobrindo quase todos os comportamentos.
  • 9. 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.
  • 10. TDD Red, Green, Refactor 1. Escreve o teste 2. O teste falha 3. Escreve o código 4. O teste passa Test Driven Development
  • 11. BDD Mocks, Stubs, Fakes, Dummies 1. Given (dado) 2. When (quando) 3. Then (então) Behavior Driven Development
  • 12.
  • 14. Selenium http://docs.seleniumhq.org/ Selenium WebDriver é um conjunto de ferramentas para automatizar os navegadores em várias plataformas.
  • 15. WebdriverIO webdriver.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.
  • 16. Jasmine http://jasmine.github.io/ É um framework de desenvolvimento BDD para testar código JavaScript. Ele não requer um DOM.
  • 17. Karma karma-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.
  • 18. Protractor www.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.
  • 19. Testes de Componentes Angular 2: Angular CLI ReactJS: JEST
  • 20. Mocha mochajs.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.
  • 21. PhantomJS phantomjs.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
  • 22. QUnit qunitjs.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.
  • 23. Chai chaijs.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.
  • 24. 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 toEqual Exemplo com Jasmine + JavaScript
  • 25. 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('#btnShow Message'); expect(spyEvent).toHaveBeenTriggered(); }); }); Testing That A DOM Event Was Fired Exemplo com Jasmine + jQuery
  • 26. 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 title Exemplo com WebdriverIO
  • 27. 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
  • 28. TKS!