Introdução de como executar testes unitários em diferentes tipos de navegadores

README.md

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.

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.

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.

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.

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.

Pasta.js

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; 
};

PastaSpec.js

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); 
  }); 
});

testem.json

{ 
  "framework": "jasmine", 
  "src_files": [ 
    "Pasta.js", 
    "PastaSpec.js" 
  ] 
}