JS Unit Testing — Utilizando Chutzpah Test Runner com Jasmine JS no Visual Studio
Hoje irei falar sobre como podemos executar testes unitários de javascript dentro do Visual Studio. Fazer testes unitários em javascript está se tornando uma prática cada vez mais comum já que nossos projetos existem infinidades de funções javascript para tornar a experiência do usuário cada vez mais rica.
Existem diversos frameworks de testes unitários em javascript como Jasmine JS, QUnit JS, Unit Js e etc.
Neste exemplo iremos usar o Jasmine JS e estaremos fazendo uma integração com o Chutzpah Test Runner que é uma ferramenta para integrar nosso testes unitários javascript no Test Explorer do Visual Studio, muito legal não acham ?
Utilizando o Jasmine JS como Unit Test
Para começar o nosso exemplo, iremos utilizar como framework de testes unitários o Jasmine JS, ele é um framework no qual utilizamos para realizar nossos testes de unidade das funcionalidades javascript.
O JasmineJS possui uma página detalhada de como foi a execução de cada teste, quais falharam, quais passaram e assim pode diante.
Vamos primeiramente criar nosso projeto no Visual Studio conforme figura abaixo:
Escolha a opção MVC e confirme a operação.
Com o nosso projeto criado, vamos utilizar o Framework de Testes Unitários em javascript JasmineJS, primeiro irei criar um objeto em javascript simples, irei dar o nome de calculadora.js e colocarei na pasta scripts conforme figura abaixo:
Com o nosso arquivo criado, vamos criar o código necessário para o funcionamento de uma calculadora.
[code language=”javascript”]
var Calculadora = function () {
this.Soma = function (x, y) {
return x + y;
};
this.Subtrair = function (x, y) {
return x — y;
};
this.Multiplicar = function (x, y) {
return x * y;
};
this.Dividir = function (x, y) {
if (y === 0)
throw “Denominador deve ser maior que zero”;
return x / y;
};
};
[/code]
Com a nosso objeto criado, vamos adicionar o JasmineJS para que possamos realizar os testes necessários. Para isso, vamos adicionar os pacotes necessários para o correto funcionamento do JasmineJS.
Iremos adicionar via Package Manager Console através do comando Install-Package jasmine
Com o JasmineJS instalado, devemos agora configurar nosso projeto para usar as biblioteca do JasmineJS, iremos criar dentro da pasta Scripts uma nova pasta chamada tests e dentro desta pasta criar um arquivo chamado JsUnitTest.html após criado o arquivo HTML adicione o código abaixo:
[code language=”html”]
<html>
<head>
<title></title>
<meta charset=”utf-8" />
<link rel=”stylesheet” type=”text/css” href=”/Content/jasmine/jasmine.css”>
</head>
<body>
<script type=”text/javascript” src=”/Scripts/jasmine/jasmine.js”></script>
<script type=”text/javascript” src=”/Scripts/jasmine/jasmine-html.js”></script>
<script type=”text/javascript” src=”/Scripts/jasmine/boot.js”></script>
</body>
</html>
[/code]
Feito isso, ao executar a aplicação devemos ver uma página semelhante a figura abaixo:
Esta é a página de relatórios de execução do testes do JasmineJs, como não temos nenhum teste ainda, ele mostra a página vazia.
Vamos criar um arquivo chamado calculadora-test.js dentro da pasta tests. Este arquivo será o responsável pelos testes de unidade em javascript.
Vamos ao código
[code language=”javascript”]
describe(“Calculadora Unit Test”, function () {
var calculator = new Calculadora();
it(“Calculadora de fazer operação de soma”, function () {
var expected = 4;
var result = calculator.Soma(2, 2);
expect(result).toBe(expected);
});
it(“Calculadora de fazer operação de subtrair”, function () {
var expected = 0;
var result = calculator.Subtrair(2, 2);
expect(result).toBe(expected);
});
it(“Calculadora de fazer operação de multiplicar”, function () {
var expected = 9;
var result = calculator.Multiplicar(3, 3);
expect(result).toBe(expected);
});
it(“Calculadora de fazer operação de dividir”, function () {
var expected = 3;
var result = calculator.Dividir(9, 3);
expect(result).toBe(expected);
});
})
[/code]
Agora devemos voltar a página JsUnitTest.html e adicionar o código javascript que irá executar os testes de unidade, adicione as referências dentro da tag <Head> conforme mostrado abaixo:
[code language=”html”]
<script type=”text/javascript” src=”/Scripts/jasmine/jasmine.js”></script>
<script type=”text/javascript” src=”/Scripts/jasmine/jasmine-html.js”></script>
<script type=”text/javascript” src=”/Scripts/jasmine/boot.js”></script>
<script type=”text/javascript” src=”/Scripts/calculadora.js”></script>
<script type=”text/javascript” src=”/Scripts/tests/calculadora-test.js”></script>
[/code]
Ao executar nosso relatório de testes unitários no JasmineJs, veja que todos os nossos testes passaram com sucesso!
Vamos agora integrar com outra ferramenta, o Chutzpah Test Runner.
Utilizando o Chutzpah, O Tests Runner Javascript para Visual Studio
Depois que realizamos todos os testes unitários do nosso objeto javascript calculadora. Iremos abordar uma nova ferramenta o Chutzpah Tests Runner.
Mas o que é Chutzpah ?
Chutzpah é uma extensão gratuita e open-source no qual podemos integrar dentro do Text Explorer do Visual Studio os testes unitários javascript. Assim o Test Explorer não irá somente mostrar testes de código C# mas também irá exibir testes de códigos em javascript. E podemos ir além, além dessa incrível integração, podemos ver a cobertura dos nossos testes javascript, quais são os testes que falharam e que passaram. Neste exemplo o Chutzpah será integrado ao JasmineJs que já estamos utilizando dentro do nosso projeto.
Vamos adicionar a extensão do Chutzpah no Visual Studio para isso vá em Menu -> Tools -> Extensions and Updates.
Clique em online e busque por Chutzpah conforme figura abaixo:
Clique em download e instale a extensão Chutzpah Test Adapter for the Test Explorer e Chutzpah Test Runner Context Menu Extension.
Reinicie o Visual Studio para que as instalações sejam feitas com sucesso.
Com as extensões instaladas, abra o arquivo calculadora-test.js, o Chutzpah necessita de saber quais são os arquivos de testes e todas as dependências, sendo assim adicione o trecho de código abaixo nas primeiras linhas do calculadora-test.js conforme código abaixo.
[code language=”javascript”]
/// <reference path=”/Scripts/jasmine/jasmine.js” />
/// <reference path=”/Scripts/jasmine/jasmine-html.js” />
/// <reference path=”/Scripts/jasmine/boot.js” />
/// <reference path=”/Scripts/calculadora.js” />
[/code]
Esse trecho diz ao Chutzpah que estamos utilizando o JasmineJs como framework de testes e que este irá realizar os testes unitário em cima do arquivo calculadora.js.
Agora clique com o botão direito em cima do calculadora-test.js e escolha a opção Run JS Test conforme figura abaixo:
Como podemos ver na figura abaixo, agora nossos testes javascript estão todos integrado no Test Explorer, muito legal =]
Com o Chutzpah também podemos ver a cobertura dos nossos testes. Para isso basta clicar com o botão direito e escolher a opção Coverage conforme figura abaixo:
Ao escolher a opção Coverage, o Chutzpah abre um relatório detalhado da cobertura de código dos nossos testes conforme figura abaixo:
Como podemos ver podemos fazer coisas incríveis com Chutzpah especialmente integrado ao JasmineJS aumentando consideravelmente a qualidade dos nossos projetos na parte Frontend.
Caso necessite, clique aqui e veja a documentação do Chutzpah
Clique aqui para ver a documentação do JasmineJS
O código deste exemplo se encontra no meu Github, clique aqui para fazer o download
Abs e até a próxima.
