Uma rápida introdução à testes com Jasmine

Manter um projeto JavaScript complexo é desafiador devido a sua natureza dinâmica. Por isso quero compartilhar uma rápida introdução ao framework de testes Jasmine – pois acredito que a utilização de testes pode ajudar você manter os seus projetos JavaScript sob controle.

Jasmine & Behavior-Driven

O Jasmine é um framework para escrever testes orientados à comportamento – Behavior-Driven Development. Por utilizar BDD o Jasmine entrega uma saída semelhante a um documento contendo as especificações que devem ser atendidas pelo código sendo testado.

Exemplo de saída gerado por testes executados pelo Jasmine.

Download & Configuração

Para realizar o download acessei a página de releases do Jasmine no github e escolhi a última versão disponível – jasmine-standalone-3.5.0.zip no meu caso.

O ambiente para executar os testes é um HTML que criei usando o SpecRunner.html como referência. Comecei com a definição de um Favicon e importação do CSS.

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

Na sequência coloquei as bibliotecas responsáveis por iniciar o framework Jasmine.

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

Por fim adicionei os scripts que carregam o código à ser testado junto com seu respectivo teste.

<script src="src/app-incrementor.js"></script>
<script src="spec/app-incrementor-spec.js"></script>

O Incrementador

A funcionalidade à ser testada vou pegar emprestado de outro artigo deste blog. O modulo produz um objeto que é atribuído à constante incrementor. O incrementor expõe o método incrementor.next que a cada execução incrementa counter retornando em seguida seu novo valor.

const incrementor = (function() {
  "use strict";

  let counter = 0;

  const next = function() {
    return ++counter;
  };

  return {
    next,
  };

})();

O Incrementador Spec

Para ajudar na criação de testes com BDD são pelo menos 3 funções úteis que o framework Jasmine expõe no escopo global.

  • describe – utilizado para agrupar os testes
  • it – define os testes que irão compor nossa suite
  • expect – verifica se uma expectativa foi ou não atendida
describe('when using the incrementor', function() {

  const first = incrementor.next();
  const second = incrementor.next();

  it('the first increment must return 1', function() {
    expect(first).toBe(1);
  });

  it('the second increment must return 2', function() {
    expect(second).toBe(2);
  });

});

Conclusão

Neste artigo fiz uma rápida introdução ao framework de testes Jasmine além de mostrar os passos necessários para realizar seu download e configuração. Demonstrei o uso do modo standalone que é a maneira mais fácil para começar a escrever testes automatizados com o framework.

Também reusei um modulo desenvolvido no artigo JavaScript Revealing Module Pattern para demonstrar a criação de testes utilizando o framewok Jasmine.