🥇 Testando uma diretiva AngularJS

Ferramentas de projeto

sudo npm install -g yo grunt-cli bower karma

Geradores Yeoman:

sudo npm install -g generator-angular generator-karma

(graças a @amscotti para saber mais sobre isso).

Crie o projeto

mkdir directive-example && cd $_
yo angular

Configurar Karma

Abra o arquivo karma.conf.js e faça as seguintes alterações (qualquer alteração neste arquivo exige que você reinicie o Karma):

Caminho de base

Para permitir que o Karma use o caminho de modelo correto e faça com que a diretiva carregue o arquivo de modelo, você precisará alterar o basePath :

basePath = 'app';

Padrões de arquivo

Corrija os caminhos para refletir o basePath recém-definido :

files = [
  JASMINE,
  JASMINE_ADAPTER,
  'components/angular/angular.js',
  'components/angular-mocks/angular-mocks.js',
  'scripts/*.js',
  'scripts/**/*.js',
  'views/**/*.html',
  '../test/mock/**/*.js',
  '../test/spec/**/*.js'
];

Compilando modelos

Os modelos precisam ser compilados em javascript, caso contrário, você receberá um erro de análise ao executar o Karma. O pré – processador html2js é a solução e simplesmente requer a adição do seguinte ao seu karma.conf.js (isso se baseia no armazenamento de arquivos de modelo em um diretório nas visualizações ):

preprocessors = {
  'views/**/*.html': 'html2js'
};

Relógio automático

Esta é uma parte muito legal do Karma, onde você pode permitir a visualização de arquivos e, em seguida, a execução automática de testes à medida que desenvolve:

autoWatch = true;

Opcional

Eu uso o PhantomJS para executar os testes Angular em vez de depender de um navegador como o Chrome.

Altere o navegador para executar testes para PhantomJS:

browsers = ['PhantomJS'];

Crie uma diretiva

yo angular:directive albums

Start Karma

Para iniciar o Karma, que também executará automaticamente os testes quando atualizarmos os arquivos, use:

karma start

Agora você deve ver que dois testes foram executados com sucesso:

Executed 2 of 2 SUCCESS (0.284 secs / 0.015 secs)

Crie um teste de falha

https://gist.github.com/newtriks/5472834

(Nossa lista é proveniente do talentoso Busdriver louco !)

Vamos corrigir o primeiro erro que vemos:

Error: No module: views/templates/albums.html

Crie um modelo simples

mkdir -p app/views/templates
touch app/views/templates/albums.html

Nosso teste ainda está falhando, vamos adicionar o novo modelo à diretiva albums.js , alterar a linha de código que declara o modelo para:

templateUrl: 'views/templates/albums.html',

O teste ainda falhará, pois não estamos criando uma lista no modelo. Vamos fazer isso agora adicionando o seguinte ao albums.html :

<ul><li>{{title}}</li></ul>

E atualize a diretiva albums.js da seguinte forma:

https://gist.github.com/newtriks/5473029

Palavra! O teste passa. Vamos adicionar outro teste para verificar se o primeiro álbum da lista tem o título correto.

it("should display the correct album title for the first item in the albums list", function() {
    var list = element.find('li');
    expect(list.eq(0).text()).toBe('Memoirs of the Elephant Man');
});

O teste falha. Vamos adicionar o atributo title ao escopo das diretivas em albums.js :

https://gist.github.com/newtriks/5473047

Legal, o teste está passando novamente.

Todas as fontes deste projeto podem ser encontradas no Github .

O artigo completo pode ser lido aqui: http://newtriks.com/2013/04/26/how-to-test-an-angularjs-directive/