Want create site? Find Free WordPress Themes and plugins.

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:

chutzpah

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:

chutzpah2

Com o nosso arquivo criado, vamos criar o código necessário para o funcionamento de uma calculadora.

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

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:

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

Feito isso, ao executar a aplicação devemos ver uma página semelhante a figura abaixo:

chutzpah4

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

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

})

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:

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

Ao executar nosso relatório de testes unitários no JasmineJs, veja que todos os nossos testes passaram com sucesso!

chutzpah4

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:

chutzpah5

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.

/// <reference path="/Scripts/jasmine/jasmine.js" />
/// <reference path="/Scripts/jasmine/jasmine-html.js" />
/// <reference path="/Scripts/jasmine/boot.js" />
/// <reference path="/Scripts/calculadora.js" />

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:

chutzpah6

Como podemos ver na figura abaixo, agora nossos testes javascript estão todos integrado no Test Explorer, muito legal =]

chutzpah7

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:

chutzpah8

Ao escolher a opção Coverage, o Chutzpah abre um relatório detalhado da cobertura de código dos nossos testes conforme figura abaixo:

chutzpah9

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.

Rafael Cruz

É desenvolvedor .NET há mais de 12 anos, certificado Microsoft desde de 2006, instrutor oficial Microsoft há 5 anos, Pós Graduado em Engenharia de Software pela UFRJ, suas certificações são Microsoft Certified Trainer, Microsoft Certified Solution Developer (Web, Application Lifecycle Management), Microsoft Certified Professional Developer, Microsoft Certified Tecnology Specialist.
Atualmente trabalha como arquiteto de sistema, escreve artigos no .NET Coders e no seu blog rafaelcruz.azurewebsites.net para compartilhar experiências na área de desenvolvimento Web, Aplicativos Móveis e Cloud Solutions.

Twitter LinkedIn 

Did you find apk for android? You can find new Free Android Games and apps.

Comentários

comentarios