Resumo do Transcript

Então, vamos começar a escrever os testes. O primeiro teste vai ser o seguinte, vamos lá, vamos checar se ele está, o radio list está renderizando o número correto de componentes de rádio. O número de componentes de rádio que será gerado vai ser o mesmo número de elementos das opções, essa lista de opções que foi dada ao componente, que o componente recebe. Então, vamos lá, escrever o teste, aqui estou no arquivo radiolist.test.js, logo após o nosso before-each, nós vamos começar a escrever o teste. Vamos incluir o número correto de componentes rádio de acordo com o número de opções, é alguma coisa assim, deixa eu dar o soft wrap aqui para você ver, para quebra a linha. Desculpe, eu não botei os assentos ali, mas eu não quero mudar de teclado agora, pode voltar. Então, vamos lá continuar aqui, vamos lá, primeiro a gente vai ter que selecionar o componente de rádio que está dentro do radio list. Nossa enzyme wrapper é chamado component, está nessa variável chamado component, vamos lá find radio. Aí vamos checar a length, esse cara vai tornar uma lista de vários nodes enzyme wrapper aqui, vários nodes desse cara, vamos checar se realmente foi número, o que, vai ser, nesse caso vai ser duas opções, mas o expect to be, pode ser dois ou o quê, a gente também pode usar o props.options.length, porque se a gente mudar aqui a adicionar o novo, ele vai automaticamente virar três aqui, entendeu? Então, vou voltar aqui para anterior, certo? Então vamos checar esse props, esse objeto aqui, se lembra, que foi passado radio list, e tem o options, né? Options essa lista de objetos, essa lista tem a propriedade length também. Então essa length de opções tem que ser igual ao número de componentes de rádio. Vamos lá salvar e ver no terminal aqui, senotes radio list component devem incluir o número correto de componentes rádio. Então está passando o teste. Como a gente fez anteriormente, sim o teste está passando, mas ele realmente está checando, verificando. Se o negócio está correto, a implementação, vamos testar, modificando a implementação, vamos fazer algo errado aqui para ver se o cara realmente, se o teste realmente está verificando. Então se rádio aqui vamos dar um, sei lá, um slice aqui, só para pegar o primeiro elemento. Nesse caso vai ter dois, a gente dá o slice 01, ele vai pegar e cortar essa lista e só pegar o primeiro elemento daqui. Você vai notar que a gente espera que o mensagem de erro seja, apareça, esperamos que você tenha que o negócio seja dois, mas apareceu um. Expected value to be 2, mas recebemos um. Então eles só acham um componente de rádio, porque a gente deu o slice e só extraiu lá o primeiro. Então obviamente esse cara está errado, porque a gente forçou o cara a ser errado, então o teste foi escrito corretamente, vamos reverter as nossas mudanças para o teste poder passar. Então está tudo certo, vamos proceder para o próximo teste. Então vamos lá. Próximo teste aqui, vamos checar essa propriedade name. Deve incluir o de acordo com... Deve incluir nome de cada rádio. Cada rádio vai ter o nome de acordo com a própria name que foi recebida pelo radio less. Então todos os componentes vai ter o mesmo nome, né? Então como a gente vai fazer isso? Então vamos fazer dessa maneira aqui, vamos começar. A gente pode selecionar todos os componentes de rádio e ir um por um e verificar a propriedade name de cada um realmente é igual a props.name. Outra maneira que eu gosto de fazer é usando, fazendo esse loop com o props.options, porque eu já sei que aqui no teste eu escrevi as options e tem duas e realmente ele vai selecionar duas. E se eu usasse o component find radio e nesse caso se, sei lá, se esse teste anterior não tivesse sido escrito eu teria como saber se realmente o número de componentes de rádio apareceu corretamente. Então se eu der o component find radio e dar o loop nesse caso ele vai ser incorreto. Por exemplo se você esperava ter dois componentes de rádio mas só aparecer um, se você ainda dar o loop no component find radio ele vai dar uma interação uma vez só, uma vez, né? Naquele componente mas na verdade está errado. Então por isso que às vezes eu não gosto de verificar, de fazer o loop com component find radio da própria implementação eu gosto de usar algo diferente aquele que realmente determina o número de componentes que deve existir. Então vou usar o props.options, certo? For each dessa maneira. Então daqui eu vou definir os argumentos primeiro é sempre a option, o segundo argumento pode ser o índice, né? Index. Então para cada opção eu quero que eu faça. Gente vai expect. Ok vamos lá component find o rádio mas tá onde esse cara? Vamos usar aquele app para poder capturar o componente de rádio corretamente. Então tem duas opções então vai ter componente de rádio at zero e at one, né? Um. Então esse cara vai ser dependente do index aqui. Para a primeira opção vai ser o componente de rádio zero. Então index vai ser zero nesse caso. Então vamos lá continuar. Expect component find radio at index. Esse cara aqui, né? Ponto prop qual é a prop name? A gente espera que esse prop name seja o que? Seu b vai ser só o props.name esse props sendo aquele cara aqui gênero. Certo vamos ver se não deu nenhum problema. Voltando a terminal deve incluir o nome de cada rádio de acordo com prop name. Vamos lá fazer o teste falhar. Bota na implementação do radio. Pode sonar alguma coisa errada para o name. Ah esperamos gênero mas resta o gênero não sei o que. A gente adicionou. Então o teste realmente tá verificando. A implementação está correta. Certo? Então é isso para o nome do cara. Deixa eu quebrar uma linha para você ver melhor. Vamos ver aqui. Expandir. Certo? A gente já fez isso anteriormente. Você se lembra do checkbox list e os outros testes. Então a gente não precisa explicar muito aqui nessa aula. Certo? Então para essa aula só a gente terminou o teste pro para verificar o número de componentes de rádio que foi renderizado e checamos a propriedade name de cada componente de rádio. Certo? Na próxima aula a gente vai dar uma olhada nas outras propriedades. Então até a próxima. Tchau.