[MÚSICA]
A fragrância de jasmim de todas aquelas guirlandas de flores
na rua do templo flutuando pelo ar.
Que sentimento de assentamento.
Deve ser o bom karma da minha vida passada.
Desculpe, onde eu estava?
Eu estava falando com você sobre testes angulares, certo?
E vamos usar o ajuste do karma para fazer nossos testes angulares.
Então vamos continuar com isso.
Uma coisa boa sobre o uso do Angular CLI é que ele configura todos os andaimes para
você para incluir automaticamente o suporte para
testar seu aplicativo Angular.
Então você notará que sempre que você gerar um componente ou
um serviço junto com os arquivos ts do componente,
você também notará um arquivo chamado component.spect.ts
já incluído em suas pastas do projeto.
E também, se você for para o arquivo package.json,
você verá que já existe suporte para o teste Angular incluído lá.
Então, se você entrar nas dependências dev você verá que o núcleo de jasmim,
o repórter de especificação de jasmim, o karma e
karma relacionados módulos npm já estão instalados dentro de sua aplicação angular
que é andaime fora pela Angular CLI.
Então, nós temos todas as coisas e lugar para
nós para apenas começar com o nosso teste para a nossa aplicação angular.
Então, se você olhar ao redor você verá que há
um arquivo chamado test.ts em sua pasta de origem,
então vamos abrir o arquivo test.ts.
Você também verá que há outra pasta aqui chamada para e2e.
Voltaremos a isso no próximo exercício.
Mas na pasta test.ts, você verá que aqui é onde
seu suporte para karma está sendo configurado aqui.
Então, indo para este arquivo test.ts, por padrão,
quando você usar o suporte CLS angular para teste,
ele vai executar os testes para todos os componentes e serviços
que estão incluídos em sua aplicação angular.
Agora, eu vou ilustrar para vocês como fazer testes para
um componente específico, o MenuComponent.
Então eu quero me restringir a usar apenas o componente de menu arquivo.spec e
fazer o teste apenas para o componente de menu.
Então, vá para o arquivo test.ts.
Uma maneira que podemos configurar o teste de CLIs angulares para executar o teste apenas para
um componente específico é ir para esta linha aqui,
que diz contexto const e, em seguida, mudar isso para o menu,
você pode ver /menu\ .component e spec.ts arquivo.
Anteriormente era apenas/\ .spec.ts arquivo, o que significava que você
executará todos os arquivos de especificação que estão lá na pasta de código-fonte do projeto.
Então, agora, especificando isso aqui,
Estou interessado em executar o teste apenas para o arquivo de especificação do componente de menu aqui.
Agora isso eu descobri pesquisando ao redor na pilha
estouro onde eu encontrei alguém me dando a resposta para isso,
apontando para algum recurso na Angular CLI, e então
foi assim que eu descobri que esta é a maneira de restringir
o teste para um arquivo de teste de um componente específico.
Então, depois de fazer uma alteração no arquivo test.ts, vamos salvar a alteração.
Agora, vamos tentar executar nosso teste no componente de menu.
Então, como você vê, no componente de menu, já temos o arquivo de componente
do menu .spec.ts, que contém algum código já.
Vamos tentar executar este teste e ver o que acontece.
Indo para o terminal, adicione o prompt, digite ng test, e este
resultará em um Angular CLI iniciando o teste para o componente de menu.
Então, quando você digita isso e aperta o Return,
então Angular CLI começará a compilar sua aplicação angular.
Ele também abrirá uma janela do navegador, no meu caso, abrirá uma janela do navegador Chrome
e usará essa janela do navegador para executar o teste.
E você vê que na parte de trás, você tem a janela do navegador Chrome rodando e
está toda cheia de vermelho e um monte de palavras lá.
A mesma informação também será impressa na janela do seu console,
e a partir disso eu posso ver que meu teste não foi executado corretamente.
Há algo que não está configurado corretamente no meu arquivo de teste, então eu vou precisar ir e
editar meu arquivo de teste para incluir o suporte apropriado para executar este teste corretamente.
Então vamos para o arquivo spec.ts componente menu e
, em seguida, preparar nosso teste de acordo.
Agora podemos deixar o teste ng em execução aqui.
Sempre que você fizer alterações no arquivo mini component.ts ou
no arquivo mini component.spec.ts e
salvar as alterações, esse teste será executado automaticamente nesse ponto.
Então, vamos para o arquivo MenuComponent.spect.ts.
Indo para o arquivo MenuComponent.spect.ts,
entendemos que o arquivo spect usa a sintaxe Jasmine para descrever o teste.
Então você já notou que há algo aqui
que começa com descrever e então há uma função definida lá.
Então isso é o que eu estava me referindo quando eu falei sobre a sintaxe Jasmine anteriormente.
E também se você rolar para baixo você verá um ou mais lá dentro.
Além disso, você verá algo chamado BeforeEach, aqui.
Vamos examinar este arquivo um pouco mais detalhadamente para entender como esse arquivo
está configurado e como esse teste é configurado neste arquivo específico.
Assim, dentro deste arquivo de teste, você vai notar que
estamos importando aqui um conjunto de classes de teste de núcleo angular.
Portanto, este módulo permite que você forneça o suporte de teste para
sua aplicação angular, e permite que você projete o teste para seu componente.
Então você vê que estou importando assíncrono e
ComponentFixture e TestBed desta biblioteca de testes.
Eu vou chamá-lo de biblioteca de testes.
Além disso, você vê que o MenuComponent também é importado aqui.
Agora, uma vez que entendemos esses dois,
vamos descer o código para entender o que estamos tentando fazer aqui.
Então, aqui, como você espera, esta descrição aqui é
especificando que esta função particular está descrevendo,
Um teste baseado em Jasmine que estamos especificando para nossa aplicação Angular.
Então, quando você olhar para a descrição aqui,
você verá que isso inclui todo esse código aqui.
Então, isso é parte de um único conjunto de testes que estamos executando são o nosso componente de menu
.
Então, dentro da descrição, você verá que há uma string aqui.
Especifica este conjunto específico de testes que você está executando aqui.
Então, ele diz no componente de menu.
Então aqui você pode especificar qualquer string que você quiser.
Você pode usar isso como uma descrição para
especificar o que este conjunto específico de testes está fazendo.
Então aqui, eu vou ficar com uma coisa antes.
Estamos tentando testar o componente de menu.
E depois disso, você vê que estamos especificando uma função addo aqui.
Dentro desta função addo, vamos construir o teste.
Para o nosso menuComponent aqui.
Então, depois disso, você verá que estamos declarando uma variável chamada componente,
que é do tipo menuComponent.
De vez em quando, também estamos declarando uma variável de fixture,
que é do tipo ComponentFixture.
Que é do tipo MenuComponent.
Agora, por que isso é interessante?
Agora, dentro da nossa aplicação Angular,
temos o MenuComponent que já projetamos.
Então, neste arquivo de teste,
vamos criar esse menuComponent usando o testBed angular,
e então vamos realizar os testes no menuComponent.
Então vamos isolar o MenuComponent, e
então realizar testes unitários nesse componente específico.
Agora, este é o lugar onde os utilitários de teste angular
que vêm com suporte usando TestBed.
O TestBed permite-me configurar o ambiente dentro do qual
posso testar meu componente angular.
Então aqui, você vê que estamos dizendo TestBed e
, em seguida, chamando o método configure test module da classe TestBed aqui.
E dentro deste módulo configure testing,
você pode declarar um monte de coisas, e você vai me ver adicionando mais aqui.
Isso age exatamente como a configuração do módulo NG
que você faz para o nosso módulo at lá.
Assim, todas as informações necessárias para
configurar o MenuComponent serão declaradas aqui.
Então, a parte do modelo NG que você viu no módulo do aplicativo,
tipo semelhante de sintaxe pode ser usado aqui para declarar o suporte para
testar o menuComponent aqui.
E também depois disso, você verá esta função chamada para compileComponents.
Então este método irá compilar o MenuComponent e
torná-lo pronto para fazer o teste.
Note também, que esta coisa toda, esta função aqui,
está dentro de algo chamado assíncrono aqui.
Agora, por que precisamos desse assíncrono?
Agora, porque a preparação dos componentes usando este método
CompileComponents leva algum tempo.
E até que isso seja concluído, não podemos prosseguir com os testes.
Então, usando o módulo assíncrono, estamos essencialmente especificando que
eu vou esperar que toda essa coisa para completar antes de prosseguir.
Assim, o módulo assíncrono como você vê,
envolve uma função de teste dentro de uma zona de teste assíncrona.
Então, o que isso significa é que este teste completará automaticamente
quando todas as chamadas assíncronas dentro desta zona forem feitas.
Então isso é o que o uso do assíncrono que temos aqui, faz.
Então o que isso significa é que você pode usar essa função de sincronização,
quer no antes de cada um ou no ele também, então dentro dele, nossa declaração.
Então, quando você vê dentro do ele também, você verá que você pode usar o assíncrono.
Então, no caso de você ter alguma operação aqui que feito de forma assíncrona.
Então você precisa esperar que essas operações sejam concluídas para que o teste seja concluído.
Assim, por exemplo, se você estiver chamando um serviço e esperar por
o serviço para retornar o valor então.
Tudo o que precisa ser concluído antes que você possa prosseguir.
Então, esses são habilitados usando este assíncrono, para cercar esta função aqui.
Agora, além disso, o segundo antesEach, agora nós separamos
isso em dois separados antesEach aqui, porque queremos que isso seja concluído.
E este CompileComponents vai levar uma certa quantidade de tempo,
especialmente se seu componente estiver usando um modelo externo,
como fazemos em nosso menuComponent.
Então, requer algum tempo para que o modelo externo se prepare para
meu teste para prosseguir.
Então, precisamos esperar que essa coisa toda termine.
Então é por isso que depois que isso está completo,
então vamos chegar à segunda parte onde estamos indo para
obter algumas referências a alguns valores do leito de teste.
Agora, o que é essa função antesEach que você está fazendo aqui?
O que o BeforeEach significa é que o que quer que você declare aqui dentro,
essa função será executada antesEach teste,
que você vai especificar mais tarde em usá-la.
Então, usando este BeforeEach, você pode configurar a configuração
inicial para o seu teste para prosseguir.
Então, o que significa que aqui, estamos configurando nosso TestBed,
preparando nosso componente de menu e, em seguida, configurando algumas coisas para
nosso componente de menu, antes de prosseguir para realizar o teste.
Então, para cada um dos testes que você vai especificar usando um aqui,
estes antes de cada o que você especificar neste antes de cada,
será executado antes do teste ser conduzido.
Então aqui, como você pode ver, estou preparando o TestBed.
Então, depois, eu estou recebendo acesso ao dispositivo.
Então eu estou usando o TestBed, estou dizendo CreateComponent e MenuComponent.
Então isso vai me retornar uma referência para o MenuComponent que
estou criando dentro do meu script de teste aqui e
então obter uma referência para isso, porque eu vou precisar de uma referência para
que a fim de fazer algumas manipulações nesse componente lá.
Além disso, a partir do fixture, estou recebendo um acesso à instância do componente
que está sendo criada pelo meu componente fixture aqui.
Então, como você pode ver, o componente fixture do tipo MenuComponent e
, em seguida, chamando o ComponentInstance, dá-me acesso a esse componente de menu específico
que criei dentro do TestBed para realizar os testes de unidade.
Agora, depois disso chamamos isso de DetectChanges.
Agora, o que isso significa é que isso irá prosseguir somente após todas as alterações
serem concluídas, e então reconhecer que as alterações foram concluídas.
Então isso acionará um ciclo de detecção de alterações para este componente.
Então o que isso significa é que isso irá garantir que você tenha feito quaisquer alterações
mais cedo, todas as alterações são detectadas e
tudo está estabilizado antes que você possa prosseguir com seu teste.
Agora, depois disso, vamos usar o nosso para configurar o nosso primeiro teste aqui.
Qual é o primeiro teste que estamos fazendo aqui?
O primeiro teste,
o que vamos testar é certificar-se de que o componente foi criado.
Então, dentro deste aqui, eu estou usando a sintaxe Jasmin e eu estou dizendo isso.
E então aqui você pode dar uma descrição na forma de uma string
para especificar o que este teste está realmente testando.
Então, o que estamos dizendo é,
estamos testando para ver se o componente foi criado ou não.
Então, para fazer isso, eu estou dizendo que ele deve criar o significado que,
esta configuração aqui deve ter criado o componente corretamente.
Então é por isso que aqui dentro, eu estou usando este método chamado expect.
Então o método de espera aqui tem um valor aqui, e
então você pode testar para ver se esse valor satisfaz alguma coisa.
Então aqui estamos dizendo toBeTruthy, o que significa que este valor específico deve ser verdadeiro.
Isso é o que é especificado por este método chamado aqui ToBeTruthy.
Você também pode dizer toBefalsy, o que significa que deve ser avaliado como falso.
Mas neste caso,
estamos testando para garantir que o componente foi criado corretamente.
Então é por isso que estamos dizendo esperar para ser Truthy aqui.
Então este é um teste simples que estamos fazendo para garantir que nosso componente
está sendo criado corretamente.
Mas como percebemos quando eu executar este teste, ele não está funcionando corretamente.
Vamos rapidamente olhar e ver qual é o problema dentro
nossa criação de componentes na janela do console lá.
Voltando para a janela do console, deixe-me apenas navegar para trás e
ver onde está o problema.
E estou começando a notar que isso está especificando que não parece
estar reconhecendo algumas das coisas que meu componente está usando.
Em particular, ele está dizendo que o MDSpinach
é algo que ele não reconhece,
o MDGetGridList e algumas outras coisas.
Isso imediatamente me sugere que eu preciso fazer mais algumas configurações
dentro do meu arquivo de teste antes que meu teste possa ser executado corretamente.
Então, vamos voltar ao nosso arquivo de especificações e fazer algumas alterações nele.
Voltando ao nosso arquivo de especificações,
da nossa lembrança de como criamos o modelo.
Sabemos que dentro do modelo tínhamos um link de roteador no template
do MenuComponent.
Então eu preciso de suporte para roteamento para reconhecer o link do roteador
que usamos no arquivo MenuComponent.html.
Então este é o lugar onde eu vou importar
outro suporte de teste fornecido
chamado como RouterTestingModule,
que está disponível a partir Angular/Router/biblioteca de testes aqui.
Então, este módulo de teste de roteador me permitirá
configurar alguns aspectos sobre o meu roteador.
Veremos que a maneira como usamos isso é um pouco diferente do módulo de roteador
que usamos em nossa aplicação.
Então, vamos importar o módulo de teste de roteamento, também você nota
que estamos usando algumas animações, e
também usando o componente de material Angular dentro do nosso modelo.
Então eu preciso importar
o BrowserAnimationsModule para o meu arquivo de teste.
Então isso vem do angular/plataforma/navegador.
Agora você vai notar que precisamos fazer isso explicitamente aqui simplesmente porque,
no aplicativo Angular real tudo isso estava no módulo do aplicativo,
e assim que estava disponível para os componentes.
Agora estamos testando esse componente, o MenuComponent isoladamente, então
é por isso que ele não sabe sobre todas essas coisas então
precisamos especificar explicitamente todas essas coisas aqui.
Então eu vou importar isso da animação do navegador da plataforma IM aqui.
Então animações angular.platform.browser importando as animações do navegador
módulo aqui.
Deixe-me incluir o módulo de camada flexível, então
incluirei FlexLayout Angular.
Então, estes são necessários porque eu preciso deles no modelo,
Eu também vou importar esse prato de,
compartilhado/prato porque como você verá mais tarde,
Eu preciso configurar, A,
DishService porque meu menuComponent
depende do DishService então
eu preciso que também no lugar.
Embora você vai ver que eu vou parar isso.
Vou explicar isso em pouco tempo, e também preciso importar mais algumas coisas.
Eu importarei pratos de,
você se lembra que usamos essa constante chamada DATES
que exportamos do arquivo compartilhado/dishes.ts.
Vou precisar disso para configurar mais algumas coisas.
Também vou importar o BaseURL.
Que eu declarei no arquivo, compartilhado/base
url.
E também, Eu preciso importar
o Observável de,
rxjs, barra, Porque eu
também estará usando Observable um pouco mais tarde, quando eu configurar algumas coisas.
Então, agora, eu importei todas essas coisas.
Entrando na configuração TestBed, você vê que esta parte
é exatamente como o decorador do módulo do motor que temos no módulo do aplicativo.
Então este é o lugar onde eu também posso usar as importações apenas
como eu fiz com o módulo do motor.
E dentro das importações, eu vou importar o módulo BrowserAnimation
porque isso é algo que eu preciso, e
então também importar módulo FlexLayout.
E também o RouterTestingModule porque
eu precisaria do RouterTestingModule para configurar algumas coisas.
Agora, quando você usa o RouterTestingModule, você precisa usar esse método
calledWithRoutes em vez de usar ForRoot como usamos com o módulo roteador aqui.
Assim, dentro deste WithRoutes você pode especificar algumas rotas
padrão que você precisa para sua aplicação específica aqui.
Eu só vou configurar apenas um único caminho aqui,
e isso é bom o suficiente para mim para testar este módulo aqui.
Então eu só vou dizer caminho: 'menu',
e componente: menuComponent.
Como os modelos de MenuComponent estão usando determinados componentes de material,
vamos ir em frente e importá-los.
Então, vamos importar o MatgridListModule
de @angular /material/grid-list e
também o MatProgressSpinnerModule de
@angular /material/progress-spinner.
E uma vez que os importamos, então vamos em frente e
incluí-los nas importações abaixo.
Então vamos adicionar o MatgridListModule e o MatProgressSpinnerModule.
E isso é tudo o que eu preciso para
essas importações em particular para ser configurado aqui.
Assim, juntamente com as importações, temos as declarações onde eu tenho
o menuComponent sendo usado aqui, eu também posso configurar os provedores aqui.
Então eu preciso configurar os provedores aqui.
Agora é aqui que estamos indo
para criar alguns stubs aqui, então
eu vou dizer fornecer: DishService.
Agora, o DishService que vamos usar aqui não vai ser o verdadeiro
DishService.
Quando você está testando um componente, você não deseja usar um serviço real.
Em vez disso, você corre o risco de eliminar o serviço, e
em seguida, usar um stub DishService, que eu vou chamar como DishServiceStub.
Então vou dizer, UseValue: DisishServiceStub.
Então esta seria uma função stub que eu usarei na ordem
para marcar o DishService aqui.
Então esse é um que eu vou fazer uso.
E também o segundo que eu estou
indo fazer uso é BaseURL,
que eu vou usar o valor como o BaseURL
que já importamos anteriormente.
Então, agora, com isso, eu realmente configurei meu módulo de teste,
então observe que a maneira que especificamos isso é exatamente como a maneira
especificamos o decorador do módulo NG para o nosso módulo de aplicativo.
E aqui, estamos apenas configurando aqueles que são exigidos pelo MenuComponent, então
Eu não tenho os outros que usamos no próprio módulo do aplicativo.
Então é assim que vamos configurar o módulo de teste.
Agora, a única coisa que falta é este DishServiceStub.
Então o que eu vou fazer é
implementar uma função aqui e
chamar que deixe DishServiceStub
ser um simples objeto JavaScript aqui,
que eu vou deixá-lo agir em
lugar do serviço real.
Nós podemos stub fora serviços como este como visto aqui.
Então aqui dentro, eu estou indo apenas para
fornecer uma função simples,
a função GetDish aqui,
que vai retornar Observável do tipo de matriz Dish.
Então é exatamente assim que o valor de retorno foi configurado lá.
E eu vou devolver
um observável de pratos aqui.
Então, usando esta função stub aqui,
o que eu estou fazendo é eu estou estupindo o DishService, e
então configurando-o com este método que eu preciso para
meu cache, dizendo getDishDishService, e quando esse método é chamado,
eu vou apenas retornar esse valor.
A constante de pratos, aqui.
Então, desta forma, agora você pode ver que como eu estou controlando o que está sendo
fornecido para o componente a partir de um stub DishService que eu acabei de criar aqui.
Então é assim que você criará stubs para o seu DishService.
A outra abordagem que podemos usar para
casos em que estamos usando serviços é chamado como usando o espião.
Jasmine suporta algo chamado Spy, que nos permite espionar chamadas de função,
e, em seguida, capturar as chamadas de função e, em seguida, responder a essas chamadas de função.
Então essa é outra maneira de usar um serviço falso no lugar do serviço real.
Então, agora somos capazes de controlar o que está sendo fornecido ao nosso componente de menu.
Então, após essas modificações, então estamos
indo para ir para baixo em nosso antes de cada método aqui.
Após o assíncrono, o que eu vou fazer
é eu vou obter o DishService.
Então você vê que eu estou usando o leito de teste e, em seguida, usando o método get
do leito de teste para obter ahold do DishService que foi criado aqui,
a partir deste stub particular que declaramos aqui nos provedores.
Então isso me dá uma referência ao DishService para
que eu posso chamar os métodos do DishService onde eu precisar aqui.
Então, depois de fazer essas alterações, vamos salvar as alterações e
em seguida, ver como nosso Angular CLI irá executar este teste após essas alterações,
e se nosso teste será bem-sucedido neste ponto ou não.
Então vamos salvar as alterações.
No momento em que você salvar as alterações, você notará que seu teste NG
começará a executar novamente nosso teste.
Então ele irá compilar o aplicativo e, em seguida, executar novamente o teste.
E voila, nosso teste passou com sucesso depois de
fazer as alterações em nosso arquivo component.spec.ts.
Então, nosso primeiro teste, o que significa que agora somos capazes de criar um componente de menu
do nosso arquivo component.spec.ts lá.
Portanto, nossa configuração de teste está funcionando corretamente.
Agora eu posso entrar e fazer testes mais intensos dentro do meu componente de teste.
Voltando para esse arquivo component.spec do menu, deixe-me adicionar outro teste.
Agora você vê que porque eu agora tenho um serviço estabelecido aqui
que está devolvendo este valor PRASIOS eu posso então agora fazer uso do meu DishService,
para o qual eu tenho a referência aqui.
Inside foi antes de cada, e, em seguida, chamar o método getDistes e
então eu vou ser capaz de obter o valor.
E isso estará disponível dentro do meu componente de menu que acabei de criar.
Então meu menuComponent agora deve ter acesso à constante de pratos que
foi fornecido de volta a ele através desta parada de serviço.
Então agora eu posso testar para ver se a variável de pratos dentro do meu
menuComponent está realmente recebendo os valores corretamente ou não.
Então, entrando, deixe-me criar outro teste aqui.
Então eu vou criar um teste aqui, Com o it,
como você viu anteriormente, assim como o anterior.
Este segundo teste eu vou chamar isso como ele e
pratos, Itens devem ser 4,
porque os pratos constantes que declaramos em
o arquivo compartilhado.pratos tem quatro pratos na constante lá.
Então, quando minha variável de pratos dentro do meu menuComponent ou
ts arquivo é inicializado chamando o dishservice.
Devia ter recebido os quatro pratos e
foi inicializado com os quatro pratos.
Então eu vou realizar alguns testes em que pratos variável lá.
Então, como faço para obter acesso à variável pratos aqui?
Então eu diria que pratos itens devem ser 4, e
então eu vou declarar uma função de seta aqui.
E dentro desta função de seta eu vou especificar
os vários testes que eu vou realizar.
Então aqui eu vou agora dizer esperar (componente.,
e observe que ele automaticamente me dá acesso
a esta propriedade de pratos do menuComponent.
Então eu posso dizer que component.pratos, e então eu posso testar
para ver que o comprimento de que pratos matriz objeto JavaScript deve ser.
Então é aqui que eu uso o método ToBe da Jasmine aqui.
E então eu posso especificar o valor 4,
porque eu estava fornecendo 4 pratos em meus pratos constante
que eu declarei no arquivo shared.pratos lá.
Então esse é o primeiro teste que eu vou realizar,
isso deve se tornar verdade.
Caso contrário, a configuração não funcionou corretamente, então
Eu sei que meu código não está funcionando corretamente.
Mas eu sei com certeza que este teste deve funcionar corretamente.
Se você quiser ter certeza,
vamos salvar as alterações e, em seguida, ir e ver o nosso teste em execução.
Indo para aquele terminal,
você vê que agora meu aplicativo está sendo recompilado e o teste é executado.
E observe todos os verdes na janela do terminal.
Ele diz executado 1 de 2 sucesso, executado 2 de 2 sucesso.
O que significa que ambos os meus testes foram executados com sucesso.
Se eu olhar para o meu navegador, para que você veja que o MenuComponent,
ambos os testes são bem-sucedidos.
Deixe-me criar mais alguns e
adicioná-los a esse conjunto de segundo grupo de testes que estou criando lá.
Indo para o arquivo menu_component_spec.ts, adicionarei mais um.
Eu vou dizer esperar componente.,
e eu vou dizer pratos [1].
Lembre-se que o nome do primeiro prato era,
Então é isso que eu vou testar, os pratos [1] .name.
Então é assim que eu posso testar para ver se ele está recebendo os valores corretamente.
Quais são todas as maneiras que posso testar?
Se eu colocar um ponto lá, ele vai me dar uma sugestão de todas as possibilidades aqui.
Então eu vou dizer, Eu também vou usar novamente o método ToBe aqui.
E então o segundo nome do prato é,
Só que lá, então esse é o segundo lançador que eu vou levar a cabo.
Então, se meu código foi executado corretamente, então isso também deve passar.
Da mesma forma, deixe-me colocar em mais um aqui.
Então eu vou dizer esperar,
component.Pratos e eu vou dizer 3.
E aqui, a propriedade
em destaque deve ser Falsy.
Que você deve ser falso, não é verdade neste caso, então deixe-me adicionar mais um.
Você pode começar a adicionar mais se quiser,
brincar com ele até ficar satisfeito.
Assim como essas adições. Deixe-me salvar as alterações que fiz
aqui, vamos ver se este teste é executado corretamente.
E voltando ao meu terminal, você vê que meu teste está rodando novamente.
Você vê que ambos os testes foram bem sucedidos,
agora eu vou fazer uma dessas coisas falhar.
Então eu vou entrar e mudar isso para verdadeiro.
Veja, essa é a diversão de brincar com código.
Eu vou mudar isso para verdadeiro e eu sei que este teste vai falhar.
Então vamos salvar as alterações.
Olhando para o terminal, lá você vê que o teste falhou.
Você vê todo este vermelho aqui, o que significa que o segundo teste não passou corretamente.
E se você rolar para trás, você veria este teste em particular falhou,
porque em algum lugar lá embaixo ele vai dizer que não aconteceu.
Ok, veja esta declaração aqui diz que falso esperado para ser verdadeiro,
então é por isso que ele falhou.
Então não era suposto ser verdade, mas eu disse que deveria ser verdade, e
obviamente o teste está errado, então é por isso que o teste falhou.
Então é assim que você pode até testar para ver se o teste falha,
se você pediu as coisas erradas também.
Mas novamente, deixe-me voltar e corrigir isso mais uma vez.
Então, voltando para o meu, File Eu vou alterá-los
de volta para falsy, porque eu quero que este teste para executar corretamente.
Agora não estamos satisfeitos ainda.
Agora, neste teste particular eu estou apenas testando os pratos
variável que está dentro do meu menuComponent.
Como faço para brincar com o próprio modelo?
Então é aqui que precisamos de mais ajuda da Angular.
Para realizar alguns testes no modelo, eu vou entrar e
puxar mais algumas importações aqui.
Então, indo para o meu topo deste arquivo, menu_component_spec.tsfile.
Eu vou importar, Um
mais chamado por, que é um método.
Você vai me ver usando isso em pouco tempo.
Isso deve ser importado de, Angular,
/platform-browser.
E também, eu vou importar mais um que é um elemento de depuração.
O elemento de depuração me permite obter acesso ao DOM para
que eu possa realizar testes nos elementos DOM diretamente.
Então é de onde eu vou importar isso, o código Angular aqui, então esses dois.
Então adicione o By e o DebugeLement às importações, e
então, uma vez que você fizer isso, nós entraremos no código aqui.
E então vamos adicionar em mais um teste onde vamos para o DOM e
buscar um dos itens do doc.
Então eu diria isso, então mais um teste aqui,
o que esse teste vai fazer?
Para este teste, vou especificar
o teste como deve usar pratos no modelo.
Eu estou apenas dizendo aleatoriamente algo aqui,
porque eu só quero verificar para ver que a variável pratos,
o que quer que esteja disponibilizando, está sendo usado no modelo corretamente.
Então essa é a parte que eu estou configurando, e
então a segunda parte é a função de seta, e
dentro desta função de seta eu vou fornecer o código para o próximo teste.
Então, dentro desta função de seta o que eu estou
vai fazer é eu vou primeiro chamar fixture e
, em seguida, detectar alterações.
E depois disso eu vou dizer let de:,
É uma DebugeLement.
Através disso eu vou ter acesso ao DOM e
então o elemento seria HTMLElement.
Então eu quero ter acesso a um dos HTMLElements do meu DOM.
Então, qual elemento eu quero?
Então, para fazer isso, eu vou ter acesso ao,
DebugeLement dizendo fixture e DebugeLement.
Então isso me permite obter acesso a itens do meu DOM aqui para DebugeLement.
E então eu posso consultar e, em seguida, escolher apenas aqueles que serão de interesse para mim.
Então eu vou consultar e, em seguida, vou pedir usando o By.
Então, observe onde estou usando o By que eu incluí importando.
So By, o By suporta um monte de métricas pelas quais eu posso
pedir para acessar elementos específicos no DOM.
Então, como você pode ver, ele vai me dizer o que eu posso importar e
então o .css me permite obter acesso
para combinar elementos pelo seletor css dado.
Então, qual é o seletor de css que eu vou usar?
Eu sei que há um elemento h1, elemento html no DOM e
que eu vou ter acesso ao primeiro elemento h1 do DOM.
E um dos elementos h1 lá é aquele que
vai mostrar o nome de cada prato lá.
Olhe para trás e você vê que dentro da linha do tempo da grade usando um h1 e
que h1 contém o nome do prato lá.
Então eu vou pegar isso e
então eu vou obter um elemento e então eu diria de,
do elemento de depuração, e então eu diria NativeElement.
E isso me dá acesso ao elemento especificamente no DOM
que eu estou me referindo e eu selecionei usando esta instrução anteriormente.
Então, quando eu consultar o DOM e, em seguida, dizer, me devolva todos
aqueles que estão usando a tag h1 para o elemento HTML.
E eu tenho acesso a isso, e eu posso consultar e
dizer esperar (el.TextContent).
Então eu estou procurando o conteúdo dentro deste h1 no meu template
conteúdo fixo e, em seguida, eu vou dizer paraContain.
Então este é outro método, toContain, este é um método Jasmine chamado toContain.
Isto verifica se isso contém um valor específico,
e, em seguida, vou verificar se DATES (0) .name.
Então é o primeiro prato foi criado no DOM e adicionado ao DOM?
Se meu modelo funcionar corretamente, então isso deve estar presente no DOM.
Então isso é o que eu vou verificar para ver se o bloco de grade correspondente a
o primeiro DISH foi criado e adicionado ao DOM ou não.
Então eu digo pratos (0) .name, e digo para maiúsculas.
Lembre-se de que eu usei o tubo em maiúsculas para exibir o nome
do DISH, convertendo o nome do prato em
todos os maiúsculas no bloco de grade no componente de menu.
Então é isso que eu vou verificar, ok, então eu estou apenas verificando por
apenas um deles.
Você pode realizar muitos desses testes, você pode verificar por
pratos (1) .name e, em seguida, pratos (2) .name e muito mais se quiser.
Estou apenas ilustrando um exemplo de como você acessaria elementos do DOM e
e verificaria o que eles contêm lá dentro.
Então este é um teste que eu vou realizar aqui, então deixe-me salvar as alterações,
e depois ver se o teste é executado corretamente.
Vá para aquele terminal e quando o teste for executado,
você vê que meu primeiro teste foi bem sucedido, o segundo teste foi bem sucedido,
eo terceiro teste também foi bem sucedido, maravilhoso.
Agora, deixe-me fazer o terceiro teste falhar.
Indo para o arquivo menucomponentspec.ts,
Vou remover isso em maiúsculas e, em seguida, realizar o mesmo teste.
Você verá que este teste falhará, salve as alterações.
E quando o teste for executado, você verá que o terceiro teste falhará.
Porque eu estou fazendo com que ele falhe verificando a coisa errada lá e
lá vai você, o terceiro teste falhou aqui.
Então é assim que você pode verificar se certas coisas que
deveriam estar lá estão corretamente ou não.
Por que esse caso é, então você pode ver aqui, a razão pela qual este teste falhou.
Ele está esperando que isso seja no DOM,
mas em vez disso isso é o que está no DOM no elemento h1 no DOM.
Então essa é a razão pela qual o teste falhou aqui.
Então, novamente voltando deixe-me corrigir o erro e
então, quando eu executar novamente o teste você deve agora ver que o teste passa com sucesso.
Voltando para o terminal, você verá que quando este teste for executado agora, ele será
executado corretamente.
E lá vai você, todos os três testes são passados pela minha aplicação.
Além disso, olhando para o navegador, você pode ver que os três testes
foram executados com sucesso no arquivo de modelo de componentes de menu e
também o próprio componente de menu.
Agora, obviamente, este não é necessariamente o teste mais abrangente, mas
Eu só queria dar-lhe um sabor de como você iria
sobre a construção de testes dentro da sua aplicação Angular.
Se você se empolgar, você pode entrar em todos os arquivos spec.ts que você tem e
então escrever seu próprio teste para cada e
cada um desses componentes usando o conhecimento que você ganhou aqui.
Além disso, você pode ler mais sobre testes na documentação Angular e
em seguida, aprender mais maneiras de realizar testes em seu aplicativo Angular.
Testing é um campo por si só, então se eu precisar ensinar-lhe tudo sobre
testes que virá um curso inteiro em si para Angular.
E neste curso, eu só queria dar-lhe um sabor de como
você vai realizar testes em sua aplicação Angular.
E este é um exemplo de como podemos configurar e
realizar um teste unitário em um dos componentes da nossa aplicação Angular.
Este é um bom momento para você fazer um bom comentário com o teste de componentes de mensagem.
[MÚSICA]