karma esperar

Este projeto é baseado em James Shore: Código Vamos: lições Javascript Test Driven (Capítulo 7, Cruz-Browser Testing). Vamos montar uma estrutura de teste do lado do cliente usando Grunt como tarefa-runner, Karma como test-corredor, Mocha como framework de testes e esperar como uma biblioteca de afirmação.

Karma é um corredor de teste. Você pode testar seu código javascript em vários navegadores ao mesmo tempo. O processo de teste pode ser automatizado, e ele pode ser executado automaticamente como a sua mudança de código. Como o próprio home page diz

Karma é essencialmente uma ferramenta que gera um servidor web que executa o código fonte contra o código de teste para cada um dos navegadores conectados. Os resultados de cada teste contra cada navegador são examinados e exibidos através da linha de comando para o desenvolvedor de tal forma que eles possam ver quais navegadores e testes passou ou falhou.

Karma é executado em Node.js. Se você estiver trabalhando em uma máquina Windows, ou você não usou Node.js, no entanto, este post pode ajudá-lo a experimentar estas ferramentas. Ok, então, vamos instalar Karma.

(Supomos que você instalou o Node.js e você tem um arquivo package.json no seu diretório de trabalho)

Após a instalação fazer um script que pode lançar Karma:

Correndo Karma sem qualquer parâmetro que receber esta mensagem:

Agora podemos inicializar Karma:

Precisamos instalar Mocha (ou outro framework de teste) para usar Karma. Além Mocha, vamos instalar karma-mocha, um adaptador para Mocha:

Agora podemos iniciar o servidor Karma:

Como você pode ver servidor Karma começou em http: // localhost: 9876 /. I executar um navegador e digite este url, o Karma conecta ao navegador:

Você pode conectar o maior número de navegadores como você quer (confira os navegadores disponíveis aqui). Se você quiser lançar um navegador de Virtualbox (por exemplo IE8 no Windows), aqui estão algumas boas dicas sobre como lidar com localhost.

Temos servidor Karma, mas nada para testar ainda. Vamos instalar karma-esperar, o adaptador Expect.js primeiro:

Então nós temos que adicionar esperar para quadros no arquivo de configuração Karma (karma.conf.js):

Vamos escrever um teste simples que compara dois strings:

Agora inicie novamente o servidor Karma (porque temos modificado seu arquivo de configuração agora), e executar o teste em um outro terminal (e certifique-se ligado pelo menos um navegador para Karma):

Nós estamos indo para usar Grunt para automação de tarefas. O fluxo de trabalho é o seguinte:

  • iniciar o servidor Karma
  • lançar os navegadores manualmente (se você usa máquina virtual para alguns navegadores exóticas, iniciar a máquina e lançar esses navegadores lá)
  • conectar os navegadores para o servidor Karma (veja acima)
  • iniciar grunhido
  • grunhido corre Karma para testar seu código, e verifica se os testes de aprovação ou reprovação

Primeiro você precisa Grunt. Depois de instalar Grunt vamos executá-lo:

Temos de criar um Gruntfile simples e configurar Karma (ou se Gruntfile existe, adicione Karma para isso). Nós vamos fazer isso com Node.js child_process.exec ():

Grunt funciona de forma síncrona, mas pode ser mudado para assíncrona chamando this.async () dentro do corpo da tarefa (para mais informações consulte a documentação Grunt).

Você pode querer obter um feedback se os testes passaram. De acordo com a documentação Node.js o argumento de erro - ficando pelo retorno de chamada - será nulo em caso de sucesso. Tudo o que precisa fazer é passar falsas para o método done () para sinalizar a Grunt se os testes falharam.

Se começarmos servidor Karma, lançar nossos navegadores e conectá-los e executá-Grunt, então podemos ver o seguinte:

E agora só com o Chrome, vamos ver o que acontece se o teste falhar:

