Oi pessoal, nessa aula nós vamos começar a escrever testes para o componente radio. Eu estou aqui no navegador só para você lembrar do nosso aplicativo novamente e vou usar o react developer tools, essa extensão do Chrome que eu já falei antes, para poder abrir essa sábado aqui no console, abre essa sábado react para você visualizar os componentes aqui. Formulário, input text, checkbox list, nós já escrevemos os testes. Pro input text, pro checkbox list e pro checkbox. Agora é hora de começar a trabalhar na lista de rádios. Vamos começar com o componente radio, esse aqui. Vamos criar testes unitais para esse cara. Isso é? Então vai ser quase a mesma coisa do que a gente fez antes pro checkbox. Então por causa disso eu vou ir mais rápido no nosso desenvolvimento aqui. Eu não vou devagar como antes, porque a gente já fez várias coisas anteriormente. Certo? Então para começar eu vou aqui no editor de texto. O componente que a gente vai testar e eu vou putar no lado direito da tela. É o radio.js que está dentro da pasta coma, está dentro da pasta components, que está dentro da pasta src. Está aqui do lado direito. Então vamos criar o arquivo de teste. Vamos lá aqui sse, barates, components common, vamos criar um novo arquivo. Chamar de radio.test.js Vou mudar para o lado esquerdo. E vamos começar aquela mesma coisa, vou bem rápido agora em port react. Vamos react porque a gente precisa de jsx. Vamos importar o shallow do enzyme para poder montar o componente e gerar aquele enzyme wrapper. Vamos criar um bloco de describe, descrevendo para organizar esses testes. E aí vamos ter vários testes dentro aqui, mas também tem que ter aquele methodo before-each. A gente poder fazer o setup, a configuração para poder criar um enzyme wrapper antes de rodar cada teste. Para não poder ter que repetir o código várias vezes. Então aqui que a gente vai chamar o shallow com o componente radio. Esse cara vai retornar o enzyme wrapper, que a gente vai botar dentro de uma variável que eu vou chamar component. Essa variável para poder ser acessível nos outros testes, eu vou definir no bloco de describe. Está fora do before-each, vou usar o let porque a gente redefine a variável component antes de cada teste. Before-each. Certo? Nós montamos o componente radio usando shallow do enzyme, mas o radio leva alguns props, quando você vê aqui tem vários props que são usados, deixa eu dar o softwrap. Esses caras estão vindo a props, então a gente vai criar props falsos. Vamos criar uma variável chamada props e vai armazenar as nossas props falsos. Essa props a gente vai passar para o radio, como propriedades. Então vamos copiar todas as propriedades dessa variável chamada props, como propriedades que serão injetadas no componente radio. Com isso vamos começar. A primeira propriedade que a gente vai precisar é o name, vamos ver que está extraindo as propriedades do props, vamos definir o name falso. O que a gente usou na nossa implementação? Vamos dar uma olhada no radio list. No lado direito da tela vou olhar no radio list, no outro JS, só para ver, ter uma ideia o que a gente tinha usado. A gente gerou uma lista de componentes radio do props.options que veio do formulário. Então vamos lá, vamos mudar para o componente formulário. E vou aqui embaixo no método render do formulário, onde a gente está usando um radio list. O radio list passa as options que é o chamado general options, mas essa variável aqui foi importada. Se você vai lá em cima, o general options foi importado da onde? Daquele arquivo de constantes que a gente fez que está no diretor acima, barra constants. Deixou aqui no lado esquerdo, deixa eu verificar, está aqui barra constants, barra index, frutas options, tem um general options. Esse cara aqui é, as opções são fornecidas ao radio list pelo formulário e o radio list por si mesmo fornece a cada radio uma opção individual. As opções, simplesmente o objeto tem o id, label e value. Agora, voltando aqui no formulário, qual era o nome do radio list? General. Se você escrever o seu teste, não importa qual nome você botar aqui, pode ser qualquer coisa, mas eu vou só botar aqui só para a mesma coisa, só para ficar. Depois do name, vamos botar aqui no lado direito para o componente radio. A gente já adicionou a propriedade e faça por nome, name, agora o value, o value é o que? Vamos botar lá no radio list, o value vem do option.value, vamos voltar para o formulário. Passos general options, está dando o cara aqui no arquivo de constantes, aqui no lado esquerdo, deixa eu botar do lado direito. Esse arquivo de constantes é o value masculino, feminino ou qualquer outra coisa, então pode pôr qualquer coisa aqui. Vamos botar assim, masculino. Só para refletir a mesma coisa lá, mas não precisa ser a mesma coisa porque são dados falsos. Voltando aqui no radio.js do lado direito, vamos fazer o value, já fizemos, vamos fazer o checked, check é o que? Check tem um valor true ou false, só para verificar, vamos lá no radio list, o checked vem do que? Se eu olhar aqui, é uma comparação que retorna o valor booleano, true ou false. Nem precisa fazer nenhuma comparação só botar true ou false se você escolhe um, sei lá, o tá false. Pronto, agora vai o on change, o on change é só um método, se você se lembra, vamos lá de novo, radio list, on change é props, do on change que é passado ao radio list pelo formulário. O on change aqui do, o radio list, on change é desse ponto onde o on change que é um método foi definido aqui no próprio componente do formulário. A gente não precisa definir nada nos dados falsos, é só passar uma função ou um mock. Eu gosto de passar um mock usando o jazz.fn, você chama esse método e ele retorna a função de mock do gesture. Voltando aqui no lado direito no radio, só para terminar, a gente fez, vamos conferir, fez o name, fez o value checked e on change. A gente esqueceu de alguma coisa, vamos ver, name, value checked, on change, esqueceu do label. Esse label aqui tá sendo usado do lado direito do input, então vamos adicionar um label. Esse label vai ser o que? É aquele, aquele label que fica do lado direito do radio, né? Esse cara nesse caso masculino, feminino, esse pudiante, esse que o cara chamado label, esse em, que tá em vermelho, esse texto em vermelho. Então vamos lá, label pode ser qualquer coisa, vou botar masculino assim, certo? Certo, com isso, salvar, nós terminamos de criar as propriedades falsas que disserão passadas ao radio.