Resumo da Transcrição

Então, continuando aqui, vamos ver quais testes que a gente vai criar. Olhando aqui no componente select, vamos começar perificando se existe componente select e se esse componente select recebe os props de maneira correta, certo? E depois disso, nós vamos olhar se para cada opção fornecida pelo select vai ter um componente option. E esse componente option para cada opção tem valor a props value definido corretamente e dentro do próprio option o label está também definido, está aparecendo corretamente. Então, esses são os testes que a gente vai criar. Então, vamos começar aqui dentro da parte de testes que é src-underline-underline-test-underline-underline-components-com. Vamos criar aqui um arquivo chamado select, vamos adicionar aquele sufixo .test.js para indicar que é um arquivo de teste. Certo, vamos ver aqui a implementação do select para o painel do lado direito aqui para você ver a implementação enquanto está desenvolvendo aqui os testes. Então, vamos começar primeiro, importando o react porque a gente vai usar o jtsx quando for dar o criar aquele enzyme wrapper usando o shallow. E a gente vai precisar aqui no próximo import, importo shallow do enzyme. Vamos criar aquele bloco de describe para poder organizar esses testes. Vamos chamar esse cara de select component, para dizer que são testes para o componente de select. Dentro do bloco do segundo argumento aqui que é um som de set or flash. Vamos definir aqui, vamos começar nesse caso aqui em vez de fazer teste 1 por 1, escrever o teste, implementar o por 1, vamos escrever todos os testes, todos os casos necessários primeiro antes de implementar cada um. Então, vamos lá, qual é o primeiro teste que a gente vai fazer? C deve incluir o componente de select, então lá, deve incluir o componente select. O próximo teste é para verificar se as props dadas ao select foram definidas corretamente. Então, deve incluir o componente select com props definidas corretamente. Deixa eu dar um soft wrap aqui. Você vê melhor. Então, tá bom. O próximo teste vai ser sobre as opções, essas opções aqui. Então, para cada, você note aqui que o select recebe o options como prop. Então, para cada opção que veio das props, dessa lista de options, você vai ter que criar um componente option, então vamos verificar isso. Para cada opção, na lista de options, da prop options, inclui um componente option dent, como filho ou criança, filho ou filho do select, certo? Depois, vamos testar se, para cada opção, da lista, na lista, prop options, inclui, define, o value de cada option, corretamente, também tendo level. Pode fazer o mesmo teste ou em outros, depende de você. Vamos fazer em dois testes. Então, esse aqui vai ser só para esse valor aqui. Deixa eu dar um wrap aqui também. Então, o option tem essa prop value, então esse teste é para isso. E também é o option label, então a gente pode fazer o teste para isso. Para cada opção, na lista da prop options, define, inclui um label da opção, corretamente. Então, esse aqui vai ser só para esse label aqui, esse teste. Certo? Então, esses são os testes que a gente vai implementar na próxima aula, certo? Se devem incluir componentes de select, esses são as opções, as props do select, foram definidos corretamente. Se tem um número de opções, o mesmo do número, número de componentes options, o mesmo número de opções fornecidos, isso, cada componente option, recebe o valor value, corretamente. Esse cada componente option recebe o label corretamente. Certo? Então, até a próxima. Tchau.