Resumo do Transcript

Então vamos começar aqui usando o método shallow para poder montar o nosso componente checkbox. Vamos chamar shallow, chamar essa função e passar o próprio checkbox como argumento em jsx. Esse cara vai montar o componente checkbox e vai criar o chamado enzyme wrapper, certo? Algumas pessoas não documentam normalmente o chamado wrapper, a variável, mas gostam de chamar o componente dessa maneira. Agora o checkbox vai levar algumas propriedades, não é? Então a gente precisa passar as propriedades para o checkbox, a gente precisa definir e passar essas props que vão ser usadas no checkbox. Então nós podemos adicionar aqui, por exemplo, ele perde o próprio nome, perde o próprio vale e assim por diante, nós podemos adicionar aqui no próprio, no próprio prop do jsx, mas fica muito long, então eu vou extrair esses caras e vou criar uma variável chamada props só para poder definir essas prop, para a gente passar para o checkbox. Então vamos aqui definir as prop. Agora vai precisar do name, vai precisar também do value, onChange, you checked, certo? Eu não, ainda não defini os valores, mas vamos ver aqui. Então nós precisamos definir valores falsos só para poder o componente montar corretamente. Vamos dar um nome aqui a esse componente. Pode ser qualquer coisa, nesse caso o que é que a gente tinha usado aqui? Tinha usado frutos que gostam, seu olhar aqui no app, o jts, formulário, gente tinha passado o quê? Passado nome, só nome, label nome, valor, não sei o quê, ok, tá certo. Volta aqui, vamos usar a mesma coisa que a gente usou lá, só para testar. Nem vai ser nome, ah desculpa, não é isso, é o checkbox list, aquele era o input que a gente já fez. Vamos lá para o checkbox list, na hora que a gente cria os checkboxes nós vamos simular essas propriedades aqui, senorte que o name, seu quer, seu quer, então foram todas. Da onde? The options, e ver o formulário, fruta options, esse cara tá definido dentro do arquivo de constantes, se ele é lá em cima o import, fruta options do constants. Esse arquivo constanta está dentro da, é no index do pasta constants, fruta options, vale, banana, maçanas, ok. Certo, então vamos aqui no checkbox list, formulário, esse que é o nome aqui, que nós passamos. Então vamos usar a mesma coisa, botando aqui no test, vamos só botar frutas, essa maneira, o valor aqui nesse caso, esse checkbox individual, vamos para o banana, o onChange vai ter que ser uma função. Nós podemos criar uma função de mock usando o jest, é só falar jest.fn, chama essa função e vai criar um mock, uma função de mock, como a gente já viu antes quando a gente testou o input text, o text input, certo? O check vai ser o quê? Vai ser verdade ou falso, né? Então a gente pode iniciar com o falso aqui mesmo. Então, e qual é a mais outra prop que é necessária para o checkbox? É o label aqui, nesse caso pareceu a palavra banana com o primeiro letra maiúsculo, então vamos adicionar também o label. Essa maneira, certo? Agora que a gente tem as propriedades falsas para serem passadas por checkbox, dentro dessa variável chamada props, que é um objeto, nós vamos copiar todas as propriedades e passá-las para o checkbox usando o operador de spread, que é os três pontos. Vamos fazer assim, abre as chaves, três pontos, props. Esse cara vai copiar name, value, onChange, check, label, como propriedades para o checkbox. Certo? Agora que nós temos o componente, o enzyme wrapper, nós podemos começar a fazê-los nosso teste. Nesse caso, primeiro a gente deve encontrar esse input dentro desse componente checkbox. Então vamos falar component.find para encontrar, buscar o que o input, o nome do componente é input, certo? Agora o input, se ele encontrar, nós esperamos que só tenha um, não é? Então ponto length, vamos esperar expect. Deixa eu aumentar aqui a tela para você ver melhor. Expect component.find, input, todo length. Esperamos que seja um, to be one, o matter to be, certo? Salvar aqui. Vamos lá e rodar o teste. Terminal aqui.