Karma Tutorial: Teste de Unidade Front-End usando Karma Test Runner

karma tutorial front end unit testing using karma test runner

Este tutorial explica como configurar Karma e automatizar o teste de unidade front-end usando Karma, opções de configuração básicas para o arquivo Karma.conf.js, etc .:

Este tutorial explica o procedimento de automação do Teste de Unidade do front-end do software usando Karma e algumas de suas ferramentas associadas.

Começaremos com aplicativos da web desenvolvidos usando a biblioteca JavaScript: ‘Jquery’ e JavaScript runtime: ‘NodeJS’; e mais tarde veremos alguns frameworks JavaScript, como AngularJS e ReactJS.

=>ROLAR PARA BAIXOpara ver a lista completa de Tutoriais de Karma

O que você aprenderá:

• Lista de tutoriais do Karma
• Visão geral dos tutoriais de Karma nesta série
• O que é teste de unidade de front-end?
• O que é Karma Test Runner?
  • Como funciona o karma como um Testrunner?
• O que é NodeJS?
  • O que é o Node Package Manager (Npm)?
• Como instalar o Karma?
  • Visão geral das opções de configuração do arquivo Karma.conf.js
• Perguntas Karma init
  • Outro conteúdo do arquivo karma.conf.js
  • Karma Browser Launchers
• Conclusão
  • Leitura recomendada

Lista de tutoriais do Karma

Tutorial # 1: Karma Tutorial: Teste de Unidade Front-End usando Karma Test Runner
Tutorial # 2: Jasmine Framework Tutorial incluindo Jasmine Jquery com exemplos
Tutorial nº 3: Projeto de amostra em teste de unidade de front-end usando KARMA e JASMINE

Visão geral dos tutoriais de Karma nesta série

O que é teste de unidade de front-end?

O front-end de qualquer sistema de software é simplesmente a interface onde o usuário acessa todas as funcionalidades disponibilizadas pelo sistema. Para garantir a melhor experiência do usuário, é necessário garantir que os desenvolvedores de front-end tenham codificado o front-end, mantendo todos os requisitos do usuário em mente.

A única maneira de garantir isso é escrever e executar testes sobre os códigos do desenvolvedor. A entrega deve ser aceita como um código / recurso de front-end de qualidade apenas quando o resultado de todos esses testes estiver com o status de 'aprovado'.

O teste de unidade é um tipo de método de teste de software no qual cada parte individual e independente do código-fonte é testada para determinar se é bom o suficiente para uso.

Quando nós realizar este teste de unidade no front-end (cliente) do software, é chamado de teste de unidade de front-end. O oposto do teste de front-end é o teste de back-end (lado do servidor).

O teste de unidade de front-end pode ser executado manualmente ou automaticamente. O teste de unidade de front-end automatizado está em alta atualmente, pois é mais eficaz e economiza tempo. Existem diversas ferramentas disponíveis para testes de unidade front-end em diferentes plataformas de programação.

AngularJS e ReactJS são dois frameworks JavaScript front-end populares, embora ReactJS seja bastante novo.

Para realizar testes de unidade em um aplicativo, os front-ends construídos com esses frameworks front-end ou mesmo aqueles construídos sem os frameworks, certas ferramentas de teste de automação como Karma, mocha, Jasmine, jest, enzima, etc., são usados.

como executar o arquivo jar no windows 10

Em primeiro lugar, estaríamos aprendendo a conduzir testes de unidade front-end usando Karma e Jasmine e, mais tarde, poderíamos dar uma olhada nas outras ferramentas também.

Começaremos executando testes de unidade de front-end usando fixtures para front-ends construídos sem nenhuma das estruturas JavaScript para front-ends. No total, dividiremos nosso aprendizado nesta série em três tutoriais.

Neste primeiro tutorial, tentaríamos ter uma noção de como o Karma está sendo configurado, o segundo tutorial explicará o Jasmine em detalhes, por fim, no terceiro tutorial, veremos sua aplicação prática.

O que é Karma Test Runner?