Nosso objetivo foi estabelecer um quadro simples teste de cross-browser, usando Karma. Nós precisávamos de uma estrutura de teste - era Mocha - e alguma biblioteca afirmação (eu escolhi Expect.js). Primeiro, instalado Karmas e configurado, em seguida, instalada adaptador Moca e Expect.js por Karmas. Depois instalações fomos capazes de iniciar o servidor Karma e se conectar navegadores para ele. Nós escrevemos um teste simples, ad ele correu com Karma. Nós queria automatizar o teste-running, usando Grunt, o corredor tarefa. Nós configuramos uma tarefa que pode lançar Karma como um processo filho, e verificar se os testes passar ou não.

Como eu estava trabalhando na criação do quadro, eu tentei grunhido-karma, um plug-in Karma corredor para Grunt. É realmente útil, você pode simplesmente configurar Karma com isso. Depois de instalar plugins adicionais de navegador de lançador, você não precisa começar Karma e conecte o navegador manualmente, Grunt faz o trabalho, ele inicia o servidor, lança os navegadores dadas, executar os testes, fecha os navegadores e o servidor Karma (Individual Modo corrida). Além de que você pode definir - sempre que seus arquivos de teste estão sendo modificados - para executar Karma automaticamente. Mas eu tive dificuldades quando tentei ligar navegadores lançados em máquina virtual (eu preciso vm para executar diferentes tipos de Internet Explorers). O corredor Karma não podia ver que os navegadores. Eu tentei 'nó-virtualbox', e um monte de plugins que trabalha com virtuais máquinas, mas eu não podia afinar-los para trabalhar com grunhido-karma plugin. Depois de experimentar com grunhido-karma, deixei-o e descobriu um fluxo de trabalho, que deve iniciar o servidor Karma e os navegadores dadas manualmente, mas o teste pode ser automatizado por Grunt.


Testes Unitários React.js Com Jasmine e Karma

Tenho vindo a mencionar React.js várias vezes antes. Recentemente tive oportunidade de jogar com ele de perto.

Eu também queria fazer tudo certo desde o início. Eu queria testes de unidade.

Minha escolha da estrutura é Jasmine

busca rápida por exemplo de trabalho deu apenas este


Cobertura de código de Jasmine testes usando Istambul e Karma

Para o desenvolvimento de aplicações web moderna, com dezenas de testes de unidade não é mais suficiente. A cobertura de código real desses testes iria revelar se a aplicação é completamente estressado ou não. Para provas escritas usando a famosa biblioteca de teste Jasmine, uma maneira fácil de ter o relatório de cobertura é via Istambul e Karma.

Para este exemplo, vamos supor que temos um simples sqrt.js biblioteca que contém uma implementação alternativa de Math.sqrt. Observe também como ele irá lançar uma exceção ao invés de retornar NaN para uma entrada inválida.

Usando jasmim colocado sob teste / lib / jasmim-1.3.1, que pode criar um corredor de teste que inclui a especificação seguinte:

Abrindo o corredor de especificação em um navegador da web vai dar o resultado esperado:

Karma esperar

Por enquanto, tudo bem. Agora vamos ver como a cobertura de código da nossa configuração de teste pode ser medido.

A primeira ordem de negócio é instalar Karma. Se você não estiver familiarizado com Karma, é basicamente um corredor de teste que pode lançar e conectar-se a um conjunto específico de navegadores web, executar os testes, e depois recolher o relatório. Usando Node.js, o que precisamos fazer é:

Antes de lançar Karma, precisamos especificar sua configuração. Poderia ser tão simples como as seguintes my.conf.js (a maioria das entradas são auto-explicativo). Note-se que os testes são executados usando PhantomJS por simplicidade, no entanto, é bastante trivial para adicionar outros navegadores como o Chrome e Firefox.

A execução dos testes, bem como a realização de cobertura de código, ao mesmo tempo, pode ser acionado via:

que vai despejar a saída como:

Como esperado (a partir da invocação manual anterior do corredor especificação), o teste passou muito bem. No entanto, a peça interessante mais especial aqui é o relatório de cobertura de código, ele é armazenado (no local padrão) sob a cobertura subdiretório. Abra o relatório no seu navegador favorito e lá você encontrará o relatório de análise de cobertura.

