Resumo da Transcrição

Olá pessoal, nós acabamos de fazer os testes unitais com componentes checkbox que representam a opção individual aqui dessa lista de frutas no nosso exemplo. Mas a própria lista é outro componente chamado checkbox list, você se lembra? Então, a gente testou somente o checkbox que é uma opção individual, a banana, maçã, morango. Mas agora nos resta testar a própria lista toda. Esse componente aqui é o chamado checkbox list. Eu vou poder ilustrar isso, você visualizar melhor. Eu vou abrir aqui o react dev tools. É uma extensão do Chrome, se você quiser instalar, chamado react dev tools. Ele quando instalado você tem essa aba do react. Aí eu posso visualizar aqui o app, vamos lá e você vê aqui o checkbox list, esse componente aqui. Esse que a gente vai testar agora. Nas aulas passadas nós tínhamos testado o checkbox, cada um desses caras é um checkbox, mas eles estão dentro de uma checkbox list. Esse que a gente vai testar agora. Então, vamos lá. Aqui é o ícone do react developer tools se você estiver interessado. Então, vamos continuar. Vou aqui no editor de testes, na parte do nosso projeto, componentes controlados, passada src. Temos aqui components, barra como, barra checkbox list. Esse componente checkbox list, se a gente for lá no método que no retorno do template da visão a gente tem aquele texto como título e as escolhas. Olha aqui, esse frutas que eu gosto é esse props.level e o checkboxes é cada escolha. Esse checkboxes vem lá desse operação de mapa aqui nas options, essa props.options. Se a gente for no componente acima, nesse caso é o formulário que inclui o checkbox list, ele passa com options, frutas options e por si mesmo vem lá o arquivo de constantes que a gente escreveu. Em porte aqui, deixa eu dar um wrap, softwrap aqui, ponto constants que está aqui index e essa lista aqui de objetos que tem o id label e o value, certo? Label é o que aparece na tela, value é o valor que está realmente sendo armazenado. Então voltando aqui no checkbox list. Nós vamos criar testes para verificar o seguinte. Primeiro vamos verificar se a checkbox list realmente está renderizando checkboxes. Se o número de opções foram 3, nesse caso aqui banana, maçã e morango, a gente tem que verificar se vai renderizar 3 checkboxes. Esse é o teste. Outro teste é verificar se cada checkbox está recebendo as props corretamente. Key name, label, value, change checked, certo? E depois que a gente testar isso, a gente também pode testar esse label aqui, esse frutas que gosta. Pode testar a inclusão desse spam com um texto que vem das prop... pronto, label. Certo? Então é isso que a gente vai fazer. Então até a próxima aula, onde a gente vai começar a escrever esses testes. Até mais.