Um momento
Aula 62
Cursos / React: Componentes Controlados
Terminamos os testes para o RadioList

Summary

# Resumo do Transcript

Neste vídeo, o apresentador discute a implementação de um componente de botão de rádio com a propriedade `checked`. A propriedade é utilizada para determinar se um botão de rádio deve ser marcado ou não, com base na comparação entre `props.checkedOption` e o valor da opção.

## Principais Pontos:

1. **Propriedade `checked`**:
   - O valor da propriedade `checked` será `true` se a opção for a selecionada, caso contrário, será `false`.
   - Testes são realizados para verificar essa lógica, incluindo a inicialização de `checkedOption` com "feminino".

2. **Estrutura de Testes**:
   - O apresentador sugere a utilização de um loop com `props.options.forEach` para verificar cada opção e seu estado de verificação.
   - Utiliza `expect` para checar se as opções de rádio estão retornando os valores corretos para a propriedade `checked`.

3. **Teste do Evento `onChange`**:
   - O teste da propriedade `onChange` é mencionado como simples, onde se espera que o valor da propriedade corresponda ao que foi passado como `props.onChange`.
   - Um loop é também utilizado para verificar a propriedade `onChange` das opções de rádio.

4. **Finalização dos Testes**:
   - O apresentador conclui que todos os testes necessários para o componente de lista de rádio foram implementados, validando a criação correta de componentes de rádio e a atribuição apropriada de suas propriedades.

5. **Agradecimentos e Redes Sociais**:
   - O vídeo encerra com agradecimentos e um convite para seguir o apresentador nas redes sociais (Twitter e GitHub) com o mesmo usuário.

Espero que esse resumo seja útil! Até a próxima aula.

Video Transcript

Fala pessoal, estamos aqui de volta. Vamos lá e continuar. Vamos agora checar essa propriedade checked que é passada por radio. Vamos dar uma olhada aqui nesse valor aqui dessa propriedade. Você note que ele está checando se o props.checkedOption é igual a o valor dessa opção aqui. Então a gente tem várias opções e se esse cara for a opção que for selecionada, esse valor vai ser o quê? Vai ser true, verdadeiro aqui. Então o outro caso é se esse botão de radio, o check não for igual ao valor dessa opção, nesse caso essa condição vai dar um valor, vai retornar false. Falso, né? Então tem dois casos, tem true e tem um false. Então a gente vai testar esses dois. Então vamos lá, vamos começar aqui, fazer um teste. Opa, desculpa. Deve incluir, opa, deve incluir. Deve incluir a propriedade check, né? Com o valor definido. De acordo com a comparação. De checkedOption com o valor. Cada opção. Algumas coisas. Eu acho que a descrição está muito boa aqui, mas você pode melhorar, certo? Então vamos lá, você que a gente vai aqui, nós vamos, primeiro vamos verificar qual é o propriedade check.Definirmos check option com feminino, inicialmente, então a gente vai ver que o cara vai ser o quê? No primeiro opção, que é o masculino, o value aqui é diferente do check options, por isso vai ser false. Na segunda, o value feminino é igual a propriedade check, por isso vai ser verdadeira. Vamos lá, ver se a gente consegue fazer. Vamos dar um loop do props options for each. Cada options com index. Expecto que? To be a one course. Vamos lá component, find o radio. Add index, qual é a propriedade check? To be o quê? Vai ser o quê? A gente vai ser a mesma comparação na imprenvitação. A gente vai, esse cara vai ser true. Se o value da opção foi igual ao value check option ou vai ser false. Se o value da opção não foi igual. A gente já pode fazer a mesma coisa que também o propriedade check options. O quê? E o igual ao options.pally. Deixa eu expandir aqui para você ver melhor. Vou estar quebrando a linha aqui. O props.checktop agora é o quê? O slamber feminino. O option value primeiro vai ser masculine, então vai ser false. E vai estar correto. E o segundo vai ser true. Vamos lá, test. Tá tudo bem. Vamos fazer ele falhar. Vamos botar aqui, sei lá, a gente implementou errado, a gente pôe. Não é igual. Agora o teste falhou. Certo? Fals, true. Certo? Não funcionou corretamente. Você quiser até fazer outro value check aqui, definindo outro check option, sei lá, para o masculino. Pode até fazer aqui. Vou deixar esse teste bem simples aqui. Você quiser assim. Então é a vontade, certo? Então eu fiz quase a mesma coisa aqui, só checar esses caras. Tá checando automaticamente por true ou false. Você também pode fazer mais explicitamente se você sabe que só tem duas opções aqui nessas opções falsas. Você pode fazer um teste que esse de true ou false, assim, da maneira mais simples. Por exemplo, component find radio at zero, dot prop checked. Aí você faz expect to be to be, o quê? Nesse caso, o primeiro vai ser masculine, então vai ser false. Aí você faz outro no um, vai ser true, certo? Dessa maneira. Mas na maneira que eu fiz aqui já, faz o loop para fazer a mesma coisa de maneira mais curta. Nesse caso aqui, você tem que saber exatamente que só tem dois rádios. É por isso que eu uso o props options nessa maneira. Certo, agora só resta a gente testar o on change. Vamos lá? Test deve incluir prop on change com o valor vindo da prop on change recebida pelo radio list, algo assim. Então esse aqui vai ser o mais simples, né? Muito simples, só ver se realmente o on change é igual, né? Expect to be props.ontonchange. Queria um change que vem como props. Então da mesma maneira de novo, props options reach para cada opção com index. Você vai ir expect component find radio at index, dot prop on change. Expect to be, o quê? To be a props.onchange. Esse props sempre se lembra daquilo que a gente definiu aqui. Se lembra? A gente definiu aquela variável let props que foi definido dentro do before each. Então está se referindo a esse onchange, essa jazz.fm, essa mock, moção de mock que a gente criou. Salvar, vamos ver. Opa, aconteceu. Deixa eu salvar o radio list que eu não tinha salvado. Certo, tudo ok. Deve incluir a prop on change com o valor vindo da prop on change. Correto, vamos ver se esse cara realmente está verificando. Vamos aqui na implementação. Do radio list fazer esse cara falhar o teste vai falhar agora se a gente definiu onchange de maneira errada. Sei lá, eu fiz uma função que retorna no e passei para o change. Ele vai ver já automaticamente, o negócio está errado aqui. Certo, então está tudo ok. Voltando ao radio list, vamos reverter esse cara para implementação correta e é isso, a gente terminou todos os testes para o componente do radio list. Basicamente, essencialmente a gente checa pelo número correto de componentes de rádio que foram gerados e esse cara de componentes de rádio recebeu as propriedades as propriedades que foram passadas ao rádio foram definidas corretamente. Então por isso é só para o radio list e espero que tenha gostado. Então até a próxima aula, certo? Então muito obrigado, me siga nas redes sociais, eu estou indo no Twitter, nbkhpnbkhope, também estou no GitHub com o mesmo usuário, nbkhpnb. Então até a próxima, tchau!
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: