Nessa aula nós vamos iniciar a implementação dos testes para o componente select. Vamos lá? Vamos fazer o primeiro aqui. Deve incluir o componente select. Devemos ver se esses caras foram incluídos no componente. Então para começar tudo a gente sempre vai ter que fazer o quê? Vai ter que criar aquele enzyme wrapper. Isso é, se fosse um espécie de montar o componente, a gente vai usar o shellow, certo? Então vamos lá. Primeiro de tudo vamos fazer o shell. Com o componente select mais... Como a gente está usando select aqui, a gente vai ter que importar. Então vamos aqui import. Select from cada esse cara. A gente está agora no commons aqui. Vamos, se a gente for ponto ponto barra, vai para o component, ponto ponto barra vai para o test, ponto ponto barra vai para o src. Do src vai para o barra components aqui. Barra common, barra select. Lembre-se que do select tem esses chaves, então ele está exportando com um objeto dessa maneira aqui. Um nome select, então a gente vai ter que usar chave aqui também. Não se esqueça, senão vai dar problema. Certo, então a gente dá um shell com select, mas o select recebe os props, então é aquela mesma coisa, a gente vai ter que criar uns dados falsos, uns props falsos. Você vai notar aqui no comentário do lado direito na implementação do select, que a gente passa esses props dessa maneira aqui. Então vamos lá criar os props falsos. Const props, vamos criar objetos de propriedades falsas e vamos passar para o select usando aqueles três pontos props dentro da chave. Ele vai copiar todas as propriedades desse objeto e vai passar como prop, para o prop component select. Então vamos lá. O nome vai ser o name, o name é só um nome do campo, pode ser qualquer coisa. Eu posso usar a mesma coisa lá também. Então o value vai ser aquele valor que foi selecionado agora, certo? Nesse caso vai ser o valor da opção. Se a gente olhar no arquivo constants bar index, está dentro src, do value de cada país options, sbr, us, jp, qualquer coisa. Na verdade nos testes a gente nesse porta, mas nos testes a gente tem que deixar esse cara da mesma coisa que vai ser as opções, do mesmo valor que vai ter nas opções que a gente vai criar as opções falsas, certo? Então eu vou usar a mesma coisa aqui, sei lá, vamos aqui. Então a próxima coisa vai ser essa onChange, vai ser um método aqui, que a gente vai passar. Nesse caso o select só recebe o método, mas ele não faz a implementação do método, então a gente pode só fazer um js.fm para criar uma função de mock, ou você pode só passar a sua própria função desse aqui. O que é legal sobre o js.fm, é que ele permite fazer se tu haves sido ligado para verificar se foi realmente chamado. Ou você pode fazer sua própria verificação se você cria alguma coisa assim, sua implementação de mock, fazer um contador dentro daquela função que incrementa aquele contador que você cria, ou qualquer coisa assim, mas eu vou usar o js.fm, então vamos continuar. Finalmente tem as opções, a lista de objetos, dessa maneira aqui, certo? Então vamos fazer uns caras aqui, pode ser a mesma coisa que fez ali ou não. Sei lá, vamos criar um diferente. Levo Brasil, velho, vou criar outros, os outros objetos, de opções para ser outro país, qualquer coisa que você quiser. Então vamos lá, ID, 2, 3, 4, qualquer coisa, 8, vou colocar 8. Levo, sei lá. Em laterno, sei lá, qual código é o K? O K é United Kingdom, então vamos lá, outra coisa aqui, qualquer coisa que você quiser aí. China, certo? Então você só precisa criar uma lista de opções aí, de qualquer maneira. Eu fiz umas três opções aqui, só para o teste. Certo, agora que a gente tem os caras, não acho que esse valor aqui, eu também usei aqui, a gente passa para o select, mas agora não dá para fazer nada porque esse cara não está dentro do variável, então vamos criar variável. Os caras da documentação do enzyme gostam de usar o wrapper, bem que eles gostam de usar a componente, por nome do variável. Certo, agora vamos finalmente fazer o teste. Então se você usar o wrapper, esse método find, você vai find o que? Eu vou select, vamos aqui, e esse cara ponto length tem que ser 1, né? Expect to be 1. Vamos salvar, vamos ver se o teste está funcionando, vamos lá no terminal. Vou ter aqui uma aba rodando aplicativo, na outra aba vou rodar NPM test. NPM test. Então o primeiro teste está passando, obviamente os testes estão passando porque não tem nada escrita, né? Teve incluir um componente select, está passando, vamos fazer isso, não funciona, mas vamos remover o select aqui e vamos botar um adiv na implementação do select. Você ver que já esperava que seja 1, recebeu 0, porque não achou nenhum componente select na implementação do próprio select. Então vou reverter as mudanças aqui, então o teste está passando novamente. Então esse é o primeiro teste para incluir o componente select, a gente já fez isso antes, né? Então não era muito coisa que a gente não sabia. Então até a próxima onde a gente vai continuar a escrever os outros testes, certo? Vamos verificar as props do select, certo? Então até mais.