Karma esperar

Por trás da cena, Karma está usando Istambul, uma ferramenta de cobertura de código JavaScript abrangente (leia também o meu post anterior sobre JavaScript cobertura de código com Istambul). Istambul analisa o arquivo de origem, neste exemplo sqrt.js, usando Esprima e adiciona alguns extras instrumentação que será usado para reunir as estatísticas de execução. O relatório acima que você vê é uma das possíveis saídas, Istambul também pode gerar o relatório lcov que é adequado para muitos sistemas de integração contínua (Jenkins, TeamCity, etc). Uma análise extensiva dos dados de cobertura também deve evitar qualquer futuro regressão cobertura, veja meu outro post rígido Limiares em JavaScript cobertura de código.

Uma coisa importante sobre a cobertura de código é cobertura de ramo. Se você prestar atenção com cuidado, o nosso teste acima ainda não está exercendo a situação em que a entrada para My.sqrt é negativo. Existe uma grande &# 8220; I&# 8221; marcação na terceira linha do código, este é Istambul nos dizendo que a E se ramo não é levado em tudo (para o outro ramo, será uma &# 8220; E&# 8221; marcador). Uma vez que este ramo faltando é notado, melhorando a situação é tão fácil quanto adicionar mais um teste com a especificação:

Uma vez que o teste é executado novamente, o relatório de cobertura de código parece muito melhor e todos estão felizes.


Teste de unidade com Karma e Jasmine no Angular 2

Karma esperar

Angular 2 proporciona várias opções para apoiar Unit Testing. Em aqui, vamos abordar como configurar Jasmine, Karma e escrever alguns testes de unidade comuns para os seus angular 2 Applications.

  • Preparando o package.json para novas bibliotecas
  • Introdução ao Jasmine e Karma
  • Configurando Karma
  • O primeiro teste karma
  • Testando angular 2 Componentes com Jasmine

Para chegar a diversão tão rapidamente quanto possível, podemos iniciar um novo projeto seguindo as instruções no QuickStart. E certifique-se a estrutura de pastas do projeto se parece com isso:

preparando o package.json para novas bibliotecas

modificar o &# 8220; roteiros&# 8221; propriedade no package.jsoN como se segue:

Nós incluímos uma série de scripts de NPM em nossa sugerida package.json para lidar com tarefas comuns de desenvolvimento. Aqui está o que esses scripts fazer:

  • início npm - corre o compilador e um servidor ao mesmo tempo, tanto no modo “relógio”
  • Lite npm run - corre o lite-servidor, um peso-leve, servidor de arquivo estático com excelente suporte para aplicativos angulares que usam roteamento.
  • postinstall npm prazo - chamado por npm automaticamente após completar com sucesso a instalação do pacote. Este script instala os arquivos de definição de texto datilografado definidos no typings.json.
  • teste npm prazo &# 8211; compila arquivos datilografados, executa testes de unidade e, em seguida, abra o relatório gerado
  • tsc npm prazo - corre o compilador typescript uma vez
  • NPM tsc executar: w - corre o compilador original datilografado em modo de relógio; o processo continua correndo, esperando mudanças para typescript arquivos e recompilação quando vê-los
  • npm executar tipagens - executa a ferramenta tipagens separadamente

Além disso, é preciso instalar o karma e todas as outras dependências. Vamos modificar a &# 8220; devDependencies&# 8221; propriedade da seguinte forma:

Usando npm na linha de comando, instale os pacotes listados em package.json com o comando:

Usando uma janela de terminal, que será necessário para mudar para o diretório que estamos a trabalhar antes de usar os comandos

mensagens-in de erro vermelho pode aparecer durante a instalação, e você pode ver npm WARN mensagens. Enquanto não há ERR npm! mensagens no final, você pode assumir sucesso.

Introdução ao Jasmine e Karma

