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 lintParâ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 testParâ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 e2eParâ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 jsonOutra 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 --watchPor ú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