Karma é uma ferramenta de teste baseada em nó que permite testar seus códigos JavaScript em vários navegadores reais. Uma ferramenta baseada em nó é qualquer ferramenta que precisa do mecanismo Nodejs instalado para funcionar e pode ser acessada (instalada) por meio do gerenciador de pacotes de nó (npm).

Karma é uma ferramenta que torna nosso desenvolvimento orientado a testes rápido, divertido e fácil. É tecnicamente denominado como executor de testes. Vale ressaltar aqui que o Karma foi desenvolvido pela equipe Angular.

Como funciona o karma como um Testrunner?

Como executor de testes, Karma faz três coisas importantes:

• Ele inicia um servidor da web e fornece sua fonte JavaScript e arquivos de teste nesse servidor.
• Carrega todos os arquivos de origem e de teste na ordem correta.
• Finalmente, ele ativa os navegadores para executar os testes.

O que mais o Karma pode fazer?

Além das funções do Karma listadas acima, existem algumas outras coisas que o Karma pode ser configurado para fazer. Por exemplo, publicar cobertura de teste de código para macacão.io ; transpilar um código do formato es6 para o es5, agrupando vários arquivos em um único arquivo e gerar mapas de origem.

Em nossos tutoriais subsequentes, veremos como algumas dessas coisas funcionam.

Requisitos para começar a usar o Karma

Para começar a usar o Karma, você precisa ter uma compreensão do NodeJS e do gerenciador de pacotes Node.

O que é NodeJS?

O Nodejs resolve a natureza do bloqueio de chamadas assíncronas de JavaScript, ou seja, quando uma função assíncrona é acessada em JavaScript, ele evita que outras partes do código sejam executadas até que a chamada assíncrona retorne. No entanto, com NodeJS, chamadas de função não bloqueadoras assíncronas podem ser feitas.

Em termos técnicos, pode-se dizer que o NodeJS é um tempo de execução JavaScript assíncrono orientado a eventos que torna fácil e possível a construção de aplicativos escaláveis ​​em rede.

Primeiros passos com NodeJS

Você simplesmente precisa instalar a estrutura NodeJS. Tudo que você precisa fazer é visitar o local na rede Internet e, com base no seu SO, você deve baixar o instalador e seguir as instruções do site sobre sua instalação.

O que é o Node Package Manager (Npm)?

O gerenciador de pacotes de nó (npm) é um gerenciador de pacotes JavaScript que é usado para instalar outros aplicativos ou módulos baseados em nó pré-construídos que você pode querer reutilizar em seu próprio aplicativo.

O Npm é instalado quando você instala o NodeJS, mas o npm é atualizado mais rápido que o nó. Portanto, pode ser necessário atualizar seu npm em algum momento. Para instalar a versão mais recente do npm, você deve executar este comando na linha de comando: npm install npm @ mais recente -g

O comando acima indica que você está pedindo ao shell do sistema operacional para executar o aplicativo npm e o aplicativo deve executar a instalação do pacote npm. @latest indica que a versão mais recente do pacote deve ser instalada, a opção -g indica que o pacote deve ser instalado globalmente.

Mais detalhes sobre o npm podem ser encontrados Aqui .

Há duas coisas importantes que devem ser mencionadas aqui, ou seja, a instalação de um pacote com as opções –save e –save-dev.

Durante os testes, qualquer pacote instalado deve ser instalado usando a opção –save-dev, ou seja, para instruir o gerenciador de pacotes a instalar o pacote como uma dependência de desenvolvimento e não como uma dependência de projeto (quando eu uso –save).

A dependência de desenvolvimento deve ser escolhida, pois o pacote não é necessário para o aplicativo durante a fase de produção, mas apenas durante a fase de desenvolvimento para fins de garantia de qualidade.

Como instalar o Karma?

Para começar com o Karma, você precisa criar uma pasta para o projeto para o qual está prestes a escrever os testes de unidade. Você pode nomeá-lo como “basicUT”. Estou usando o Visual Studio Code como editor de texto, portanto, recomendo que você também faça o download e instale-o. Você pode encontrá lo Aqui .

Abra a janela do terminal embutido do código do Visual Studio, clique no 'menu Exibir' e selecione o submenu do terminal integrado.

