Deixe-me falar brevemente sobre testes angulares.
Como você projeta suas aplicações angulares para serem testáveis?
Como você desenha os testes para sua aplicação angular?
Como você executa os testes e certifique-se de que
sua aplicação angular está satisfazendo todos os testes que você tem
escreveu mesmo quando você está desenvolvendo sua aplicação angular?
Agora é aqui que eu também falaria brevemente sobre
desenvolvimento orientado por testes de aplicações angulares.
Curiosamente, o próprio angular foi construído a partir do zero para permitir o teste,
para fazer parte do seu desenvolvimento de aplicações angulares.
A força principal por trás angular Misko Hevy era ele mesmo um engenheiro de testes do Google e, portanto,
sua influência no design angular para ser testável a partir
ground up pode ser facilmente visto em toda a estrutura.
Então, angular em si como você entendeu a partir das palestras e exercícios anteriores,
é de natureza modular.
Assim, os módulos de angular juntamente com os componentes e
seus modelos e, em seguida, os serviços e os tubos e as directivas,
significa que angular se presta facilmente para ser testado.
Agora, porque a aplicação angular em si é composta por essas várias partes,
você pode testar cada uma dessas partes em isolamento primeiro
mesmo antes que eles se tornem parte de toda a aplicação angular.
O segundo aspecto é o mecanismo de injeção de dependência que angular alavanca
para apoiar a combinação das várias partes de
sua aplicação angular em si significa que você pode facilmente substituir zomba
para essas dependências dentro
suas várias partes do angular aplicação e realizar testes.
Eu usei a palavra zombar em,
na frase anterior virá a entender
que em um pouco mais de detalhes e mais que, slides posteriores.
É aqui que precisamos estar cientes de
uma abordagem para fazer desenvolvimento de aplicativos chamada desenvolvimento orientado a testes.
No desenvolvimento orientado por testes, como você pode entender pelo próprio nome,
significa que você primeiro escreve testes automatizados para
todas as funcionalidades que você deseja implementar em seu aplicativo.
Então primeiro vem o teste,
depois você escreve o código do aplicativo para passar no teste.
Então, o teste em si especifica qual funcionalidade você deseja implementar.
Depois disso, você escreve o código para implementar essa funcionalidade.
Como você já tem o teste no lugar,
você pode testar para ver se a implementação que você faz satisfaz o teste ou não.
Agora, é claro, uma vez que sua realização de sua funcionalidade satisfaz o teste,
você sempre pode refatorar o código para estar em conformidade com seus padrões de engenharia de software.
Mas mesmo depois disso,
você pode testar novamente o código para se certificar de que ele ainda satisfaz
os requisitos especificados dentro
que teste específico que você usa dentro de seu desenvolvimento orientado por teste.
Então, de fato, o desenvolvimento orientado para testes é
uma abordagem muito viável para projetar
boa aplicação desde o zero para ser totalmente testado.
Agora, quando falamos sobre testes,
você pode abordar testes de vários aspectos diferentes.
O primeiro e acima de tudo é que se o seu aplicativo
em si é implementado como várias peças,
como componentes, como serviços, como diretivas,
como os pipes que você está implementando dentro de sua aplicação.
Isso significa que você pode facilmente testar cada uma dessas unidades individuais isoladamente.
Então é aí que os testes unitários vêm à tona.
Teste de unidade significa que você está testando as unidades individuais de código,
certificando-se de que essa unidade individual
satisfaz a funcionalidade que é suposto suportar,
e que a funcionalidade e a lógica dentro desse pedaço de código é implementada corretamente.
Agora isolar a unidade e testar é muito,
muito útil descobrir a maioria dos problemas iniciais dentro do seu,
dentro do seu código e, em seguida, corrigi-los mesmo antes de integrar esse patch no código.
Agora, uma vez que você começa a integrar essas partes no todo,
torna-se ainda mais complicado ser capaz de realizar testes detalhados de seu código.
Assim, portanto, testes unitários isolados formam a primeira linha
de defesa contra bugs quando você está desenvolvendo sua aplicação,
especificamente sua aplicação angular.
Agora, como vemos com um angular,
temos uma clara separação entre os componentes angulares e o próprio DOM.
Assim, dentro de um componente, por exemplo, lá,
a lógica do seu componente é implementada completamente em
o código datilografado que você implementou dentro de um componente que digitaliza arquivos.
E então o DOM em si é controlado através
o modelo que você projetou para o seu componente angular.
Então Beta em si, você vê a clara separação entre os dois.
Então você poderia simplesmente testar apenas a lógica de
seu código de componente em si sem escrever um modelo vertical.
Mas então você também pode considerar os dois juntos e, em seguida, avaliar esses aspectos.
Como veremos no exercício que se segue a esta palestra,
vamos realmente fazer ambas as abordagens.
Não só isso, o fato de que angular usa a injeção de dependência
significa que você pode injetar dependências simuladas dentro da sua aplicação.
Quando eu digo simular, quero dizer, por exemplo,
se seu componente depende de um serviço específico, você sempre pode implementar
um serviço simulado que imita o comportamento do serviço
e, em seguida, substituir no lugar enquanto você está testando o componente para que você possa manter
seu componente independente de como o serviço é realmente implementado.
Enquanto a interface entre seu componente e o serviço for projetada corretamente
, você poderá substituir um serviço simulado no local e ainda testar seu componente.
Lá, do simulador,
você pode facilmente controlar o que é fornecido ao componente a partir do serviço.
Portanto, esta abordagem permite que você faça testes de unidade
em grande detalhe dentro da sua aplicação angular.
Aqui é onde a disponibilidade de frameworks de teste como “Jasmine”.
Então, o que Jasmine fornece é
um framework de teste orientado pelo comportamento que é completamente projetado em JavaScript.
Agora, esta estrutura Jasmine é uma estrutura geral que
está disponível para testar qualquer aplicativo JavaScript.
Angular adota Jasmine como a abordagem para especificar nossos testes para outras partes angulares,
seus componentes, os serviços e vários aspectos de nossa aplicação angular.
Agora, dentro de Jasmine, Jasmine usa duas coisas que vem em seu auxílio.
Um deles é o uso de uma função “descrever”.
A função “descrever” permite agrupar um conjunto de testes e, em seguida,
executar esses testes juntos como um único grupo de testes.
Quando escrevemos o código no exercício você vai me ver
encerrando um conjunto de testes dentro de uma função de descrever.
Então escrevemos o nosso código para o nosso,
o código Jasmine, para os nossos testes angulares.
Agora, dentro dessas funções “descrever”, você também usará o que é chamado de funções “it”.
As funções “it” permitem especificar
testes individuais que você deseja realizar em sua aplicação angular.
Então é onde você vai me ver especificando “it” e, em seguida, especificar que
a natureza do teste particular e, em seguida,
projetar o código para esse teste específico com uma função in “it”.
Então, à medida que projetamos o código no exercício, procure o “descrever” e
o “it” dentro de suas aplicações de teste angular.
Uma vez desenhado o teste com o framework Jasmine,
Karma é uma ferramenta de linha de comando com base em JavaScript
que permite realizar estes testes automaticamente.
Agora, Karma junto com Jasmine,
permite que você realize testes para sua aplicação angular.
Agora com Karma, o que Karma suporta,
é que ele permite que você crie
um servidor web dentro do qual você carrega o código-fonte do aplicativo e
em seguida, Karma usa um navegador para realizar os testes reais de suas várias unidades.
Então é aqui que quando você executa seus testes usando Karma,
você verá Karma empilhando um navegador,
se é uma janela de navegador de um navegador existente ou
se você usaria algo chamado PhantomJS que começa
um navegador fantasma nos bastidores para realizar o teste.
Não importa, mas Karma usa
o navegador em um momento para realizar o teste para sua aplicação angular.
Como você verá no exercício que se segue,
aqui é onde se um de seus colegas continua insistindo que sua implementação de
um determinado pedaço de sua aplicação angular é
correto e continua enfatizando o ponto,
você sempre pode projetar alguns testes usando Jasmine e
Karma e, em seguida, realizar os testes e se os testes falharem,
você sempre pode refutar seu argumento.
Então é quando você pode virar,
virar para seu colega e dizer,
meu Karma atropelou seu dogma.
Agora, é claro, suas aplicações angulares não são completamente desprovidas
do envolvimento da própria estrutura angular.
Seu componente não pode ser projetado sozinho sem
usando muitas das funcionalidades da biblioteca que angular fornece para você,
embora algumas das lógicas básicas possam ser testadas independentemente do angular.
O que chamamos de testes isolados.
Mas, mais e mais,
você vai descobrir que a menos que você em,
quer o suporte de quadro angular em si você
não será capaz de realizar grande parte do teste de
suas partes angulares se é componentes ou serviços ou tubos ou directivas.
Então é aqui que os utilitários de teste angulares fornecem
um ambiente de teste que permite que você realize
os testes unitários dentro de sua aplicação angular.
Então, os utilitários de teste angular como você vai me ver usando nos exercícios,
no próximo exercício,
nos fornecerá certas implementações de funcionalidade angular que você usa
dentro de seus testes, a fim de configurar o ambiente onde você pode realizar seus testes.
Então, este é o lugar onde a interação com o ambiente angular,
em vez de usar as implementações angulares reais,
você vai usar este utilitário de teste que irá fornecer
funcionalidade suficiente para permitir que você realize os testes.
E é aqui que o TestBed que vamos
usar dentro da nossa aplicação angular é muito, muito útil.
O TestBed cria essencialmente um modular de teste angular.
Como você percebe, seus componentes não existem sozinhos.
Seus componentes devem ser incluídos dentro de um módulo NG.
Agora você não pode simplesmente usar um módulo NG padrão para realizar seus testes.
Então é aí que o TestBed,
que é suportado pelo utilitário de teste angular,
fornece um ambiente de módulo NG que permite testar seus componentes.
Então, dentro do TestBed,
você usará algo chamado TestBed Create Component para criar
um componente individual e uma instância do componente para realizar os testes sobre isso.
E quando você faz isso
o TestBed dá acesso a algo chamado ComponentFixture,
o ComponentFixture é algo que fornece um identificador que permite que você envolva
seu componente com funcionalidade suficiente para que o componente possa ser testado por si só.
O fixture fornece acesso ao próprio componente e
, em seguida, também através de que vamos usar algo chamado DebugeLement.
Você vai me ver usando isso no exercício que se segue.
O DepureLement dá-lhe acesso ao DOM,
que é o modelo suportado como parte do seu componente.
Assim, você pode fazer manipulações no DOM como clicar em elementos no DOM,
obter acesso a um elemento DOM e, em seguida, ler o que está incluído
dentro desses elementos Dom e assim por diante que lhe permitirá realizar os testes.
Agora, antes de prosseguirmos para o exercício,
Eu quero que você esteja ciente de algumas dessas coisas para que quando as encontrarmos em
o exercício em si, você verá por que estou fazendo uso de cada uma dessas peças diferentes.