Resumo do Transcript

Olá pessoal, estamos de volta e agora vamos verificar se o check options, essa prop aqui, foi definido corretamente para o checkbox list. Vamos lá? Então aqui, depois do último teste, a gente fez aqui, vamos adicionar outro teste. E esse teste vai verificar se o check options é realmente o list.state.frutas, aquela propriedade frutas do estado do componente por no lar. Leve incluir checkbox list e leva prop checked options com o valor da propriedade frutas do estado do componente. Certo? Componente nesse caso, referindo a formulário. Note que na implementação aqui no lado de baixo da tela, e está passando vez ponto state frutas, que a gente definiu inicialmente, se você se lembra, vamos lá em cima, racha lá para cima, para o state aqui, a gente deu property initializers, em vez de passar, definir o estado inicial no constructor. A gente definiu essa propriedade frutas com um objeto cujos de propriedades, referindo a cada fruta, nesse caso a cada checkbox, e tem o valor false, que significa que o checkbox não está marcado, se for true significa que está marcado. A gente espera que passe esse objeto aqui, esse objeto como prop checked options ao checkbox list. Então, a maneira de fazer isso é dessa maneira, você vai pegar daquela mesma maneira e encontrar uma fineware, vamos encontrar primeiro o property checkbox list, vamos ver, a mesma maneira que a gente fez anteriormente, esse cara vai capturar o checkbox list, a gente vai verificar checkbox, a prop checked options, se esse cara, esperamos que seja o que, se o bequem, que seja o estado, o propriedade valor desse fruto no estado do componente, para acessar o estado do componente que foi montado, que foi criado um enzyme wrapper, você usa o variável do wrapper, ponto instance, ou desculpa, ponto state, certo? Dessa maneira que, vamos dar um consolago aqui para ver se realmente funcionou, se é isso mesmo, consolago component, ponto state, ah, desculpa, component, ponto state, deixa eu comentar esse cara aqui, eu vou dar um consolago só do component.state, dessa maneira, você vai ver aqui embaixo que ele realmente retorna o estado do componente formulário, que foi aquele que foi montado e que a gente criou um enzyme wrapper e armazenou na variável component. Agora a gente não precisa de todos esses caras, a gente só precisa de frutas, então se você quiser só frutas, só fazer assim, adicionou um argumento chamado o nome da propriedade, component.state frutas, certo? Então ele vai pegar esse cara, vamos lá, component.state frutas aqui e ele vai incluir o teste passo, né? Deixa eu remover o consolago, certo? Então ele usa o 2B, verifica se esse objeto aqui, o valor desse objeto aqui é o mesmo desse objeto, então obviamente que nesse caso a gente tem que ser a mesma referência por isso que usando o 2B funciona corretamente, não, certo? Eu quero te mostrar uma coisa aqui, já que a gente está nesse negócio do 2B e 2E, se a gente usar o, vamos ver aqui, vamos supor que eu fiz um objeto com, que é a cópia do estado inicial aqui, o valor da frutas, dessa maneira aqui, é a mesma coisa, o mesmo valor, mais um objeto diferente, então se eu checar o checkbox, o checkoptions e eu putar aqui em vez do component.state frutas, eu lutar esses frutas aqui que a gente definiu aqui, vamos ver o que acontece. Então o teste falhou, embora que os objetos sejam os mesmos, né? Então é aquele detalhe que a gente já aprendeu do 2B versus do 2E, nesse caso ele está verificando, esse cara aqui tem a mesma referência desse outro cara aqui, nesse caso não porque frutas é um objeto aqui e a gente definiu em outro local, não se refere ao próprio, a propriedade que frutas do estado, do próprio componente, por isso que falha, mas se você botar 2E, obviamente vai funcionar. Certo? Mas também tem um detalhe de, ele não também não checa se você usar dessa maneira, se eu poderia também ter definido um objeto aqui, em vez de passar o destater frutas, eu passo o próprio objeto dessa maneira, então eu passo um objeto assim, também vai passar, opa, mas isso aqui também está errado, né? Então por isso que se você usar aquela outra maneira, em vez de definir um objeto aqui, você checa, verifica se é diretamente o estado do componente, vamos ver o que acontece. Opa, você salvar, agora falhou, então realmente esse cara aqui está verificando, você realmente passou propriedade do estado em vez de um objeto literal dessa maneira. Então reverter no que para a implementação com a reta, veremos que o teste agora passa, então por isso que eu prefiro essa maneira aqui, em vez de definir um objeto e usar o 2E, nesse caso, certo? Você tem que ver mesmo se está passando a propriedade que vem do estado do componente, e não é um objeto literal que poderia ser idêntico ao objeto do estado, né? Frutas, objeto frutas do estado. Então com isso a gente termina esse teste para o project options. Certo? Então até o próximo vídeo, a gente termina com o one change, on frutas change.