Na janela do terminal, digite ‘npminit’ conforme mostrado na figura abaixo. Este comando orienta você a configurar automaticamente o arquivo ‘package.json’ que todo aplicativo baseado em nó deve ter.

O arquivo package.json armazena informações sobre seu aplicativo, como nome, número da versão, autor, dependências do aplicativo, dependências de desenvolvimento, comando de teste ou script e script para iniciar o aplicativo ou construir o aplicativo em uma forma executável.

Clique Aqui para mais detalhes sobre o arquivo ‘package.json’.

Captura de tela da inicialização de um arquivo package.json usando npminit

Conforme descrito acima, para instalar o Karma, tudo que você precisa é executar o comando npm install Karma @ latest –save-dev . Espero que agora você possa interpretar o que esse comando implica.

Agora que instalamos o Karma com sucesso, qual é a próxima coisa que você precisa fazer para usar o Karma em seus testes de unidade de front-end?

Tudo que você precisa fazer é escrever o arquivo de configuração para ele, e o arquivo geralmente é denominado como Karma.conf.js para JavaScript. No entanto, é diferente para CoffeeScript. Clique Aqui para explorar mais sobre o arquivo de configuração do Karma.

Visão geral das opções de configuração do arquivo Karma.conf.js

O arquivo de configuração Karma.conf.js deve conter as instruções de configuração que o Karma deve seguir para realizar as três funções importantes do Karma.

Este arquivo de configuração pode ser criado manualmente ou automaticamente usando o comando: ‘karma init’, que começa a exibir diferentes perguntas para você responder, e Karma usa as respostas que você fornece para configurar o arquivo de configuração.

Você já deve ter descoberto que executar o comando: ‘karma init’ dá o erro ' ‘Karma’ não é reconhecido como um programa operável de comando interno ou externo ou arquivo em lote ”.

Isso ocorre porque o Karma foi instalado localmente e não globalmente no projeto em que você está trabalhando. Portanto, o shell do sistema operacional não pode encontrar o aplicativo Karma em suas configurações de ambiente de caminho se você estiver usando o Windows ou no arquivo .bash_profile se você estiver usando o Mac.

Para corrigir esse erro, precisamos instalar o Karma globalmente. Não apenas Karma, mas o pacote projetado especificamente para permitir o uso de Karma na linha de comando que é Karma-cli. Basta executar o comando, ′ Npm install -g karma-cli ’ .

Agora execute novamente o comando karma-init, e você pode ver as questões conforme mostrado na figura abaixo. Quando você responder a cada pergunta e pressionar a tecla ‘ENTER’, a próxima pergunta aparecerá.

Executando o comando Karma init na linha de comando.

melhor software de desktop remoto para windows

A tabela abaixo fornecerá uma lista das perguntas, seus significados e qual deve ser sua resposta no contexto deste tutorial.

Perguntas Karma init

P # 1) Qual estrutura de teste você deseja usar?

Explicação: Uma estrutura de teste é um pacote que fornece as funções e rotinas necessárias para automatizar o processo de testes de codificação para qualquer produto de software de uma linguagem específica. Por exemplo, jasmine e mocha estão testando frameworks para pacotes de software JavaScript, Junit e JTest estão testando frameworks para Java, verifique esta para mais detalhes.

Responda: Uma instrução aparece solicitando que você use tab para visualizar outras estruturas de teste disponíveis para um aplicativo baseado em nó, mas por padrão você vê jasmine, então simplesmente clique em Enter.

P # 2) Você deseja usar Require.js?

Explicação: Require.js é um arquivo JavaScript e carregador de módulo. Você pode estar se perguntando: por que você precisa de um carregador de arquivo ou módulo? Leitura esta

Responda: No código, estaremos escrevendo, eu não faria uso de require.js, então simplesmente responda não. ele pergunta é o que usaríamos? Para poder usar as instruções require para trazer arquivos externos para outro arquivo, precisamos de um carregador de módulo, portanto, optamos pelo Browserify. Você verá mais detalhes abaixo.

