Usando o Jasmine no Rails

No último artigo mostrei como configurar o Rails e RSpec para executar testes de integração com JavaScript. Embora testes de integração sejam importantes, eles não invalidam os testes unitários. Então, agora é hora de ver como configurar o Rails com suporte ao Jasmine.

Configurando o Rails

Primeiro, instale adicione a gem jasmine ao seu arquivo Gemfile.

group :test, :development do
  gem 'jasmine'
end

Depois de executar o comando bundle install, execute o generator jasmine:install para criar a estrutura inicial.

$ rails g jasmine:install
  exist  spec
  create  spec/javascripts/helpers/.gitkeep
  create  spec/javascripts/support/jasmine.yml
  create  spec/javascripts/support/jasmine_helper.rb

Escrevendo testes

Você pode adicionar os testes de JavaScript no diretório spec/javascripts. Eu normalmente tenho um diretório com o nome da aplicação, então neste caso vamos criar o arquivo spec/javascripts/myapp/hello_spec.js.

describe('Hello from Jasmine', function(){
  it('passes', function(){
    expect(true).toBeTruthy();
  });
});

Para executar seus testes, você tem duas alternativas. A primeira é levantar um servidor local com o comando rake jasmine, disponível em http://localhost:8888.

A segunda alternativa é executar os testes no terminal com o Phantom.js. Para isso, basta executar o comando rake jasmine:ci.

$ rake jasmine:ci
Waiting for jasmine server on 55226...
Waiting for jasmine server on 55226...
[2014-07-15 14:13:40] INFO  WEBrick 1.3.1
[2014-07-15 14:13:40] INFO  ruby 2.1.2 (2014-05-08) [x86_64-darwin13.0]
[2014-07-15 14:13:40] INFO  WEBrick::HTTPServer#start: pid=94774 port=55226
Waiting for jasmine server on 55226...
jasmine server started.
.

1 spec, 0 failures
[2014-07-15 14:13:42] INFO  going to shutdown ...
[2014-07-15 14:13:42] INFO  WEBrick::HTTPServer#start done.

Se você quiser executar tanto os testes do RSpec, quanto os do Jasmine, você pode criar uma rake task que adiciona o Jasmine na tarefa :default. Crie um arquivo lib/tasks/default.rake com o conteúdo abaixo:

task :default => :'jasmine:ci'

Agora, basta execute o comando rake.

$ rake
/usr/local/Cellar/ruby/2.1.2_2/bin/ruby -I/Users/fnando/local/ruby/gems/gems/rspec-core-3.0.2/lib:/Users/fnando/local/ruby/gems/gems/rspec-support-3.0.2/lib -S /Users/fnando/local/ruby/gems/gems/rspec-core-3.0.2/exe/rspec ./spec/features/hello_js_spec.rb ./spec/lib/sample_spec.rb
..

Finished in 2.58 seconds (files took 1.25 seconds to load)
2 examples, 0 failures
[2014-07-15 14:22:34] INFO  WEBrick 1.3.1
[2014-07-15 14:22:34] INFO  ruby 2.1.2 (2014-05-08) [x86_64-darwin13.0]
[2014-07-15 14:22:34] INFO  WEBrick::HTTPServer#start: pid=95636 port=55503
Waiting for jasmine server on 55503...
jasmine server started.
.

1 spec, 0 failures
[2014-07-15 14:22:35] INFO  going to shutdown ...
[2014-07-15 14:22:35] INFO  WEBrick::HTTPServer#start done.

A gem jasmine tem suporte para o asset pipeline. Imagine que você irá usar a biblioteca jasmine-fixture. Assumindo que ela está no seu projeto (eu uso Bower para isso), você pode simplesmente carregar essa dependência em um arquivo de helper. Crie o arquivo spec/javascripts/helpers/spec_helper.js com o seguinte conteúdo:

//= require es5-shim
//= require jquery
//= require jasmine-fixture

function fixture() {
  var container = $('<div>');

  [].slice.call(arguments).forEach(function(selector){
    container.affix(selector);
  });

  return container;
}

As chamadas para es5-shim e jquery provavelmente estarão em seu arquivo app/assets/javascripts/application.js ou equivalente.

Com a biblioteca jasmine-fixture pode criar fixtures de uma maneira muito simples; basta especificar o seu seletor que ele se encarrega de criar toda a estrutura. Veja o exemplo abaixo:

it('uses fixture', function(){
  var container = fixture('.box > input[type="button"][value="Click me!"]');
  expect(container.find('.box > input').val()).toEqual('Click me!');
});

Preprocessadores

Se você gosta de CoffeeScript e afins, terá que usar a gem jasmine-rails, que funciona de forma muito parecida, mas que ainda permite escrever os testes usando o seu preprocessador favorito.

Para mais informações, veja a documentação do projeto.

Finalizando

Escrever testes que envolvem JavaScript no Rails é uma tarefa muito simples. Se você ainda não escrevia testes para garantir que seu front-end funciona corretamente, agora não tem mais desculpa!