Resumo da Aula sobre Testes para Componente RadioList

Olá pessoal, na aula passada nós teremos de escrever teste para aquele componente radio, não é? Aqui dentro do nosso formulário, o componente radio que inclui esse botão de rádio com o label no lado direito dele. Agora nos resta a gente testar o componente que contém esses vários botões de rádio. Nesse caso nós temos um componente chamado RadioList. Nós vamos agora escrever teste para esse RadioList. A gente vai checar se cada componente de rádio contido no RadioList foi renderizado de maneira correta, a estitué. Ele foi passado cada componente de rádio, as propriedades aqui, corretamente, se você olhar aqui no lado aqui. De baixo da tela você vê que cada rádio tem certas propriedades. Recebem cada propriedade, tem um label, vales, impudiante. A gente vai verificar se o valor dessas propriedades foi realmente passado corretamente do RadioList para cada rádio. Certo? Então isso que a gente vai fazer. Então vamos começar, vamos lá. Eu vou aqui, vamos abrir o editor de texto. No projeto, esse aqui é o arquivo forumulário.js dentro da pasta Components. Está dentro de src, certo? src, barra Components, barra Formulário, você note que tem esse RadioList que a gente está incluindo. Então vamos lá, vamos dar uma olhada na implementação desse RadioList dentro da pasta Common. Aqui a gente vai lá, RadioList. Essa aqui é a implementação que a gente vai testar. Você note que aqui é um componente funcional sem estado e a gente está retornando o modelo para a visão desse componente que está. Só tem essa variável aqui Rádios, que a gente definiu como uma lista, uma array. A gente deu operação map nas opções que foram passadas como props ao RadioList. Você se lembra voltando aqui ao formulário? A gente passa opções que na verdade nada menos que uma lista de objetos foi definido no arquivo de constants, constants, barra index. Você se lembra aqui a de general options é só uma lista de objetos cujas propriedades são id, label e value. O label é aquilo que aparece na tela, né? A gente já viu quando a gente fez os testes para o Radio. Estou falando aqui ao formulário só para você ver aqui. Então a gente vai voltar lá para a implementação do RadioList. Você note que o RadioList recebe o nome, que é o nome da... A gente vai identificar essa lista, nesse caso Geno, recebe aquelas opções constantes e tem a função onChanged que é definida aqui no formulário e tem o checkOptions que é a opção que realmente está selecionada, né? É uma única opção, única escolha, não é múltipla escolha, múltipla escolha é o checkBoxList. Agora a gente só pode escolher uma das opções, por isso que a gente tem que ver o checkOptions. Certo, vamos voltar lá para a implementação do RadioList, que a gente só vai testar o que está dentro aqui do RadioList. O formulário é outra coisa, é outros testes. Então vamos voltar aqui para o RadioList, tem essa lista de componentes de radio que a gente fez no mapping. A gente vai testar se realmente ele renderizou o número correto de componentes de radio, nesse caso vai ser o número de componentes de radio gerados, será o tamanho da lista de opções. Nesse caso só tem duas opções na nossa implementação, que era o seu note aqui, voltando ao navegador. Tem o masculino e feminino, só tem duas opções, então a length, a propriedade length, que é a largura da lista, o número de elementos da lista, somente é 2, então aqui só vai gerar 2 componentes de radio. Aí depois que a gente checa quantos componentes de radio foram gerados, se foram gerados o número de componentes de radio corretamente, vamos checar as propriedades que foram dados a cada componente de radio, vamos checar o name, label, value, check to you on change, certo? Então a gente vai proceder da mesma maneira anteriormente, a gente já fez isso várias vezes, já começaram a testar os input text, o checkbox, checkbox list, radio, por diante, então a gente já tem uma ideia de como fazer essas coisas. Então vamos um pouquinho mais rápido do que anteriormente, porque a gente já lhe deu essas coisas, então eu te vejo na próxima aula onde a gente vai começar a escrever os testes, tá bom? Então até lá!