JavaScript

Testando JavaScript com Jasmine

Nesse post vou mostrar um pouco do framework de teste Jasmine.

O objetivo desse post não é ensinar TDD, não vou apresentar todas as funcionalidades do framework e também não vamos ter exemplos de aplicação real.

O objetivo é puramente didático, venho somente demonstrar a ferramenta e tentar despertar a curiosidade de quem ainda não trabalha com testes.

O exemplo a ser testado é uma calculadora com as 4 operações básicas.

Instalação

O código fonte do Jasmine esta no GitHub e pode ser baixado em: https://github.com/jasmine/jasmine
Para o nosso exemplo vamos manter a seguinte estrutura pastas.

1
2
3
4
5
6
7
8
9
10
11
- tests
  - Jasmine //arquivos do framework
    - boot.js
    - jasmine.js
    - jasmine-html.js
    - jasmine.css
    - jasmine_favicon.png
  - spec //arquivos de testes
    - calculadora-spec.js
- Calculadora.js //arquivo a ser testado
- SpecRunner.html //arquivo para exibir os resultados dos testes

Configurando o SpecRunner.html

O arquivo SpecRunner.html é responsável por executar os testes e mostrar os resultados.
Ele é somente um arquivo HTML que contem as chamadas para os arquivos do Jasmine, e os arquivos do projeto.
Na linha 15 informamos os arquivos que queremos testar (source files) e na linha 18 os arquivos de testes (spec files).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.2.0</title>

  <link rel="shortcut icon" type="image/png" href="tests/Jasmine/jasmine_favicon.png">
  <link rel="stylesheet" href="tests/Jasmine/jasmine.css">

  <script src="tests/Jasmine/jasmine.js"></script>
  <script src="tests/Jasmine/jasmine-html.js"></script>
  <script src="tests/Jasmine/boot.js"></script>

  <!-- include source files here... -->
  <script src="Calculadora.js"></script>

  <!-- include spec files here... -->
  <script src="tests/spec/calculadora-spec.js"></script>
</head>
<body>
</body>
</html>

Criando a calculadora

O código abaixo cria a calculadora que vamos testar com as 4 operações.

Calculadora.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Calculadora () {};

Calculadora.prototype.Somar = function(a, b) {
  return a + b;
};

Calculadora.prototype.Subtrair = function(a, b) {
  return a - b;
};

Calculadora.prototype.Multiplicar = function(a, b) {
  return a * b;
};

Calculadora.prototype.Dividir = function(a, b) {
  if(b === 0) return 0;
  return a / b;
};

Iniciando os testes

A primeira coisa que devemos criar é a nossa suite de testes.
Para isso vamos usar a função describe do Jasmine que requer 2 parâmetros: uma string com o título e uma função que é aonde vai ocorrer os testes.

calculadora-spec.js
1
2
3
describe('Calculadora', function() {
  //...
});

Cada teste deve ser iniciado usando a função it do Jasmine que também requer 2 parâmetros: uma string com o título e a função que vai ser o teste.
Os testes são chamados de Specs.

calculadora-spec.js
1
2
3
4
5
6
describe('Calculadora', function() {
  //spec
  it('descricao do teste', function() {
    //Aqui vai os testes
  });
});

Para que o teste seja executado o Jasmine tem suas próprias funçõe que devem informar se o teste teve sucesso ou erro. Vamos ver o exemplo do teste de soma.

calculadora-spec.js
1
2
3
4
5
6
7
describe('Calculadora', function() {
  //spec
  it('Soma de 5 + 5 deve ser igual a 10', function() {
    var calc = new Calculadora();
    expect(calc.Somar(5,5)).toEqual(10);
  });
});

O teste acima pode ser interpretado assim: “Eu espero que o resultado da soma de 5 + 5 seja igual a 10”.
Vamos ver abaixo alguns dos comparadores(Matchers) que o Jasmine oferece.
1
2
3
4
5
6
7
8
expect(true).toBe(true);
expect(false).not.toBe(true);
expect(12).toEqual(12);
expect(null).toBeNull();
expect(ColorList).toContain('red');
expect(10).toBeLessThan(5);
expect(10).toBeGreaterThan(5);
//...

O exemplo completo com as 4 operações ficaria assim.
calculadora-spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
describe('Calculadora', function() {
  //spec
  it('Somar 5 + 5 deve ser igual a 10', function() {
    var calc = new Calculadora();
    expect(calc.Somar(5,5)).toEqual(10);
  });
  it('Subtrair 10 - 5 deve ser igual a 5', function() {
    var calc = new Calculadora();
    expect(calc.Subtrair(10,5)).toEqual(5);
  });
  it('Multiplicar 2 * 5 deve ser igual a 10', function() {
    var calc = new Calculadora();
    expect(calc.Multiplicar(2,5)).toEqual(10);
  });
  it('Dividir 10 / 5 deve ser igual a 2', function() {
    var calc = new Calculadora();
    expect(calc.Dividir(10,5)).toEqual(2);
  });
  it('Dividir 10 / 0 nao ´e possivel e deve retornar 0', function() {
    var calc = new Calculadora();
    expect(calc.Dividir(10,0)).toEqual(0);
  });
});

Melhorando o código

Se observarmos bem, todos os testes criam uma instancia da calculadora.
O Jasmine dispõe dos métodos beforeEach, afterEach, beforeAll, afterAll que nos ajudam a inicializar melhor essas variáveis.
Vamos usar o método beforeEach que vai ser rodado antes de cada spec para instanciar a calculadora.

calculadora-spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
describe('Calculadora', function() {
  beforeEach(function() {
    this.calc = new Calculadora();
  });
  //spec
  it('Somar 5 + 5 deve ser igual a 10', function() {
    expect(this.calc.Somar(5,5)).toEqual(10);
  });
  it('Subtrair 10 - 5 deve ser igual a 5', function() {
    expect(this.calc.Subtrair(10,5)).toEqual(5);
  });
  it('Multiplicar 2 * 5 deve ser igual a 10', function() {
    expect(this.calc.Multiplicar(2,5)).toEqual(10);
  });
  it('Dividir 10 / 5 deve ser igual a 2', function() {
    expect(this.calc.Dividir(10,5)).toEqual(2);
  });
  it('Dividir 10 / 0 nao ´e possivel e deve retornar 0', function() {
    expect(this.calc.Dividir(10,0)).toEqual(0);
  });
});

Agora podemos abrir o arquivo SpecRunner.html no browser e visualizar os resultados.

Veja a documentação completa: http://jasmine.github.io/

Até os próximos artigos!