Criando ação do Menu com React Hooks e TDD

Esse é um vídeo de dentro do curso de React Avançado, se você gostou e quer aprender a criar o menu inteirinho, incluindo as partes visuais, só se inscrever através do link abaixo. #react #tdd

Aqui montado uma vou certinho o que a gente precisa fazer é a lógica de poder apertar nesse botão aqui de menu e ele abrir o menu full screen igualzinho o que a gente viu no fique mais certo e aí o que eu vou fazer o seguinte como essa parte ela inclui mais lógica a gente precisa entender aí a lógica do funcionamento eu vou fazer via tdd então a gente vai primeiro

Pelo teste e depois a gente faz aí a parte da implementação e o visual também o visual eu vou deixar só para depois agora vamos fazer só a parte do entendimento de poder abrir e fechar e o nosso teste tudo passar e garantir que o funcionamento está correto ok então vamos lá a primeira coisa que a gente tem aqui eu já estou no nosso teste né já tá até a rodando

Aqui e aí o que eu vou fazer é iniciar o nosso bloquinho aí do nosso teste e vou só copiar isso daqui de cima a gritar e agilizar para não precisar digitar tanta coisa e vou apagar isso aqui e vou escrever em um nós o nosso teste no caso aqui vai ser metida renda o the open close maple – ok então o que eu tô fazendo aqui basicamente é renderizando o nosso menu e

Aí a gente precisa fazer algumas etapas para poder fazer funcionar tu certo e o que eu gosto de fazer enquanto eu tô escrevendo testes enquanto eu tô fazendo realmente alguma implementação de alguma coisa é separar em passos lógicos o que que tem que acontecer o que que tem que ser feito basicamente e aí por exemplo o que eu quero fazer inicialmente é primeiro eu

Preciso selecionar o nosso menu né esse no caso esse me novo chamar de menu for porque ele é o fusco em né então a gente precisa selecionar esse menino aí é eu que eu preciso fazer o quê e eu preciso verificar se o menino tá escondido né então preciso verificar se o menino tá de fato escondido e aí o que eu quero fazer é clicar no botão já abriu o meu num no

Botão de abrir o menu a verificar ele se ele abriu isso é uma outra etapa do teste e depois o que eu quero fazer é clicar no botão de fechar o menu e verificar se ele fechou então e verificar se ele fechou é para aqui no momento que eu escrevi aqui a nossa lógica o passo a passo do teste automaticamente eu também já fiz toda a lógica do pensamento do menu porque a

Lógica é essa é bem simples eu quero clicar no botão e abre o meu num e eu quero clicar para fechar e ele fecha o menu e no início ele está escondido então essas aqui são as lógicas que a gente precisa fazer aí pro funcionamento de todo o nosso mesmo certo a primeira coisa então que eu vou fazer é selecionar esse menu que ainda nem existe então vou botar aqui

Por exemplo um com sifu menu elemento ok e aí eu vou fazer o seguinte screen get o caso aqui o nosso seletor do décimo library que eu vou usar vai ser o jet bairro ou ok e qual é a holding um menu harold menos um papel de um menu é de navegação então é um navigation e é isso só um detalhe que eu vou fazer aqui agora é que é o seguinte eu vou passar aqui um rio

Dentro por que que eu tô fazendo isso aqui antes mesmo até da implementação e porquê bom é dentro do teste em library ele ele trabalha muito com essa questão de acessibilidade e aí é como eu sei que eu vou passar um área ribeirão lá ele vai esconder se eu não passar isso aqui o nosso test.lab sequer vai achar o nosso mesmo então pensando nisso aí eu já tô

Passando dessa forma aqui ok se eu salvar reparem que obviamente o nosso teste quebrou e ele disse que não achou olha só ele falou que não consegue achar ele jogou todo o nosso código aqui e fui só tem essas coisas aqui que você pode achar mas o que você tá pedindo não tem então o que eu vou fazer é criar aí e fato esse nosso menu então vou vir aqui no style

