Quando o projeto NG se torna cada vez maior, os testes de unidade devem ser colocados na agenda. Às vezes, a equipe faz os testes primeiro, alguns implementam as funções primeiro e depois testa os módulos funcionais. Isso tem suas próprias vantagens e desvantagens. Hoje, conversamos principalmente sobre o uso de karma e jasmim para realizar testes de unidade de módulos NG.
O que é karma
O karma é uma estrutura de controle de execução de teste de unidade, fornecendo testes de unidade em execução em diferentes ambientes, como Chrome, Firfox, Phantomjs, etc. A estrutura de teste suporta jasmim, mocha, Qunit e é um módulo NPM com NodeJS como ambiente.
Recomenda-se usar o parâmetro-salvar-dev ao instalar e testar módulos NPM relacionados, porque isso está relacionado ao desenvolvimento. Geralmente, se você executar o karma, apenas os dois comandos seguintes são necessários.
A cópia do código é a seguinte:
NPM Install Karma-Save-dev
NPM Instale Karma-Junit-Reporter-Save-Dev
Ao instalar o karma, alguns módulos comumente usados serão instalados automaticamente. Consulte a propriedade PeerDependências do arquivo package.json no código do karma.
A cópia do código é a seguinte:
"Peerdependências": {
"karma-jasmine": "~ 0.1.0",
"karma-requirejs": "~ 0.2.0",
"Karma-Coffee-Preprocessor": "~ 0.1.0",
"Karma-html2js-preprocessador": "~ 0.1.0",
"Karma-Chrome-Launcher": "~ 0.1.0",
"Karma-Firefox-Launcher": "~ 0.1.0",
"Karma-Phantomjs-Launcher": "~ 0.1.0",
"Karma-Script-LAUNCHER": "~ 0,1.0"
}
Em seguida, uma estrutura de corrida típica geralmente requer um arquivo de configuração. No karma, pode ser um karma.conf.js. O código dentro é um estilo NodeJS. Um exemplo comum é o seguinte:
A cópia do código é a seguinte:
module.exports = function (config) {
config.set ({
// O diretório básico nos seguintes arquivos
Basepath: '../',
// Informações JS que precisam ser carregadas no ambiente de teste
Arquivos: [
'App/bower_components/angular/angular.js',
'App/bower_components/angular-route/angular- rote.js',
'App/bower_components/angular-mocks/angular-mocks.js',
'App/js/**/*. JS',
'Teste/unidade/**/*. JS'
],
// Se deve ouvir automaticamente as alterações no arquivo acima, execute automaticamente o teste
Autowatch: verdadeiro,
// estrutura de teste de aplicativo
Estruturas: ['Jasmine'],
// Que ambiente usar para testar o código? Aqui está o Chrome`
Navegadores: ['Chrome'],
// plugins usados, como navegador Chrome e plug-ins de jasmim
Plugins: [
'Karma-cromo-lauque',
'Karma-Firefox-Launcher',
'karma-jasmine',
'Karma-Junit-Reporter'
],
// a saída do conteúdo do teste e o nome do módulo usado para exportar
Repórteres: ['Progresso', 'Junit'],
// Defina as informações do arquivo de conteúdo de teste de saída
JunitReporter: {
outputFile: 'test_out/unit.xml',
Suite: 'Unidade'
}
});
};
Quando você precisa prestar atenção a isso, a maioria dos plug-ins acima não precisa ser instalada separadamente, porque eles foram instalados ao instalar o karma. Somente o plug-in de exportação Karma-Junit-Reporter precisa ser instalado separadamente. Se você quiser saber mais sobre os arquivos de configuração, clique aqui
É tudo sobre karma. Se você quiser saber mais sobre isso, clique aqui
O que é jasmim
O Jasmine é uma estrutura de desenvolvimento orientada a comportamento para testar o código JavaScript. Não depende de nenhuma outra estrutura JavaScript. Não requer um DOM. E possui uma sintaxe limpa e óbvia para que você possa escrever testes facilmente.
O exposto acima é a explicação dele no documento oficial de Jasmine, e o seguinte é uma tradução simples em chinês
O Jasmine é uma estrutura de teste orientada a comportamento que não depende de nenhuma estrutura JS e DOM. É uma biblioteca de testes de API muito limpa e amigável.
Aqui está um exemplo simples para ilustrar seu uso
Defina um comando de arquivo de teste como test.js
A cópia do código é a seguinte:
Descreva ("A Spec (com configuração e rasgo)", function () {
var foo;
antes e cada vez (function () {
foo = 0;
foo += 1;
});
AfterEach (function () {
foo = 0;
});
ele ("é apenas uma função, para que possa conter qualquer código", function () {
Espere (foo) .ToEqual (1);
});
ele ("pode ter mais de uma expectativa", function () {
Espere (foo) .ToEqual (1);
Espere (verdadeiro) .ToEqual (verdadeiro);
});
});
O exemplo acima vem do site oficial. Aqui estão apenas algumas APIs importantes. Para mais uso, clique aqui
1. Primeiro, qualquer caso de teste é definido pela função de descrição. Tem dois parâmetros. O primeiro é usado para descrever o conteúdo central geral do teste, e o segundo parâmetro é uma função, que grava algum código de teste real.
2. É usado para definir uma única tarefa de teste específica e também possui dois parâmetros. O primeiro é usado para descrever o conteúdo do teste, e o segundo parâmetro é uma função, que armazena alguns métodos de teste.
3. Espera é usado principalmente para calcular o valor de uma variável ou uma expressão e, em seguida, compará -lo com o valor esperado ou realizar outros eventos.
4. Antes do queijo e do pós -cada uma são usados principalmente para fazer algumas coisas antes e depois que a tarefa de teste é executada. O exemplo acima é alterar o valor da variável antes da execução e redefinir o valor da variável após a conclusão da execução.
Finalmente, o escopo da função de descrição pode ser acessado nas subfunções nele, assim como o acima acessa a variável foo
Se você deseja executar o exemplo de teste acima, poderá executá -lo através do Karar. O exemplo de comando é o seguinte:
A cópia do código é a seguinte:
Karma START TEST/KARMA.CONF.JS
Em seguida, focaremos no teste de unidade de controladores, instruções e módulos de serviço em Ng.
Testes de unidade para NG
Devido à estrutura do próprio NG, os módulos são carregados e instanciados por DI; portanto, para facilitar a redação de scripts de teste com jasmim, o funcionário fornece uma classe de ferramentas de teste de mock.js para fornecer definição de módulo, carregamento, injeção etc.
Vamos falar sobre alguns métodos comuns em ng-mock
1.angular.mock.Module Este método também está no espaço para nome da janela, o que é muito conveniente para ligar.
O módulo é usado para configurar as informações do módulo injetadas pelo método de injeção. Os parâmetros podem ser strings, funções e objetos. Eles podem ser usados como o seguinte.
A cópia do código é a seguinte:
antes e cada vez (módulo ('myApp.filters'));
antes e cada vez (módulo (função ($ fornece) {
$ fornece.value ('versão', 'test_ver');
}));
Geralmente é usado no método antes -cada, porque isso pode garantir que o método de injeção possa obter a configuração do módulo ao executar a tarefa de teste.
1.angular.mock.Inject Este método também está no espaço para nome da janela, o que é muito conveniente para ligar.
O injeção é usado para injetar o módulo NG configurado acima. É chamado na função de teste dela. Exemplos de chamadas comuns são os seguintes:
A cópia do código é a seguinte:
Angular.module ('MyApplicationModule', [])
.Value ('modo', 'app')
.Value ('versão', 'v1.0.1');
descreva ('myApp', function () {
// você precisa carregar módulos que deseja testar,
// ele carrega apenas o módulo "ng" por padrão.
antes e cada vez (módulo ('myApplicationModule'));
// inject () é usado para injetar argumentos de todas as funções dadas
ele ('deve fornecer uma versão', injetar (função (modo, versão) {
espera (versão) .ToEqual ('v1.0.1');
espera (modo) .ToEqual ('App');
}));
// O método de injeção e módulo também pode ser usado dentro do TI ou antes para cada um
ele ('deve substituir uma versão e testar a nova versão é injetada', function () {
// module () recebe funções ou strings (aliases do módulo)
módulo (função ($ fornece) {
$ fornece.value ('versão', 'substituído'); // Versão de substituição aqui
});
injeção (função (versão) {
espera (versão) .ToEqual ('substituído');
});
});
});
O exposto acima são alguns exemplos de injeção fornecidos pelo funcionário, e o código é fácil de entender. De fato, o Inject é uma instância de injeção de dependência interna criada usando o método angular.inject. Em seguida, a injeção do módulo é a mesma que o processamento de dependência nos módulos ng comuns.
Depois de apresentar brevemente o NG-Mock, escreveremos um teste de unidade simples usando controladores, instruções e filtros.
Teste de unidade de controlador
Defina um controlador simples
A cópia do código é a seguinte:
var myApp = angular.module ('myApp', []);
MyApp.Controller ('MyController', função ($ scope) {
$ scope.spices = [{"name": "Pasilla", "Spiciness": "Mild"},
{"Nome": "Jalapeno", "Spiciness": "Hot Hot Hot!"},
{"Nome": "Habanero", "Sicity": "Lava Hot !!"}];
$ scope.spice = "Olá Feenan!";
});
Então escrevemos um script de teste
A cópia do código é a seguinte:
descreva ('função mycontroller', function () {
descreva ('mycontroller', function () {
var $ escopo;
antes e cada vez (módulo ('myApp'));
antes e cada vez (injeção (função ($ rootscope, $ controller) {
$ scope = $ rootscope. $ new ();
$ controlador ('mycontroller', {$ scope: $ scope});
}));
It ('deve criar modelo "especiarias" com 3 especiarias', function () {
Espere ($ scope.spices.length) .Tobe (3);
});
ele ('deve definir o valor padrão de especiarias', function () {
Espere ($ SCOPE.SPODE) .TOBE ('Olá feedback!');
});
});
});
O acima usa $ RootsCope para criar um subscópio e depois passa esse parâmetro no método de construção do controlador do controlador. Finalmente, o método acima será executado. Em seguida, verificamos se o número de matrizes no subscópio e se as variáveis de string são iguais ao valor esperado.
Se você quiser saber mais sobre o controlador em Ng, pode clicar aqui
Teste de unidade de instruções em Ng
Defina uma instrução simples
A cópia do código é a seguinte:
var app = angular.module ('myApp', []);
App.Directive ('Agreateye', function () {
retornar {
restringir: 'e',
Substitua: verdadeiro,
Modelo: '<h1> sem tampa, perdido em chamas, 1 vezes </h1>'
};
});
Então escrevemos um script de teste simples
A cópia do código é a seguinte:
Descreva ('Testes de unidade ótimas citações', function () {
var $ compilar;
var $ rootscope;
// Carregar o módulo MyApp, que contém a diretiva
antes e cada vez (módulo ('myApp'));
// armazenar referências a $ Rootscope e $ compilam
// para que eles estejam disponíveis para todos os testes neste bloco descrever
antes e cada vez (injeção (função (_ $ compile_, _ $ rootscope _) {
// O injetor desembrulh os sublinhados (_) de todo os nomes de parâmetros ao corresponder
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
ele ('substitui o elemento pelo conteúdo apropriado', function () {
// compila um pedaço de HTML contendo a diretiva
var elemento = $ compilante ("<a-e-great> </a-greatye>") ($ rootscope);
// disparar todos os relógios, para que a expressão do escopo 1 seja avaliada
$ Rootscope. $ Digest ();
// Verifique se o elemento compilado contém o conteúdo modificado
Espere (Element.html ()). ToContain ("sem tampa, perdido em chama, 2 vezes");
});
});
O exemplo acima vem do oficial, e o comando acima será usado no HTML.
A cópia do código é a seguinte:
<A-Great-Eye> </a-Greatye>
O script de teste primeiro injeta dois serviços $ compilando e $ rootscope, um é usado para compilar HTML e o outro é usado para criar escopo. Observe que o _ é usado aqui. Quando o serviço injetado em NG é adicionado antes e depois, ele será processado por Ng. Esses dois serviços são armazenados em duas variáveis internas, para que os seguintes casos de teste possam ser chamados.
O método $ compilar é passado para a instrução original HTML e, em seguida, a função retornada é passada em $ Rootscope, que completa a ligação de escopo e visualização. Por fim, chame $ rootscope. $ Digest para acionar toda a escuta, garantindo que o conteúdo do modelo na exibição seja atualizado
Em seguida, obtenha o conteúdo HTML do elemento correspondente da instrução atual e compare -o com o valor esperado.
Se você quiser saber mais sobre as instruções em Ng, pode clicar aqui
Teste de unidade de filtro em Ng
Defina um filtro simples
A cópia do código é a seguinte:
var app = angular.module ('myApp', []);
App.Filter ('Interpolate', ['versão', função (versão) {
Retornar função (texto) {
return string (texto) .place (//%versão/%/mg, versão);
};
}]);
Em seguida, escreva um script de teste simples
A cópia do código é a seguinte:
descrever ('filter', function () {
antes e cada vez (módulo ('myApp'));
descrever ('interpolar', function () {
antes e cada vez (módulo (função ($ fornece) {
$ fornece.value ('versão', 'test_ver');
}));
it ('deve substituir a versão', injetar (função (interpolatefilter) {
Espere (interpolateFilter ('antes da versão % % após')).
}));
});
});
O código acima configura primeiro o módulo de filtro e define um valor de versão. Como o interpolado depende desse serviço, finalmente injete o filtro interpolado com injeção. Observe que o filtro aqui deve ser seguido pelo sufixo do filtro e, finalmente, passa o conteúdo do texto para a função de filtro para executar e compará -lo com o valor esperado.
Resumir
Existem muitos benefícios no uso de testes para desenvolver NG, o que pode garantir a estabilidade do módulo. Outra coisa é que você pode ter um entendimento profundo do mecanismo operacional interno de NG, por isso é recomendável que os alunos que usam NG para desenvolver preencham os testes o mais rápido possível!