Jasmim é um framework de testes de código aberto de pivotal Labs que utiliza notação-driven comportamento resultando em uma experiência teste fluente e melhorada.

  • Suites - descrevem (cadeia, função) funções, ter um título e uma função que contém uma ou mais características.
  • especificações - -lo (string, a função) funções, ter um título e uma função contendo um ou mais expectativas.
  • Expectativas - são afirmações que avaliam para true ou false. sintaxe básica lê esperar (real) .toBe (esperado)
  • Matchers - são ajudantes predefinidos para afirmações comuns. Por exemplo: Tobe (esperado), toEqual (esperado). Encontrar a lista completa aqui.

O corredor de teste karma é ideal para escrever e executar testes de unidade durante o desenvolvimento da aplicação. Pode ser uma parte integrante do projeto&# 8217; s desenvolvimento e processos de integração contínua. Este capítulo descreve como configurar e executar testes com karma.

Com angular 2, Karma precisa de um tipo de arquivo de inicialização que diferentiate nossos arquivos de aplicativos de nossos arquivos de teste e ele carrega o systemjs.config.js arquivo como parte desse processo .. Nós será adicionado um arquivo chamado karma-teste-shim.js em nosso diretório raiz como abaixo:

Karma também precisa de um arquivo de configuração que define quais arquivos devem ser carregados e que navegadores devem ser usados ​​para testes. Este novo arquivo chamado karma.conf.js será adicionado ao nosso diretório raiz:

Nós&# 8217; ll começar com um teste simples para garantir que a configuração funciona corretamente. isto&# 8217; s muitas vezes melhor para criar uma pasta apropriada para eles no diretório testes. Então nós&# 8217; ll criar um novo arquivo chamado 1st.spec.ts no aplicativo da pasta / testa.

Provas escritas em Jasmine são chamados de especificações. A extensão de arquivo deve ser .spec.ts, a convenção de adesão de karma.conf.js e outras ferramentas.

Coloque arquivos de especificação em algum lugar dentro do app / pasta. o karma.conf.js diz karma para procurar arquivos de especificação lá

Adicione o seguinte código para app / tests / 1st.spec.ts:

Compilar e executá-lo no karma da linha de comando.

Depois de alguns momentos, karma abre um navegador e começa a escrever para o console.

Além disso, podemos ver o modo de depuração, clique no &# 8220; DEBUG&# 8221; botão; ele abre uma nova aba do navegador e executa novamente os testes.

Esse comando primeiro compila o aplicativo, em seguida, ao mesmo tempo re-compila e executa o karma test-corredor. Tanto o compilador e o relógio karma de (diferentes) as alterações no arquivo.

Desligá-lo manualmente com Ctrl-C.

Testando angular 2 Componentes com Jasmine

Nós&# 8217; ll adicionar o arquivo chamado app / app.component.spec.ts senta na mesma pasta como o componente.

Comece com ES6 instruções de importação para obter acesso aos símbolos referenciados na especificação:

Aqui&# 8217; s a configuração para os testes, seguido de observações sobre o beforeEach:

Não configure o TestBed depois de chamar createComponent.

Agora vamos re-compilação e executá-lo no karma da linha de comando e ver as mudanças a partir do modo de visualização de depuração.

A saída do teste-corredor aparece na janela do terminal. Podemos atualizar nosso aplicativo e nossos testes em tempo real, mantendo um olhar tempo no console para testes quebrados. Karma é ocasionalmente confusos e muitas vezes é necessário para fechar seu navegador ou mesmo desligar o comando para baixo (Ctrl-C) e reiniciá-lo. Não se preocupe; isto&# 8217; s muito rápido.

vamos verificar temos a seguinte estrutura:

O repositório para este projeto está disponível em aqui.


runkit + Karma esperar

Este é um playground para código de teste. Corre-se um ambiente cheio Node.js e já tem tudo de 400.000 pacotes de NPM pré-instalados, incluindo Karma-esperar-maptalks com todos os pacotes NPM instalados. Experimente :

Este serviço é fornecido por runkit e não é afiliado com npm, Inc ou os autores do pacote.