P # 3) Você deseja capturar algum navegador automaticamente?

Explicação: Lembre-se de que karma é uma ferramenta que o ajuda a testar seu front-end em diferentes navegadores, portanto, esta questão se destina a você selecionar os navegadores que gostaria de usar sempre que executar o teste com início de karma.

Responda: Para esta lição, selecione chrome, firefox e phantomjs. Agora a questão é o que é PhantomJS? O PhantomJS é um navegador da Web sem interface com o qual é feito o teste de sites sem interface, captura de tela, automação de página e monitoramento de rede. Você pode ver os detalhes Aqui .

Outra pergunta, o que é um navegador da web sem cabeça? Um navegador da Web sem interface com o usuário é um navegador sem uma interface gráfica de usuário, os códigos são executados em um ambiente semelhante a um console.

P # 4) Qual é a localização de seus arquivos de origem e de teste?

Explicação: Esta pergunta tem como objetivo expor o caminho onde você salvará os arquivos de front-end e os arquivos de teste que realizarão o teste de unidade neles.

Responda: Para este projeto, insira public / js / *. Js para o caminho dos arquivos de origem e test / * Spec.js para o caminho dos arquivos de teste. O * Spec.js indica que todos os arquivos de teste podem ser chamados de qualquer coisa, mas devem conter Spec no final com uma extensão de arquivo .js.

P # 5) Algum dos arquivos incluídos pelos padrões anteriores deve ser excluído?

Explicação: Às vezes, pode haver a necessidade de que certos arquivos de origem e arquivos de teste não sejam carregados, esta questão se destina a você especificar os arquivos que não devem ser carregados no navegador pelo Karma.

Responda: Basta inserir uma string vazia pressionando enter. Você viu a declaração 'Você pode usar padrões glob, Por exemplo, “** / *. Swp”. ’. Os padrões Glob são usados ​​para especificar um conjunto de nomes de arquivos em um ambiente do tipo Unix usando o caractere curinga.
Em nosso caso, public / js / *. Js significa qualquer arquivo denominado qualquer conjunto de caracteres, conforme indicado por (*), tem a extensão de arquivo .js e reside no caminho public / js. Consulte Mais informação Aqui

P # 6) Você quer que o Karma observe todos os arquivos e execute os testes de mudança?

Explicação: Quando um executor de tarefa / teste observa seus arquivos, tudo isso simplesmente significa que sempre que você edita os arquivos durante o desenvolvimento, o executor de teste / tarefa recarrega o arquivo ou executa novamente a função no arquivo, sem que você precise pedir manualmente para fazê-lo novamente.

Responda: Então, simplesmente responda sim.

Outro conteúdo do arquivo karma.conf.js

# 1) basePath : Esta configuração contém o nome de qualquer pasta que deve ser usada para resolver as informações de caminho fornecidas para os arquivos de teste e de origem.

# 2) pré-processadores : Contém o nome dos arquivos de programa que devem ser usados ​​para processar os arquivos de origem e de teste antes de carregá-los no navegador.

Por que isso é necessário?

Com o advento do estilo de codificação ES6 que ainda não é compreendido pelos navegadores, há uma necessidade de transpilar o código do formato ES6 para o ES5 que o navegador possa entender, portanto, o pré-processador babel para Karma pode ser especificado para ser usado para transpilar o código de ES6 para ES5 antes de carregá-lo no navegador.

Existem outros usos de um pré-processador, Por exemplo. publicação de cobertura de teste de código para coveralls.io, consulte Aqui para mais detalhes.

# 3) repórteres : Esta opção de configuração especifica o pacote a ser usado para relatar os resultados do teste. Existem vários repórteres para relatar a cobertura do teste de código; Por exemplo. cobertura. Mas, por padrão, é definido como progresso. Observe que é uma matriz, portanto, você também pode adicionar outros repórteres.

# 4) porta : Isso especifica a porta na qual o navegador está ligado.

# 5) cores : Especifica se os repórteres devem produzir os relatórios com colorações.

# 6) logLevel : Isso especifica o nível de registro. Por padrão, é definido como config.LOG_INFO, o que significa que apenas as informações são registradas.