Componentes né e vou criar o menu full que vai ser um estar do ponto nas que é uma navegação certo e aí como eu exportei ele aqui eu vou chamar ele aqui no nosso index do menu então vou vir aqui e vou ter um nosso sm no forro aqui sendo passado eu que eu vou fazer também já agora é que eu vou passar um área rhythm on que é esse aqui significa o quê que o nosso

Menos está escondido então olha acessibilidade desde o início como eu sempre falei ok então é porque de passar isso aqui porque senão leitor de tela ele acabaria vendo um menu que na real não é para está aparecendo e aí ele leria o menu daria até uma confusão para o usuário elipse eu passo que o área aqui dentro o menino tá escondido e o leitor de tela vai

Ignorar certo fiz isso daqui salvei ele vai passar o teste que na realidade não tá testando nada ainda né gente só selecionou mesmo agora a gente tem que de fato testar isso daí certo e aí o que eu quero testar no início é verificar se ele está realmente escondido de fato então meu primeiro teste aqui o que eu vou fazer é o seguinte eu vou passar um full menu

Alemãs e aí eu quero pegar um atributo dele qual atributo que eu vou pegar o atributo vai ser o área rida ok nesse caso aqui já foi até um pouquinho acelerado né eu fiz o processo um pouquinho antes até já criei esse era rida e aí espero que ele seja tudo né lembrando que aqui eu tô passando outro dessa forma porque quando a gente seleciona o atributo com guedes

Atributos ele não retorna para gente como um booleano ele retorna como uma string mesmo estou engtro spring falso então eu preciso usar e aqui tá então inspecionar seu salvar o nosso teste tá passando porque realmente tá fazendo sentido por enquanto eu e o nosso segundo teste que eu quero fazer agora é testar também se ele tá de fato escondido né então eu vou

Testar se ele tivesse estar eu se ele tem uma opacidade zero então eu quero testar se ele está escondido mesmo e claro o nosso teste quebrou porque porque eu ainda não passei a sua capacidade então vou vir aqui no estilo e vou passar para opacidade zero consequentemente ele agora passou o nosso minuto a escondido a gente já fez aí a primeira parte já temos um menu que

Esse menino tá escondido então a primeira parte está pronta agora vamos para a segunda parte que a clicar no nosso botão de abrir o menu e verificar se ele abriu no vídeo anterior a gente fez aí um teste né onde a gente selecionava já o botão aqui de o pé no então o que eu vou fazer é só pegar esse nosso seletor e usar ele quem é e aí como eu faço dentro do

Rex test in library para poder clicar em alguma coisa eu posso usar o método fire event o método fire evento ele vem duriex descem library mesmo e permite com que eu faça ações aí do usuário como por exemplo o clique e aí eu vou clicar onde eu vou clicar no nosso opmenu então eu cliquei no opmenu e agora o que que eu quero que aconteça eu quero que o nosso menu de

Fato abra então eu quero que eu quero que agora o área rita não seja mais tua quero que seja falsa e eu quero também que o estilo aí é a opacidade mude para um tão na realidade primeira só vou fazer o primeiro em o teste e obviamente ele quebrou e aí a gente vai resolver esse teste então esse é metodologia do ttd normalmente a gente faz aí um teste esse teste e

Quebra e a gente resolve esse teste então olha só o que não é falsa tu porque de fato eu não estou fazendo nenhuma lógica aqui para mudar isso ok e aí agora é onde a gente entra a lógica de fato que a gente vai fazer para isso aqui mudar realmente o que que acontece eu quero mudar um estado do menu entre aberto e fechado certo então eu quero mudar um estado é esse

Estado é como o nosso menu vai entender o funcionamento dele e dentro do rieti para trabalhar com estados a gente pode utilizar como eu tô fazendo com functional component a gente pode utilizar um hulk esse hulk se chama ios state então eu vou importar aqui em cima wheels state from heat e aí o que é que sos street fighter como ele funciona com a primeira coisa que eu

