Aula 68
Terminamos de testar o componente Select
Summary
# Resumo da Transcrição
O vídeo aborda a continuação dos testes em componentes `option` dentro de um seletor em JavaScript. Os passos principais podem ser resumidos da seguinte forma:
1. **Introdução aos Testes**:
- Retorno dos testes para cada componente `option`.
- Verificação do valor (`value`) do `option` gerado no `select.js`.
2. **Estrutura Inicial**:
- As opções já estão definidas no bloco `beforeEach`.
- Utilização de um loop para iterar sobre várias opções.
3. **Configuração do Loop**:
- A lista de opções é acessada por `props.options`.
- Uso do método `forEach` para iterar sobre as opções, passando o índice como argumento.
4. **Verificação do Componente**:
- A função `component.find` é utilizada para encontrar cada `option` pela posição (`index`).
- Comparação do `value` do objeto `option` com o valor do componente.
5. **Realização dos Testes**:
- Um teste de verificação é feito para confirmar se os valores estão corretos, com exemplos de saída esperada e dados obtidos.
- O mesmo procedimento é feito para verificar o `label`, usando `children.text`.
6. **Alternativas e Sugestões**:
- Sugestão de uma abordagem alternativa para testar sem loops, utilizando `setProps` para definir os componentes explicitamente.
- Encorajamento para deixar feedback sobre a clareza dos testes.
7. **Conclusão**:
- Revisão das etapas realizadas durante os testes do componente `select`.
- Agradecimentos e convite para a interação nas redes sociais.
O vídeo é uma exploração detalhada dos testes de um componente `select`, abordando como garantir que as opções sejam renderizadas e representadas corretamente.
Video Transcript
Estamos de volta, vamos continuar os testes para cada componente option.
Agora a gente já vai ver aqui para cada opção option, a gente vai ver se o option está
recebendo.
Você note que no lado direito da tela tem o select.js.
O option aqui que é gerado, vamos verificar esse value, certo?
Você tem que verificar se o value tem o mesmo valor da opção aqui.
Vamos lá.
Então aqui no before each já tem definido as opções, né?
Então se você quiser seguir o mesmo, a mesma coisa do outro ali, do teste anterior, pode
fazer também para redefinir as opções, depende de você.
Então expect, vamos falar aqui.
A primeira ditura a gente vai ter que fazer o quê?
Um loop porque tem várias opções, né?
Você note aqui que o option choice vai para cada opção, para cada objeto dentro dessa
lista de options ele vai dar o map.
Significa para cada opção ele vai gerar um componente option.
Então a gente vai dar um loop.
Então vamos loopar aqui partindo da options, essa propriedade options.
Então para poder ter acesso aqui, a gente já fez o let props de fora.
Então eu não vou definir como anteriormente aqui, eu só vou seguir.
Eu não quero escrever o options de novo, então só vou fazer assim props.options.
Esse cara aqui é aquela lista de opções passos que a gente fez lá em cima no before
each e passou para o select.
Então for each, certo?
Então vou botar options, vou botar o segundo argumento index também o index porque eu
vou precisar.
Vamos dar o for each aqui, então a gente vai pegar a component find option.
Mas essa option tem várias.
Então qual que a gente vai escolher?
A gente vai escolher depender do index.
Então esses caras estão em ordem, então vai aparecer em ordem da mesma ordem do da lista
options aqui.
Cada componente option vai ser gerado em ordem na mesma ordem dos objetos que aparece
no props.option.
Props.option se lembra que tem lá em cima, voltando aqui, se você não lembrar, a gente
definiu como a lista de objetos que inclui dados sobre cada país.
Então o id, label e value.
Nesse caso a gente vai se importar com esse value de cada option.
Então vamos retornar aqui.
Então a gente encontra component find option at, a gente usa at para poder localizar um
option específico que tem várias na lista.
Index, então dot.prop value.
Então o que é que esse cara aqui seja o que?
To be.
Então o option está aqui disponível como variável aqui.
Ponto value.
Deu, me está aqui.
Deixa eu quebrar a linha aqui, vou resolver melhor.
Expect a component find options.
No index a value que seja o mesmo da opção ponto value.
Então é meio confuso aqui esse option, esse option aqui, mas esse option aqui se refere
ao objeto option, né?
Um objeto.
Esse option aqui se refere ao próprio componente option aqui, esse cara.
Então não confunda, por favor.
São diferentes.
Então esse option, objeto tem valor value.
Esse valor tem que ser o mesmo dessa prop value do componente option.
Option, o prop value tem que ser esse cara, né?
Certo?
Então vamos salvar, vamos ver se o teste aqui está passando, vamos fazer o teste falar.
Vamos fingir que a gente fez implementação errada e sei lá, ele sonou um 2 aqui no option
value.
Você não acha que já apareceu?
Recebeu br2, mas esperava cbr.
No primeiro objeto, você lembra o primeiro objeto que a gente definiu no before it foi
o Brasil, por isso que já falou na primeira tentativa.
Está tudo ok?
Certo?
Então é isso, para esse teste.
Então vamos continuar para o próximo?
Isso vai ser da mesma maneira, então você pode só verificar o option.label, mas em
vez de verificar a própria, a gente vai verificar o text, o text do children, desse
option.
Então você vai usar o children.text para poder pegar esse cara, capturar e verificar
se realmente ele é igual ao objeto.label aqui.
Então vou esperar você fazer aí, depois a gente vai continuar.
Ele deu tudo certo?
Então vamos continuar, props.options, vamos dar um loop para cada opção com o índice,
nós vamos esperar que o component find, find can option, qual opção?
Vamos usar o índice para poder capturar a opção, corretamente prop, não é prop, desculpa,
é o que?
Vamos pegar o children.text, o texto da criança, esse cara aqui.
Vamos verificar se esse cara, to be, opa eu adicionei um parentes extra aqui, deixa
eu remover, desculpa, remover os parentes etc.
To be ok.
O option, se caso o objeto pronto, label.
Certo?
Vamos verificar o terminal, passou, voltando aqui ao implementação, vamos ver se falha,
se eu adicionar alguma coisa 2 aqui, implementação Brasil 2 recebeu, mas esperar o Brasil, então
está tudo ok.
Certo?
Então a gente terminou a implementação desse teste, se eu quebrar a linha aqui, você
vê melhor.
Certo?
Então terminamos a implementação dos testes, um detalhe aqui, a gente usou lógica de loop
para poder verificar cada um, se você não gosta disso, não achar que é muito claro,
você pode usar a mesma maneira que a gente fez anteriormente, primeiro você define o
component set props a todas as opções, em vez de usar o loop você pode esperar a cada
índice em vez de fazer isso, você pode usar explícito, por exemplo, deixa eu mostrar
aqui, esperar o component option no zero, valor que seja, por exemplo, o catou, desculpa.
DH, dessa maneira aqui, pode fazer explícito, entendeu?
E ver para deixar mais claro anteriormente, então todos os valores são explícitos e
você define as opções aqui usando set props, se quiser deixar mais claro.
Só esse detalhe para quem tiver dúvida, achar que o teste não é muito bom, testar
dessa maneira, certo?
Só esse detalhe, se você já algum comentário, por favor, deixe aí, sobre essa maneira de
testar as coisas.
Então por isso é só a gente terminou de testar o component select, só dar uma revisada em
tudo que a gente fez aqui, a gente testou primeiro se tem um component select e se
o select recebe os props corretamente, depois a gente viu se as opções foram geradas
corretamente com a prop value definida corretamente e com o level incluído corretamente.
Então por isso é só o component select, certo?
Muito obrigado por assistir, se você gostou, por favor, goste, clique like aí, curte o
vídeo, se inscreva se você já não é meu inscrito e se você usa Twitter, estou também
no Twitter como é de bk.hop, vou mostrar aqui, minha página do Twitter, vamos nos conectar.
Até a próxima e tchau, valeu.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: