Resumo do Transcript

Graf, voltando aqui. Deve ter um input. Vamos usar o Enzyme. Component, usar a função find, para encontrar o que? Esse cara aqui. Encontrar o que? Eu quero encontrar um elemento ou um componente chamado input. Tem que estar presente. O find vai encontrar essa node. A gente chama node. No HTML do DOM. Vai encontrar esse cara. E a gente ponta dot length. A gente espera que tenha length 1. Que tenha só um input. Expect this to be 1. Entendeu? Component, vai no componente input text. Procura para o input. Achou esse cara aqui? E quantos inputs tem? O ponto length. A gente espera que só tenha 1. Então vamos lá. Vamos ver se a gente esqueceu nada aqui. Vamos voltar nos test apertar. Falou? Não sei o que. Que node find modo. Como eu disse antes, eu não tinha certeza se o Enzyme já estava instalado. Vou apertar o que para sair. Vou instalar o Enzyme. NPM install save dev. O que é o Enzyme só teste. A gente não quer isso em produção. Então a gente chama o dev Enzyme. Dá um tempo aí. Certo. Demorar um pouco, revisando aqui. Primeiro sempre monta o componente. Com o shallow do Enzyme. Depois dá um expect. Usa a função find para encontrar, buscar certo componente, o elemento. E dá o ponto length para ver o número de elementos que foram encontrados. Na verdade node, ele busca nodes. Certo? Eu vi o 1. Quase instalado. Salou. Vamos lá de novo. NPM test. Falou. NPM node find model. Reactor de onde sei o que. Tem que ter esse cara também. Vamos lá. Talvez esqueça. Deu certeza. Vamos ver na... Ah é. Tem que instalar isso também aqui na documentação do Enzyme. Se você está usando react no seu 14 ou 15. Tem também que instalar esse cara. E o reactdom. Será que vai precisar do reactdom também? Vamos ver. Ah não precisa ou não. Só esse cara. Acho que o reactdom já estava instalado talvez. Então deu sucesso. Succes. Passou o teste do input text. Deve ter um input. Vamos fazer esse teste falar para ver se realmente está funcionando. Vou remover o input daqui. Vou recortar. É cortado aqui. Estou dentro do input text. Recortei o input. Não tem mais input. Vamos ver se o teste vai mostrar. Ele já mostrou. Esperamos que tinha 1. Recebemos 0. Zero. Então funcionou. Falou o teste. Está tudo ok. Então vamos. Redefine o input. E aí o que você está achando do GEST com o Enzyme? Achou legal? Deixe o comentário aí. Então próximo teste. Vamos lá testar se o input foi dado a propriedade. Type text. Vamos lá. Teste. Deve ter dado. Deve ter dado. Prop. Type text para o input. Certo? Acho que a gente tem que montar de novo. Fazer a mesma coisa. A gente vai dar uma refatorização para deixar o código dry. Depois de fazer esse teste. Mas a gente vai montar primeiro com o Shell. Para você praticar. Primeiro monta com o Shell. O cara input text. E põe na variável. Agora vamos lá. Expec... Antes de o Expec, vamos primeiro encontrar o input. Usando o Enzyme. Vamos lá no componente.find. Find o que? O input. Agora esse cara tem uns props. Certo? Então no Enzyme se você olhar na documentação. Tem um... Tem a função props. Certo? Aqui no Shell. Cadê? Dox. Ah, man. A conexão está demorando porque estou dando upload nos arquivos. Nos vídeos. Isso vai ter a função.props. Ah, o que eu acho? Esse cara aqui. Retorna um hash de props. Para a Node root. Rhyze do wrapper. Props. Só pode ser chamado com um wrapper que tem um... somente um node. Entendeu? Então props. Não sei o que. Tem também outra. Esse props vai dar todas as props. Mas também tem... a props individual. Eu gosto de usar essa. Que você pode olhar... ponto prop do cara aqui. Eu gosto dessa aqui. Então vamos ver se vai funcionar. Ponto prop. Type. A gente espera, expect... esse cara... to be... text. Esperamos esse cara para ser isso. Vamos ver se vai... dar tudo certo. O que é isso? Ah. Porque eu não sabei o arquivo aqui. Eu tinha modificado e removido o input. E não tinha nenhum input. Eu salvei de novo. E passou. Certo? Senão, devia estar dado prop type para o input. Ele encontra o input. Verifica se foi dado essa prop... type. O que falou é text. Cuidado com o valor text. Se a gente mudar isso para number... a gente cometeu um erro aqui. Será que vai falar? Aí, falhou. Input text component. Deve ter dado prop type text para o input. Esperamos text, mas recebeu number. Então tá errado. Então vamos lá, corrigir o erro. Salva e passa o sucesso. E assim por diante. Normalmente... TDD Test Driven Development Ah. Development. Esse cara aqui. É, a gente... Se você usar esse método... Você primeiro escreve os testes normalmente. E depois escreveu os testes. Você faz a implementação. Eu gosto de usar isso. No começo é difícil fazer isso. Se você não souber criar testes. Mas quando você aprende... A fazer os testes... E fica você melhora. Fica muito mais. Você aprende fazer os testes Direitinho. Normalmente... Você, depois disso, começa a escrever os testes. E fazer a implementação depois. Em vez de ser o contrário. E eu acho que fica muito... Legal. Especialmente com o Jest. Eu acho que é muito divertido escrever aqui. Muito fácil. Divertido. E em coragem aos outros. Fazer mais testes. Acho que tinha um negócio... Se você olhar na página do Jest. Encourage. More testes. Eles dizem aqui... Observamos. Se os engenheiros... Foram... Dados ferramentas que já são... Prontos para usar. Eles terminam escrevendo mais testes. Então, com o Jest. Porque é muito fácil. Pessoal, terminam escrevendo mais testes. E eu acho muito legal. Desculpe sobre o Jest. Nos comentários. Certo? Então, vamos continuar no próximo vídeo.