Vou fazer aqui é que como eu tô eu antes retornava componente direto nos dava nem retorne nem nada usava só o parentes agora eu preciso mudar bom então vou abrir uma chave vou botar um pitanga aqui e aqui embaixo eu tenho que fechar a chave também ok fiz isso aqui só para poder assim táxi funcionar e aí o que eu vou fazer é o seguinte como funciona esse resistente

Ele basicamente é retorna um array com duas opções ali que eu já vou passar e ele funciona assim ele é uma função certo e essa função retorna 22 variáveis aqui a primeira variável é o estado que eu quero dar no caso aqui o nome do estado que eu vou dar vai ser de esgoto ea segunda variável é um método que altera esse valor aqui esse método eu vou chamar de

7 is open por padrão é nesse trabalho de looks a gente utiliza o 7 aqui para identificar né que é um método que vai mudar essa variável ok então o padrão do riet assim como os rookies todos eles para o padrão usam a palavra ios existem outros jogos wheels state é um deles ok e aí aqui no ios state é ele recebe um parâmetro esse parâmetro é o valor de for da

Nossa variável ou seja o valor que a variável vai inicializar no caso eu quero um menu inicialmente sendo fechado né então se ele tá fechado ele não tá open ele não está aberto então é falls ok então inicialmente o nosso isso ou pena aqui é falso e o nosso método 7 zopen é utilizado para abrir esse menino ok então eu o que que eu vou fazer agora ao invés

De passar um valor tron aqui diretão o que eu vou passar é o seguinte é o área ryden é o oposto de aberto né então se ele tá escondido significa que ele não está aberto então ele não negação em aberto então aqui o que eu estou fazendo é o seguinte é inicialmente o nosso isopen é falso certo negação de falso é thru então o menu está escondido então

Isso aqui de fato tá fazendo o princípio de abrir e fechar ok se eu salvar o nosso primeiro teste de deixar ele escondido vai passar obviamente mas nosso segundo teste ainda não passou por quê porque eu ainda não estou mudando esse valor dos operando aqui porque eu não tô chamando essa variável no lugar nenhum agora eu vou utilizar esse método aqui em algum lugar

Qual vai ser o lugar mais exatamente aqui onde a gente tem o o pé no ok então eu vou passar aqui o método de um clique ok e dentro de um clique o que eu vou fazer é chamar esse método ali sete zoltan opa eu tinha não tinha copiado 7 zopilen o copiar esse método 7 ezopen e o que eu vou fazer é trocar o valor do iso e como funciona bastante eu passar o novo valor aqui

Dentro dele qual é o novo valor é ter um ok então toda vez que a pessoa clicar para abrir o menu eu vou mudar a variável de isopor para tu e aí ele vai abrir o menu ok fiz isso salvei reparem no nosso teste passou então isso significa que sim é está funcionando o nosso clique tá abrindo menu e o menu de fato aqui agora o ar r dentro tá virando falso porque ele

Tá aparecendo eu vou fazer então nosso segundo teste que é verificar se ele de fato tá aparecendo mesmo né se ele tá mudando a capacidade para 11 ea parem que se eu fizer isso ele quebrou não está mudando porque porque aqui no nosso estilo eu não estou fazendo nenhuma verificação e eu preciso verificar isso daí então para verificar o que que eu vou fazer eu vou

Passar essa variável ezopen para o nosso menu fogo para o poder e nos nossos estilos então vou vir aqui ezopen is open ok e aí agora se eu só vai reparem que ele deixa eu ver menino aqui isso é por causa do typescript enum typescript tá dizendo que eu não tô passando esse tipo aí no menu fumo eu não espera receber isso daí que de fato eu não tô ttepando o menu