# 7) singleRun : Isso especifica se o Karma deve sair após executar o teste uma vez. Se definido como verdadeiro, Karma executa o teste e sai com o status 0 ou 1, dependendo se o teste foi reprovado ou aprovado, caso contrário, o Karma não para.

Esta configuração é necessária para fins de teste de integração contínua usando ferramentas como TravisCI e CircleCI.

# 8) simultaneidade : Isso especifica quantos navegadores o Karma deve iniciar ao mesmo tempo. Por padrão, ele é definido como infinito.

Clique Aqui para obter informações detalhadas sobre as opções de configuração do Karma.

Se você é um aluno observador, deve ter visto essas três linhas.

Vamos explorar isso na seção abaixo.

Karma Browser Launchers

Karma-firefox-launcher, Karma-chrome-launcher e Karma-phantomjs-launcher podem ser geralmente chamados de inicializadores de navegador para Karma.

O Karma precisa ativar esses aplicativos de navegador que são independentes, portanto, um aplicativo de terceiros é necessário para fornecer uma interface ao Karma para executar o comando shell que ativa os navegadores em qualquer sistema operacional em que o Karma esteja executando um teste.

Portanto, eles são lançadores de navegador Karma para firefox, chrome e phantomjs, respectivamente. O Karma está apresentando essas declarações para nos informar sobre sua incapacidade de instalar esses requisitos e, então, nos pede para instalá-los manualmente.

Para fazer isso, usaremos o gerenciador de pacotes do nó e executaremos estes comandos na linha de comando: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Todos nós devemos ter os navegadores chrome e firefox instalados, com phantomjs não instalados. Se isso for verdade, então você precisa instalá-lo, veja Aqui para detalhes e clique Aqui para obter um guia de início rápido.

Conclusão

Neste tutorial, tentamos entender do que se trata o teste de unidade de front-end. Também introduzimos uma importante ferramenta de teste de unidade de front-end para software JavaScript conhecida como Karma, que é uma ferramenta baseada em nó. Também apresentamos as opções básicas de configuração do arquivo Karma.conf.js e o que todas elas implicam.

Aprendizado

• O teste de unidade é um tipo de método de teste de software no qual cada parte individual e independente do código-fonte é testada para determinar se é bom o suficiente para uso.
• Quando executamos esse teste de unidade no front-end (cliente) do software, ele é conhecido como teste de unidade de front-end.
• Karma é uma ferramenta de teste baseada em nó que permite testar seus códigos JavaScript em vários navegadores reais. Por isso, é denominado como executor de teste.
• Nodejs é um JavaScript de tempo de execução orientado a eventos assíncronos que torna fácil e possível a construção de aplicativos escaláveis ​​em rede.
• O gerenciador de pacotes de nó (npm) é um gerenciador de pacotes JavaScript que é usado para instalar outros aplicativos ou módulos baseados em nó pré-construídos que você pode querer reutilizar em seu próprio aplicativo.

Próximo tutorial

O Karma sozinho não pode automatizar o teste de unidade front-end de aplicativos JavaScript; ele também precisa trabalhar com outras ferramentas de teste, como uma estrutura de teste que facilitará a escrita de nossos casos de teste.

Em nosso próximo tutorial, exploraremos o Jasmine e o pacote Jasmine-Jquery que estende a funcionalidade do Jasmine para poder testar fixtures HTML que fazem uso da biblioteca JavaScript: Jquery.

Leitura recomendada

• 20 ferramentas de teste de unidade mais populares em 2021
• Chave para o teste de unidade de sucesso - como os desenvolvedores testam seu próprio código?
• 45 melhores perguntas da entrevista sobre JavaScript com respostas detalhadas
• Tutorial do AngularJS para iniciantes absolutos (com guia de instalação)
• Diferença entre as versões angulares: Angular Vs AngularJS
• Cobertura de teste em teste de software (dicas para maximizar a cobertura de teste)
• 48 principais perguntas e respostas da entrevista do AngularJS (LISTA 2021)
• Como configurar a estrutura de teste do Node.js: tutorial do Node.js.