Resumo do Vídeo: Testando o Componente Checkbox

Oi pessoal, nos vídeos passados nós aprendemos como fazer um teste com o teste com o GES e o Enzyme para testar o componente input text, que é esse primeiro aqui no nosso armular, que tem o label nome e o input aqui, tipo text. Nessa aula nós vamos dar uma olhada em como testar o componente checkbox que a gente criou. Nesse caso a gente tem aqui esse componente aqui, que é chamado checkbox list, se lembra? E cara, dentro do checkbox list ele compreia uma lista de vários componentes chamados checkbox. Então nós vamos testar primeiro o checkbox, certo? Nessa aula. Então vamos lá, começando aqui. O checkbox é esse arquivo chamado checkbox.js que está dentro da pasta como, que está dentro da pasta component, que está dentro da pasta src. Então src-component-como-checkbox.js. Se nós olharmos aqui a definição do checkbox tem um input de tipo checkbox e o input está dentro de um label, certo? Nesse caso esse banana, massa, morango, esse pudiante que aparece ali. Certo? Primeiro nós vamos testar pela existência desse input tipo checkbox e vamos ver se todas as propriedades foram correntamente dadas a esse input. Depois disso vamos criar também um teste para ver se o label está sendo mostrado corretamente e a gente pode até testar o estilo do label. Certo? Então vamos lá começar. Dentro da pasta src aqui tem essa pasta test, certo? Nessa pasta test tem components com. Então como checkbox também está dentro do como a gente vai simular a mesma estrutura aqui na pasta de test. Então vamos lá. Checkbox, vamos adicionar o infix test.js. Em vez de ser só .js vai ter que adicionar o test.js. Certo? Então vamos começar aqui do zero para praticar. A gente primeiro de tudo vai precisar do módulo do react porque a gente vai usar .jsx. .jsx. Também vamos precisar do enzyme, do método do enzyme chamado shallow, não é? Que do método shallow vai nos permitir montar um componente chamado wrapper no enzyme. Enzyme wrapper. Certo? Então vamos lá import. React from react. Import. O método shallow está dentro do módulo do enzyme por isso a gente tem que usar as chaves aqui para poder extrair esse método dentro do módulo, do próprio módulo do enzyme. Agora a gente vai precisar importar o componente que a gente irá testar, nesse caso checkbox.js. Então vamos lá import. Checkbox from. Vamos lá onde está esse cara? Então o nível acima. Você está no como? Vai para o component. Mais outro nível acima. Está no component você vai para testes. Mais um nível acima vai para o src. Dentro do src tem a parte do component e tem a outra parte como? E tem finalmente checkbox. Isso a expandir a tela, essa janela para você ver melhor. Certo? Note que a gente também usou a chave aqui porque a maneira que nós exportamos de dentro do checkbox.js, se a gente for lá, é usando essa maneira aqui que é a mesma coisa de dizer assim por isso a gente tem que usar a chave lá quando importamos. E usando aqui algo, arquivo de teste do checkbox. Vamos continuar e vamos fazer um bloco de describe, só para poder organizar melhor nossos testes. Describe. Qual é a descrição? Esse bloco vai ser sobre o que? Sobe checkbox component. O componente do checkbox. Certo? Vou passar uma função aqui. Certo? Agora vamos criar nosso primeiro teste aqui. Deixa eu só adicionar o painel ali para você poder ver o componente do lado do teste. Certo? Então nós vamos começar a testar primeiro esse cara aqui. Então vamos fazer um teste, deve incluir um input. Então para fazer esse teste, primeiro de tudo a gente precisa fazer o que? Nós precisamos montar o componente checkbox para poder fazer os testes. Isso que a gente vai fazer no próximo vídeo. Então até lá.