For para receber nada que ele não tá entendendo então que eu vou fazer aqui é time menu full box por exemplo e aí no caso ele só recebe uma propriedade que é o isopor e eu sei que é um booleano estava escrevendo truly e aí o que eu vou fazer at par então esse nosso menu full passando isso daqui feito esse daqui ele já vai entender essa passagem do isopor só que

O nosso teste continua quebrando porque porque eu não estou fazendo nenhuma lógica aqui ainda então para fazer a lógica aqui o que eu preciso fazer o seguinte e eu vou passar dessa forma aqui já pegando o nosso open ok então esse essa maneira aqui é uma das maneiras de que a gente pode fazer é para poder pegar as variáveis muita gente utiliza por exemplo próprios

Ponto e chama e o isotan e aí tem que fazer tipo como uma função mesmo prox.ao is open só que eu prefiro fazer dessa forma aqui eu basicamente faço um desse trem e aí passa pelo css a nossa variável agora é só a gente fazer um ternário com essa variável verificando olha só se tiver aberto então eu pa cidade é um se tiver fechado ao para a cidade é zero ok

Fiz isso aí salvei reparem o nosso teste passou então a gente já tem aí o nosso menor realmente ao clicar ele tá aparecendo agora o que a gente precisa fazer então é fechar esse menino aí então eu preciso e para poder fechar o menu e aí é quando quando eu clicar nesse botão ele vai fazer essas mesmas coisas aqui só que voltando para o estado de fechar ok é eu

Ainda não tenho um botão de close menos você reparar que a gente não criou um close menos porque o clos menos vai ficar dentro do menu fofo então eu vou criar esse close menor aqui eu já tenho aqui do lado é um nosso ícone então eu só vou copiar o ícone aqui e para facilitar para gente então assim como a gente copiou dos outros ícones eu vou ter aqui também

Do close o que eu vou fazer aqui é também mudar o nome dele para close icon só para ficar mais fácil a gente identificar que é um ícone e aqui dentro o que eu vou fazer um close arco certo e é explodir com aqui ele é alto fechado eu e aí a primeira coisa que eu vou fazer é ter um área leible para ele ok dizendo gulous menu com esse era label vai me facilitar

Selecionar o item e também vai ficar acessível ok é outra coisa que eu vou fazer agora então como eu já sei né dos nossos do nosso teste eu sei que eu vou ter que ter um clique também o posto então ao invés de ter 17 sopa dentro eu vou ter um falls então vou vir aqui e vou trocar ao invés teatro eu quero que ele fecha então ele é voz ok fiz isso daqui o nosso

Teste tá passando ainda porque obviamente eu ainda não escrevi nada do teste mas aí agora é bem simples olha só basta eu copiar aqui colar aqui embaixo e aí o que eu quero agora é ao invés de pegar o item opmenu no caso eu quero o close menu e eu espero que o menu esteja o que escondido então o que é tro e ele tem opacidade zero fiz isso daqui salvei e o nosso

Teste continua passando será que tá passando mesmo se eu vou mudar aqui para um vamos ver se ele realmente quebrou ó ele quebrou mesmo então de fato ele tá escondendo quando a gente manda fechar e tá aí gente prontinho a gente fez aí todo o funcionamento do menu ok de abrir e fechar e eu sequer abrir a tela do browser para ver se tá funcionando porque porque o meu

Teste que garante que tá funcionando eu tenho certeza que tá funcionando no próximo vídeo aí do curso a gente continua então fazendo a parte visual mas toda a lógica já está

Transcrito do video
Criando ação do Menu com React Hooks e TDD By Willian Justen

Posts Relacionados:

21 Criando pagina de leitura parte 1 CRIANDO UMA PRESSEL NO GOOGLE (Aprenda a Fazer Vendas Na Internet com o Pinterest) Criando e Configurando a Pressel de Forma Correta CLOAKER Criando Presell GRÁTIS em 5 Minutos Como Criar Presell no Google Sites Tutorial COMPLETO