Testando seu JavaScript com Karma runner

Karma runner permite que você execute seus testes de javascript rapidamente.

Após configurar este ambiente, você poderá testar suas funções / classes javascript e também as alterações do DOM, feitas pela jQuery.

Como toda a configuração não foi bem abordada no README do projeto, vou escrever sobre minha configuração, então talvez ela também possa ajudá-lo.

Você precisará de 3 coisas instaladas antes de continuar

• primeiro é node.js
• o segundo é o próprio corredor do karma , que pode ser instalado com npm install -g karma(eu precisava adicionar sudo)
• o terceiro é Phantom.JS (pelo menos para mim, porque eu corro tudo em máquinas virtuais Vagrant )

Quando você estiver pronto, você pode executar a karmapartir do seu terminal. Agora você está pronto para gerar karma config file. Faça isso dentro do diretório raiz do projeto ou, melhor ainda, no diretório raiz do projeto para testes:

karma init

Isso irá gerar um karma.conf.jsarquivo com as configurações padrão. Vou escrever apenas sobre as configurações que precisei mudar:

A configuração abaixo foi feita com Karma versão 0.8.x. Agora, com o arquivo de configuração 0.10.x foi alterado e é um pouco diferente. Por exemplo, dê uma olhada neste .

• basePath = '..';porque coloquei meu arquivo de configuração no spec diretório e não queria colocá-lo na raiz do projeto. Com esta configuração, você pode especificar todos os outros caminhos, começando pela raiz do projeto, o que é bom para mim, porque a maioria dos meus arquivos js estão no diretório.app/assets/javascripts/

• files = [

  JASMINE,
  JASMINE_ADAPTER,
  {pattern: 'spec/javascripts/fixtures/*.html', watched: true, included: false, served: true},
  'http://code.jquery.com/jquery-1.9.1.min.js',
  'spec/javascripts/helpers/jasmine-jquery.js',
  'spec/javascripts/helpers/fixtures.js',
  // code I want to test
  'app/assets/javascripts/*.coffee',
  // specs
  'spec/javascripts/*_spec.*']

  • Eu escolhi usar a estrutura de teste jasmine , mas você tem mais para escolher.
  • Porque eu ainda faço muita manipulação DOM, eu queria usar acessórios HTML para testar a seleção e manipulação de jQuery também. Para fixtures HTML, você precisa dizer karmacomo carregá-los. Você pode ver isso na terceira linha de filesconfiguração.
  • Incluí jquery do CDN porque estou trabalhando em um projeto Rails que carrega jQuery do ruby ​​gem, que está armazenado em outro lugar no sistema de arquivos.

  • em seguida, adicionei a biblioteca jasmine-jquery.js ( este arquivo ) para poder carregar e usar acessórios HTML. Karma não fornece a você o carregamento deles (ainda).

    fixtures.jsestá mantendo objetos de configuração global que de outra forma são carregados do servidor. Neste arquivo eu finjo / zombo deles.

  • browsers = ['PhantomJS'];como eu disse, eu executo tudo Vagrant, então prefiro fazer testes com o PhantomJS. É rápido! Mas você também pode escolher entre outros navegadores sem cabeçalho.

Para carregar fixtures HTML em seus testes, você pode olhar este exemplo de arquivo. É importante definir corretamente. Se você fizer isso direito, você pode simplesmente obter acessórios HTML com uma linha de códigospec/javascripts/first_spec.coffeejasmine.getFixtures().fixturesPathloadFixtures('test_html_mocks.html')

jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures/'

describe "HTML sanitization with peristance manager", ->
  it "should be able to sanitize html and get raw content", ->
    loadFixtures('test_html_mocks.html')
    pm = new PersistenceManager(config.action_btns)
    sanitized = pm.sanitize($('h1'))
    expect(sanitized).toBe('Test content')

Se você conseguiu configurar tudo corretamente, poderá executar seus testes com o karma startcomando do terminal. Todos os testes será executado automaticamente a cada vez que fizer uma alteração nos arquivos que fica combinado com filesno arquivo.karma.conf.js

Com uma configuração como essa, os testes são executados muito rápido. Arrumado!