Artigos Angular Angular CLI: Como rodar testes e checar o código

A criação de classes de testes é uma das boas práticas indicadas para todas aplicações, pois é através deles que garantimos que nossa aplicação continua se comportando como deveria, mesmo após serem realizadas modificações no código. Tão importante quanto os testes, a adesão a padrões e boas práticas, além de um código claro e conciso, também devem estar no radar de todos os desenvolvedores. O Angular CLI favorece essas práticas e facilita estas tarefas.

Como rodar testes e checar o código no Angular CLI

Neste documento apresentaremos como executar os testes da aplicação, sejam unitários ou testes e2e (End to End), e como rodar o Lint para realizar checagens em nosso código.

ng lint

De forma geral, o Lint é uma ferramenta bastante útil para checar se seu código possui algum erro em potencial ou se segue os padrões e convenções da linguagem em uso. O TypeScript também possui sua versão do lint, que é chamada de tslint. Para rodar o tslint em seu projeto, primeiro é necessário ter o arquivo tslint.json, que já é criado por padrão ao executar o comando ng new e que contém as regras de checagem que o tslint utilizará para verificar seu código. Assim, basta executar o comando ng lint dentro da pasta do projeto.

Exemplo de uso:

ng lint

Parâmetros

Para esse comando podemos especificar os parâmetros apresentados na Tabela 1.

Parâmetro

Descrição

--fix

Corrige os erros encontrados no código. Valor padrão: false.

--type-check

Habilita a checagem de tipo. Valor padrão: false.

--force

O Lint considera que o código está correto, mesmo que sejam encontrados erros. Valor padrão: false.

--format <string>

Define como o resultado da análise do lint deve ser exibido: json, prose, etc. Valor padrão: prose.

Tabela 1. Parâmetros do comando ng lint

ng test

Muitos comandos do Angular CLI geram um arquivo com a extensão .spec.ts. Esses são os arquivos de teste de seu projeto e você pode usar o CLI para executar todos eles e verificar se algum bug foi criado.

Exemplo de uso:

ng test

Parâmetros

Para esse comando podemos especificar os parâmetros apresentados na Tabela 2.

Parâmetro

Descrição

--watch

Recria um build que está sendo testado quando encontrar mudanças no código.

--code-coverage

Define se deve criar o relatório de cobertura dentro do diretório coverage/. Valor padrão: false.

--config <string>

Informar o arquivo de configuração. O padrão é o arquivo do Karma definido no angular-cli.json.

--single-run

Executar os testes apenas uma vez.

--progress

Exibir o progresso no console.

--browsers <string>

Informar quais navegadores serão usados para realizar os testes.

--colors

Habilita o uso de cores no resultado dos testes.

--log-level <string>

Definir o nível de log.

--port <string>

Definir a porta que deve ser usada no servidor.

--reporters <string>

Informar a lista de reporters que devem ser usados nos testes.

--sourcemaps

Criar arquivos de source map (.map).

--poll <number>

Define o período, em milissegundos, que será usado para verificar se ocorreram mudanças no projeto.

--app <string>

É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o teste deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json.

Tabela 2. Parâmetros do comando ng test

ng e2e

O termo e2e em JavaScript é utilizado para referenciar os testes do tipo End to End. Na estrutura de pastas fornecida pelo Angular CLI, esses testes encontram-se no diretório /e2e e é possível executá-los utilizando o comando do exemplo abaixo.

Exemplo de uso:

ng e2e

Parâmetros

O comando ng e2e pode receber parâmetros, e os principais estão detalhados na Tabela 3.

Parâmetro

Descrição

--target <string>

Define qual tipo de build deve ser gerado: (development, production). Valor padrão: development.

--environment

Define qual dos ambientes definidos em /src/environments deve ser usado na geração do build.

--aot

Criar o build usando compilação AOT (Ahead of Time), ao invés de JIT (Just in Time). Esta opção melhora o desempenho, pois todos artefatos são previamente compilados para Javascript.

--sourcemaps

Criar arquivos de source map (arquivos com extensão .map).

--base-href <string> *

Altera a tag base-href no arquivo index.html para o valor informado.

--deploy-url <string> *

URL na qual a aplicação será implantada.

--verbose

Exibe mais informações sobre a execução do comando.

--i18n-file <string>

Informar onde se encontra o arquivo de internacionalização (i18n).

--i18n-format <string>

Informar qual o formato que se encontra o arquivo de internacionalização indicado no comando --i18n-file.

--locale <string>

Informar qual locale deve ser usado para internacionalização.

--extract-css

Por padrão, o Angular compila os estilos dentro de arquivos JS. Este parâmetro informa que esses estilos devem ser colocados dentro de arquivos CSS.

--watch

Recriar o build quando forem encontradas mudanças. Valor padrão: true.

--poll <number>

Define o período, em milissegundos, que será usado para verificar se ocorreram mudanças no projeto.

-app <string>

Define qual das aplicações definidas no arquivo angular-cli.json deve ser usada para ser disponibilizada no servidor.

--port <number>

Define qual porta o servidor escutará. Valor padrão: 4200.

--host <string>

Por padrão, o servidor é acessível apenas na própria máquina onde está sendo executado. Com este comando é possível informar que ele pode ser acessado através de outras interfaces de rede.

--ssl

Iniciar o servidor com suporte a SSL (HTTPS).

--ssl-key <string>

Informar a chave privada para usar nas conexões SSL.

--ssl-cert <string>

Caminho para o certificado para ser usado nas conexões SSL.

--open

Abrir o navegador apontando para o endereço do servidor.

--live-reload

Informa se deve recarregar a aplicação no navegador sempre que forem encontradas mudanças no projeto.

--specs <array>

Sobrescreve os specs do arquivo de configuração do Protractor. É possível enviar múltiplos specs repetindo este parâmetro: --specs=spec1.ts --specs=spec2.ts.

--element-explorer

Inicia o Element Explorer do Protractor para fazer debug.

--serve

Compila e serve a aplicação. Ao utilizar este comando, todos os parâmetros usados com ng serve também estarão disponíveis.

Tabela 3. Parâmetros do comando ng e2e

Exemplo prático

Suponha que foram criados todos os testes de sua aplicação e, antes de enviar o código para produção, é necessário executar o Lint e ao mesmo tempo corrigir possíveis erros de estilo de código encontrados. Além disso, é uma prática na sua empresa guardar a saída do Lint em um arquivo no formato JSON. Para isto, você pode executar: 

ng lint --fix --format json

Outra boa prática de desenvolvimento é checar se erros foram introduzidos no projeto durante o último ciclo de desenvolvimento. Como todo desenvolvedor cauteloso, você pode preferir ir alterando o projeto e assim que salvar os arquivos modificados, executar os testes imediatamente, além de querer ver o resultado dos testes colorido, para facilitar a visualização. Para obter esse resultado, você pode executar o código abaixo a cada mudança feita:

ng test --colors --watch

Por último, os testes do tipo e2e também são muito importantes e você também gostaria que eles fossem executados imediatamente, mas na versão que irá para produção. Para fazer isso, basta usar o comando abaixo:

ng e2e --watch --target production

Aprenda como gerar o build de projetos Angular na documentação abaixo: