Skip to content

Instantly share code, notes, and snippets.

@igorlima
Last active December 29, 2015 09:19
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save igorlima/7649954 to your computer and use it in GitHub Desktop.
Introdução de como executar testes unitários em diferentes tipos de navegadores

Gittip Donate Button

SauceLabs é uma plataforma de teste que possibilita realizar testes automáticos ou manuais em aplicações móveis e web (incluindo navegadores como Internet Explorer, Opera, Safari, Android, iPhone, Chrome etc). Essa plataforma permite executar os testes em diversas linguagem de programação, porém, em nosso exemplo, iremos utilizar o NodeJS (JavaScript).

O NodeJS e o Gerenciador de Pacotes do Node (traduzido do inglês Node Package Manager - NPM) podem ser baixados no site oficial. Esse gerenciador de pacotes permite a interação com um repositório online via linha de comando, facilitando a instalação de várias ferramentas.

Nesse exemplo, será utilizado uma ferramenta chamada Test'em, que é gerenciada e instalada pelo NPM. Essa ferramenta permite rodar os testes unitários de JavaScript localmente em diferentes plataformas, tornando a execução mais fácil e divertida. Test'em suporta vários frameworks de teste, tais como: Jasmine, QUnit e Mocha. Para instalar, basta digitar no terminal:

npm install testem -g

No exemplo, será utilizado o framework Jasmine. Mesmo código do tutorial oficial do SauceLabs. As especificações do código estão descritas no arquivo PastaSpec.js e a implementação no arquivo Pasta.js.

Uma vez criado o arquivo de especificação 'PastaSpec.js' e a implementação 'Pasta.js', é preciso criar um arquivo de configuração 'testem.json'. Necessário apenas informar o framework utilizado e os arquivos JavaScript.

O Test'em usa como padrão a porta 7357. O parâmetro '--port' serve para especificar uma outra. Nesse caso, vamos utilizar a 8080, digitando: testem --port=8080

Após a execução do comando, o resultado dos testes pode ser visto pela url http://localhost:8080/. Caso a url seja aberta no Chrome, os testes serão executados no navegador Chrome. Caso aberta no Safari, será executado no Safari. Como ilustra a figura seguinte.

Jasmine tests on Test'em

Para testar o código em diversos navegadores ou diversos sistemas operacionais, não é necessário ter máquinas virtuais nem mesmo outros dispositivos, como celulares ou tablet. O Sauce Labs prover o conector Sauce Connect. Com ele é possível criar uma conexão entre a nossa máquina e os servidores do SauceLabs, assim é possível rodar os testes dentro do firewall do Sauce Labs Cloud. Cloud que disponibiliza mais de 200 plataformas, que inclui dispositivos móveis, diversos SO e navegadores. Uma vez baixado o Sauce Connect, essa conexão é feita pelo comando:

java -jar Sauce-Connect.jar --tunnel-identifier "tabless" $SAUCE_USERNAME $SAUCE_ACCESS_KEY

Vale ressaltar que $SAUCE_USERNAME e $SAUCE_ACCESS_KEY são variáveis de ambientes. Método recomendado para evitar a divulgação de dados privados. Para obter dados de acesso, acesse a página de cadastro. Após a criação da conta, uma chave de acesso já é fornecida, conforme é ilustrado na figura abaixo.

SauceLabs account page

Na página inicial, o botão New Interactive Session permite a criação de uma instância de navegador. Uma popup (ilustrada na imagem abaixo) será exibida ao clicar no botão, com várias opções de sistema operacional e de navegador.

New interactive session popup

Ao instanciar o navegador, é possível visualizar o resultado dos testes no terminal (ilustração na imagem abaixo). Os testes sempre serão executados novamente caso haja alguma alteração tanto no código quanto nas especificações, possibilitando assim a prática de TDD ou BDD, utilizando qualquer tipo de navegador.

iPad SauceLabs session

Esse exemplo contempla apenas a execução de testes de forma manual. Essas ferramentas que foram utilizadas também oferecem suporte para a automatização de testes, mas isso ficará para um próximo capítulo. Muito obrigado.

function Pasta() {
// recipes for good pasta sauces
this.sauces = {
'bolognese': ["tomatoes", "garlic", "olive", "herbs", "meat"]
};
this.sauceIngredients = [];
}
Pasta.prototype.add = function (ingredient) {
this.sauceIngredients.push(ingredient);
};
Pasta.prototype.getType = function () {
for (var posssibleSauce in this.sauces) {
var ingredientsValid = true;
// checking if arrays are equal
if (!(this.sauceIngredients.sort() > this.sauces[posssibleSauce].sort() ||
this.sauceIngredients.sort() < this.sauces[posssibleSauce].sort())) {
return posssibleSauce;
}
}
return undefined;
};
Pasta.prototype.isTasty = function () {
if (this.getType() !== undefined) { return true; }
return false;
};
describe("Pasta", function() {
it("should make spaghetti bolognese", function() {
var pasta = new Pasta();
pasta.add("tomatoes");
pasta.add("garlic");
pasta.add("olive");
pasta.add("herbs");
pasta.add("meat");
expect(pasta.getType()).toEqual("bolognese");
expect(pasta.isTasty()).toEqual(true);
});
it("should make pasta with no sauce", function() {
var pasta = new Pasta();
pasta.add("meat");
expect(pasta.getType()).toEqual(undefined);
// pasta with no sauce? yeah that's not too tasty
expect(pasta.isTasty()).toEqual(false);
});
});
{
"framework": "jasmine",
"src_files": [
"Pasta.js",
"PastaSpec.js"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment