Resumo do Transcript

Vamos começar e criar o arquivo de test para o componente radioList. Vamos lá na parte src-test e vamos para components.com e vamos criar um novo arquivo. Vamos chamar o arquivo do mesmo nome do componente radioList com o suffix test.test.js. Certo, vamos proceder da mesma maneira anteriormente. Você note que é sempre a mesma coisa. Importa o React, importa o shallow do Enzyme, importa o componente e faz um bloco de describe para poder organizar os testes. Então vamos lá. Bem rapidinho, importa o React, importa o React porque a gente vai precisar usar o JSSX. Vamos importar o shallow que vem do pacote do Enzyme. Esse shallow aqui para poder montar o componente, criar aquele Enzyme wrapper. A gente vai precisar do próprio componente que a gente está testando que é o RadioList. Vamos ver como o RadioList está sendo exportado. Voltando aqui o componente RadioList. Deixa eu botar aqui no lado do lado direito da tela. Vamos lá embaixo do componente RadioList, aqui no meu lado direito da tela aqui eu tenho o componente RadioList, certo? Deixa eu fechar aqui. Então ele está sendo exportado com essas chaves aqui, então tome cuidado quando você importar aqui do test. A gente vai precisar também das chaves. Importa o RadioList, onde está esse cara? Está 1, 2, 3, estamos no common, vai para cima, uma vez é components, vai para cima outra vez é test, vai para cima outra vez é src, barra, components, barra, common, barra o RadioList, certo? A gente fez o index aqui, então dá o que também vai importar do próprio index, mas eu vou importar do próprio arquivo diretamente. Certo com isso? Salva aqui, espero que eu não tenha esquecido de nada. Vamos ver aqui. Está tudo ok. Então vamos lá agora definir aquele bloco de describe para poder organizar os testes, component, definir o segundo argumento aqui para poder definir esse bloco. Vamos pôr aquele before it, a gente poder fazer nossa configuração inicial, poder fazer o shell e criar as prop falsas, certo? Vamos lá, primeiro a gente vai dar o shell em que? Com o RadioList, mas o RadioList vai fazer uma prop que a gente vai criar e vou fazer um objeto chamado props, dessa maneira como eu quero esse cara que seja acessado de outros blocos, de scope eu vou usar o let props aqui fora, da mesma maneira que a gente fez antes. Tem uma variável props que agora é acessível para cada teste. Então no props aqui é passado para o RadioList, copia todas as propriedades, esse objeto chamado props, como as props do RadioList usando esses três pontos, certo? Então vamos definir as props já já. Vamos ver aqui. Do lado direito tem um componente do RadioList, vamos ver qual as props que o RadioList aqui precisa. Se você se lembrar aqui a gente fez esses comentários para poder mostrar como a gente queria usar o RadioList, então já para usar como referência esse cara aqui. Note que o RadioList vai ter o que eu nome, vai ter o options, vai ter o on change e vai ter o check option. Deixa eu verificar o arquivo aqui, o nosso nome e o nosso nome para ver se realmente a gente não esqueceu de nada. No lado direito eu vou abrir o fórmulario para o other JTS para poder verificar como a gente usou o RadioList, realmente aqui. RadioList está sendo usado com quatro propriedades, name options, on change check option, certo? Tudo certo. Então para o name aqui vamos criar as nossas propriedades falsas para poder passar para esse componente de teste aqui. O name pode ser qualquer coisa que você tenha. E eu vou botar a mesma coisa que está na implementação, mas realmente não importa. Vou botar general, poder identificar essa lista, certo? Essa escolha. Options tem que ser uma lista de várias options. Vamos ver aqui que a gente fez no checkbox list, se você se lembra aqui no teste do checkbox que a gente criou as próprias options aqui no próprio before each e a gente passou para o propriedade aqui. Então a gente vai fazer a mesma maneira, certo? Vamos aqui. Options, a gente vai criar uma lista aqui de opções falsas. Você pode seguir a mesma coisa da implementação que você quiser. Você notar que se eu for no arquivo de constantes, que as opções, a gente tinha duas opções, né? Quando você está testando, não precisa ter duas, pode fazer umas três, certo? Mas o formato tem que ser nesse formato aqui. Então vamos fazer aqui um variável chamado options, que vai ser uma lista de objetos. Essa lista de objetos tem o quê? Tem um id, tem o level e tem o value. Então pode fazer coisa que não importa. É só uma lista em geral. Então eu vou usar a mesma coisa da lei. Masculino, culino. Aí faz outra, vou duplicar esse objeto e modificar, certo? Estou usando o Atom aqui para perto comando shift D. No caso do Mac eu acho que é control, control e shift D no Windows ou Linux. Se você souber, deixe o comentário aí da shortcut. Vamos lá, continuar, faz outra opção, sei lá, feminino. E aí, feminino. Então pode fazer mais outros que a, não importa, vou deixar assim mesmo. Aqui tem dois, duas opções. Tudo certo, a gente fez objetos de opções falsos. Agora você passa aqui, o options vai ser essa options aqui. Esse cara se refere a esse objeto, essa lista de objetos. E como tem a propriedade, tem o mesmo nome da variável aqui. A gente pode só usar dessa maneira. Então vamos lá, definir as propriedades para o name, para o options. Agora vamos fazer o onChange. O onChange é só uma função, se você se lembra de uma função chamada, definida pelo pai desse componente, radioList. A gente não precisa saber da implementação e da como é que o cara funciona. A gente só precisa criar uma função falsa que não faça nada, não precisa fazer nada. Uma opção é fazer assim. Faça nada ou eu gosto de fazer o jas.fn quando eu chamo esse método fn. Do jas, ele cria uma função de mock que nos permite verificar se realmente a função foi chamada e essas coisas. Nesse caso nem vai importar muito se foi chamado não, mas só para a gente ter esteja se acostumando com o jas. Então vamos lá. Depois definir o onChange, vamos ver do checkOptions. CheckOptions é aquela opção que está sendo selecionada. Então você pode escolher um deles aqui. Vamos ver. Voltando aqui no lado direito, eu vou voltar para o radioList, definição do radioList. Vamos ver aqui. Se note que a maneira que usei isso é o checkOptions é o valor que está selecionado. Então nesse caso vai ser masculino ou vai ser feminino. Vou voltar a que sei lá qualquer coisa, feminino. Vai ser o valor inicial do checkOptions. Com isso a gente termina de definir todas as propriedades falsas para o radioList. Com isso a gente já pode começar a criar os testes. Criamos as propriedades falsas e passamos para o radioList para testes. Agora só falta a gente armazenar esse cara aqui. Esse cara retorna o chamado enzyme wrapper. Então vamos armazenar uma variável pessoal do documentação do enzyme, eu gosto de chamar wrapper, mas eu chamo component, certo? Mas saiba que é um enzyme wrapper. Então como eu quero que esse cara seja acessível de outros testes, eu não vou usar a conta aqui. E vou dar o let lá fora, dessa maneira. Certo e com isso a gente já está preparado para poder começar esses testes. Deixa eu só ir aqui no terminal para ver se não teve nenhum problema nesse cara. Vou rodar os testes, npm test. Só para ver se não deu nenhum problema. Você nota que ele já está rodando o radioList test. Então está tudo ok? Ele disse que falou, falou porque o meu arquivo não tem nenhum teste ainda, mas como não teve outro problema, então está tudo certo, a gente só resta. Começar a criar os testes. Isso a gente vai fazer na próxima aula. Certo? Então até lá. Tchau.