Configuração de teste angular

Início rápido para configurar testes com angular, karma e jasmim. Siga este guia

Pacotes

Primeiro instale globalmente os pacotes de teste relevantes

npm install -g karma jasmine-node phantomjs

• karma é o corredor de teste
• jasmim é a estrutura de teste
• phantomjs permite o teste sem abrir um navegador real

USUÁRIOS NVM

Se você for um usuário nvm, precisará configurar uma variável de ambiente para o binário phantomJs. Minha solução foi adicionar o seguinte ao final do meu ~ / .zshrc (deve funcionar para ~ / .bashrc)

export PHANTOMJS_BIN=$NVM_BIN"/phantomjs"

Configuração

Crie um diretório para todas as nossas configurações de teste

mkdir configs

Crie um diretório para nossos testes de unidade

mkdir -p test/unit

Obtenha todos os arquivos angulares

mkdir -p {public/app,test}/lib/angular

curl http://code.angularjs.org/1.0.7/angular.min.js > public/app/lib/angular/angular.min.js

curl http://code.angularjs.org/1.0.7/angular-mocks.js > test/lib/angular/angular-mocks.js

Então precisamos gerar um script de configuração de karma para nossos testes de unidade

karma init configs/karma.conf.js

Você receberá um monte de perguntas que você precisará responder como esta

• framework de teste: jasmine (padrão)
• require.js: no (padrão)
• Navegador: PhantomJS (pressione tab para percorrer as opções)
• arquivos para testar
  • public / app / lib / angular / angular.min.js
  • test / lib / angular / angular-mocks.js
  • public / app / *. js
  • test / unit / * Spec.js
• Relógio testacular: sim

Então podemos começar a monitorar o carma para nossos testes

karma start configs/karma.conf.js

Agora estamos prontos para criar nossa primeira classe de teste

test / unit / controllerSpec.js

'use strict';

describe('IndexController', function() {
    //initialise module
    beforeEach(module('myapp.controllers'));

    //params initialised in scope for tests
    var ctrl, scope;

    beforeEach(inject(function($controller) {
        //get controller from $controller provider
        scope = {}; 
        ctrl = $controller('IndexController', {
            $scope: scope
        }); 
    }));

    it ('should add name parameter to scope', function() {
        expect(scope.name).toBeDefined(); 
    }); 
});

Depois de salvar esse arquivo, devemos ver o arquivo controllerSpec.js sendo pego pelo karma e adicionado ao conjunto de testes. Deve começar a falhar, pois o escopo não tem elemento de nome

Para fazer o teste passar, abra public / app / controllers.js, adicione o seguinte ao IndexController

$scope.name = 'bob';

e você verá o relatório de carma que os testes passam.