Teste E2E no React Native - Code/drops #101

Eu vou dar Inter e vamos acompanhar o nosso teste vai abrir nossa aplicação agora novamente ó Pode amarrar minhas mãos agora que leva dentro de tudo tudo para a gente a gente pode acompanhar aqui então olha que louco só olha aí vai começar já selecionou o prêmio olha digitando olha minhas mãos aqui ele tá digitando agora Fechou o teclado Deus subscribe aparece uma mensagem assim que segundinhos E vai fechar o Pepe deixou é ou seja fez tudo automático e a gente só ficou observando fala deve Aqui é Rodrigo Gonçalves e eu estou muito feliz de

tá aqui em mais um crocodilo e nesse cor de Dólar para a gente vai falar sobre testes automatizado no react Native especificamente nós vamos falar sobre uma estratégia de testes que é o teste end-to-end tá certo a gente vai aplicar na prática nesse poderosos em uma Aplicação o teste and twenty mas antes vamos responder essa pergunta aqui que a pergunta o que é o teste and client também você vai encontrar esse teste através dessa sigla que e2z mas muito bem o que é esse teste and twenty Como eu disse para você é uma das estratégias

de testes que nós a gente fala de pestes por exemplo né em aplicações a gente bota de notar que é muito comum por exemplo os testes unitários né o teste mais comum é o teste unitário que Basicamente tem como objetivo testar uma parte específica da aplicação funcionando isolada Então esse é o teste unitário ou se você pegasse um bloquinho specifically da sua aplicação e Testa ele isolado de toda a aplicação outra estratégia muito comum de teste audio integração por exemplo né E você vai então agora testar essas unidades essas funcionalidades trabalhando juntas e aí você

tem um teste de integração e aí a gente chega então na estratégia que a Gente vai utilizar no could drop de hoje e praticar aqui que é o teste and trendy o teste end-to-end agora a gente entra na resposta da pergunta o teste and trendy também é o conhecido como teste de ponta a ponta por isso desse nome é and Wendy ponta a ponta é basicamente tem como objetivo testar a aplicação mais próximo daquilo que usuário Faria ou seja usuário quando ele vai usar aplicação ele vai usar determinado a interface determinada funcionalidade Dentro da aplicação

esse usuário ele tem um caminho a realizar no sentido de bom ele vai preencher um campo depois ele vai preencher outro canto por exemplo ele vai primeiro antes de preencher o campo ele tem que clicar no campinho ele vai preencher depois ele tem que ficar no próximo input ele vai preencher depois ele vai clicar no botão para confirmar e por aí vai então usuário ele executa umas esse caminho que eu me refiro é uma sequência de Passos um Passo 1 passo 2 passo 3 até ele concluir então aquilo que ele deseja então é aí que

entra um and twenty Então esse tipo de teste é muito baseado na interação principalmente do usuário esse e também simular exatamente o que usuário Faria na aplicação Então vai ser bem legal da gente aplicar e implementar aqui na prática o teste é and twenty Então agora que eu já te respondi essa pergunta é basicamente o and trendy se essa estratégia de teste de ponta a ponta Visa testar a interação é tão tem um foco na interação e e fazer o teste simulando né mais próximo do usuário daquilo que o usuário executa ou executaria na aplicação

e Claro agora a gente vai para a parte prática né trouxe aí assim ou ao conceito aí para ir para praticar claro eu criei um projeto bem simples Tá bom para gente fofocar mesmo aqui no test and e também para gente aplicar o teste aqui então o projeto já vou até marcar ele aqui que eu vou te Mostrar ele agora ele tá disponível no kit Rubi tá bom junto com esse vídeo na descrição do vídeo vai estar o link e para você então acessar esse repositório e fazer download então do código-fonte aqui da aplicação para

você acompanhar esse code Raw se comigo para a gente aplicar o teste and trendy na prática Tá bom então muito bem vou te mostrar essa aplicação eu já deixei ela aberta aqui tá e eu fiz ela inclusive utilizando o Expo eu vou executar ela aqui eu vou até Deixar o meu dispositivo aqui isso tá bom para gente ir acompanhando ele e eu vou executar aqui a minha aplicação deixa eu deixar aqui um pouco menor com o ex ou start eu abrir minha aplicação Aqui já carregou de choppinho aqui ataque deixou dar um F5 para atualizar

eu vou vir aqui em Run Android device Emulator para ela executarem se não só esperar ela terminar de ser carregado O chá de olho verdinho agora ela vai ser lançado aqui oi e oi muito bem temos aqui a aplicação Então essa aplicação aqui é uma aplicação ela tem uma única interface eu também vou te mostrar isso ela tem essa interface aqui em screen é uma interface chamada a plena de plano que aqui a gente tem a interface insistência paradinha aqui do estilo tá bom e tem aqui uma caixinha com os componentes e essa aplicação tá

Utilizando Inclusive eu fiz ela né utilizando a componentização até para a gente aplicar o teste mesmo aqui bem bem próximo daquilo que a gente faria na em qualquer outra aplicação então por isso que eu já deixei os componentes também separadinho até porque com certeza você vai componentizar e não colocar tudo num único arquivo né então por isso eu também utilizei aqui a componentização para você também vendo o teste é interessante uma aplicação muito próximo Da realidade Tá bom então aqui ó Nessa aplicação a gente tem basicamente aqui é e do cabeçalho ali do header Nossa

aplicação e que a gente tem uns planos né Então temos aqui o plano desde que quer o básico que é o que vem selecionado e aqui tem o prêmio então seu clicar basicamente ele muda ali o nome do plano e também ele muda ali o valor do plano e passa a ficar existe 69 então basicamente a isso olha eu posso escolher o plano aqui eu tenho um campo Para preencher o meu e-mail tá legal e aqui eu posso clicar em qualquer lugar da tela para fechar o teclado porque eu usei aqui o touch Bubble Witch

House Beach bike tá bom E aqui a gente tem um botãozinho de subscribe E aí quando a gente clica nele basicamente aparece uma uma mensagem falando que um e-mail foi enviado de confirmação é E aí Claro tudo isso para simular aí como se fosse ontem uma confirmação digamos assim de que o usuário agora está inscrito né Tá bom Então basicamente é isso E aí eu vou agora fazer o seguinte eu vou parar e são bom vou parar ação eu não vou mais deixar ela executando eu vou até fechar ela aqui agora porque agora você já

sabe sobre aplicação que tá disponível para você fazer o download desse código aqui para você não deixa eu ficar naquela pegada de faz aplicação para poder usar ela então já para gente fofocar mesmo na parte do teste em si tá bom Por que que eu fechei aplicação essa aplicação eu Fiz ela utilizando o Xbox tanto que eu rodei ela agora para te mostrar como é só que eu não fiz essa aplicação Eu não executei eu não criei essa aplicação com o Expo Manager na a gente tem que basicamente dois fluxos de trabalho quando vai iniciar

uma aplicação é pouco é o Messenger e o é couber workflow basicamente coberto flor a gente tem sempre gosto de falar que a gente tem a união dos dois mundos o mundo do Expo que tem para gente o gerenciamento de Toda a questão de ambiente e também de aproveitar a em Pinhais sendo instalada e configurada de forma automática pelo ex ou por exemplo de a gente tem outro mundo da das E ai que a pasta do Android que dói S caso a gente ele fazer alguma customização específico como a gente vai lidar agora com teste

automatizado e o teste and ele vai simular o usuário usando aplicação Quando eu digo simular o usuário Estando aplicação vai abrir ali web e a gente vai conseguir ver a aplicação sendo testada isso não acontece por exemplo quando você faz um teste unitário utilizando o Hatch teste largura por exemplo né um teste unitário um teste de integração porque basicamente você tem lá um um render né no componente você consegue renderizar o componente de uma forma virtualizado sem necessariamente abrir a aplicação e ver aplicação sendo executada e testada né Já com a biblioteca que a gente

vai utilizar aqui a gente vai conseguir ver aplicação de papo abrindo e preenchendo a gente vai conseguir visualizar como se tivesse alguém né um testando a nossa aplicação basicamente um bot testando a nossa aplicação EA biblioteca que a gente vai utilizar a gente vai precisar fazer algumas configurações nativas tá legal e a e a gente vai usar para isso a detox tá bom essa biblioteca É uma biblioteca muito legal é uma biblioteca focada em test and trendy legal então como a gente vai precisar lançar aplicação ali no sentido de lançar ela abrir E aí o

teste consegui ter acesso a Executar a aplicação Fechar aplicação fazer Reload na aplicação então isso vai envolver algumas configurações nativas que a gente vai precisar fazer aqui tá bom E aí que que acontece aqui ó tem até um preview aqui para você ver da documentação Inclusive essa é uma documentação bastante extensa tem muita coisa você vai abrindo o link que vai te abrindo um monte de lugares por exemplo é só get started with detoxnow você clica aqui já vai te aparecer um monte de coisa então basicamente aqui você tem como vou deixar o celular aqui

por enquanto tem esse bita você tem aqui um monte de detalhes net dizendo para você primeiro ter o seu ambiente configurado no caso nude como Eu já estou rodando aqui o próprio é que então já tenho um nude que eu usei dele para estudar o ex por exemplo né A que mais a gente tem aí depois a gente tem aqui ó as configurações específicas para Android e para o Oeste por exemplo frios ligando aqui para o oeste é bem tranquilo a configuração esse né agora por Android é um pouco mais detalhada já são mais etapas

de configuração por isso até que eu vou fazer aqui para Android Tá porque pro Essa não é tão complexo então eu vou fazer para o Android até por questão de tempo mesmo mas o que você fazer aqui no Android com a forma de teste não muda nada uma relação ao esc vai mudar Só depois de fazer uma configuração 1 e do ambiente em si no caso para o iuce para fazer os testes Tá bom então aqui ó ele traz para você fazer a instalação do Android SDK enfim para ter o simulador mas tudo isso eu

já tenho configurado aqui na minha máquina Também então não vou me preocupar com essas coisas eu vou comprar aquilo que direto me interessa que é fazer a utilização do detox em si daí aqui embaixo então nota que era extensa a documentação Lembra que eu te falei né que a gente tem basicamente ó a configuração para a plataforma específica aí baixando aqui ó tem outras documentações aí aqui é para uso de configuração do detox em si é uma cê abre aqui presente no Android ó aí Aqui Tem todas as etapas que você tem que fazer para

o Android em cima olha só foi tu não vale oito etapas basicamente aqui pela documentação tá vendo bastante detalhezinho não tem bastante coisa inclusive aqui ó prowess como eu disse um pouco mais tranquilo né falar para o s tá vendo já é pouquinha coisa não e mais como eu disse eu vou fazer aqui para Android e reforçando né a forma de testar vai ser a mesma que vai mudar apenas vai ser a forma de fazer o teste Incitar você notou que eu fui passando pela documentação bem rápido né Eu rolando para cá rolando para lá

super rápido e falou com o Rodrigo você nem foi isso mostrando que tá rolando aqui né como você foi passando tão rápido assim pela documentação porque eu elaborei baseado na documentação né então baseado aqui na documentação do detox eu elaborei uma documentação mais objetiva a gente ganhar tempo também aqui no nosso old drops não ficar um Cordeirópolis muito grande né de tempo e a gente focar mesmo no que interessa então eu elaborei com bastante carinho peguei ali Devorei aquela documentação que trouxe aqui e uma forma mais didática e mais objetiva até para entra ali pela

primeira vez na documentação pode se perder né você viu ele tem bastante coisa então o mal pode ir pode acontecer Alice perder então por isso que eu elaborei essa documentação mais objetiva mais simplificado a gente Focar mesmo aqui na parte do teste Enfim então vamos lá primeira coisa que a gente precisa fazer é instalar o detox e esse Pode instalar ele globalmente ou você pode instalar ele local eu vou instalar ele local por exemplo não vou vir aqui vou deixar por aqui e vou começar instalando e eu vou usar o yarn tá você pode usar

aí o npm para fazer a instalação e eu vou instalar o detox como uma dependência de desenvolvimento Tá bom então earned Detox a e lembrando né Essa documentação ela vai estar disponível também o link né Desse arquivo também vai estar disponível para você junto com o vídeo na descrição Tá bom então aqui ó junto com vídeo na descrição vai estar essa documentação muito bem a primeira coisa que fizemos aqui foi instalar o detox agora Oi gente vai também partir para a parte da criança da configuração Nativa mais antes eu deixei uma outra observação aqui já

ia passando por ela Importante a gente instalar também o jet tá bom deixou adicionar esse daqui no chão funcionário aí rapidinho para parar de ficar cama então é querido aqui o geste deixa até corrigir aqui instalado Então a gente vai instalar aqui o jet até porque o detox ele usa o teste é uma outra biblioteca de teste para poder executar os testes de forma automatizada Tá bom então o detox também faz uso do Jéssica é uma outra biblioteca para fazer teste unitários de integração tá Legal então a gente vai instalar o jet aqui não é

o foco desse code Blocks falar dele mais o detox usa ele só para você saber então vamos lá vou instalar aqui ó é de teste e menos de agora vamos só esperar instalação concluir eu vou salvar aqui a instalação terminar enquanto Apesar que ele vai terminar agora beleza vai terminar e já terminou enquanto ele já está terminando por aqui vai acabar agora pronto foi agora vamos pra próxima etapa A próxima etapa é a gente vai na pasta Android a gente vai vir aqui na pasta do Android Oh e vamos também agora na pasta aqui na

no arquivo built.io Hero aqui ó build.pro nesse arquivo aqui ó vou fechar o terminal até porque a gente nem vai usar o terminal agora tá então aqui em bild.com.br on a gente vai precisar adicionar esse essa linha e tá bom então aonde a gente vai funcionar em ao Project Então a gente vai vir aqui e vai Procurar por ao Project aqui em baixo tá vendo ó a gente tem Awards bem aqui tá legal E logo depois dessa linha aqui a gente vai adicionar na verdade pode ser pior Depois dessa linha aqui a gente vai adicionar

essa linha aqui ó A copiar e vou colar aqui aí vou tirar esse comentário E aí caso você queira até para você não se perder nas configurações Você pode adicionar um comentário e colocar por exemplo é de do detox só para você lembrar que essa Linha foi você quem configurou no código nativo aqui da pasta Android para lidar com os testes aqui utilizando o detox tá só para lembrar mesmo beleza então agora a gente já acrescentou essa linha aqui dentro do nosso arquivo aqui o Beauty. Velho tá dentro da pasta Android perfeito agora a gente

vai para a próxima etapa que na próxima etapa a gente vai dentro da pasta ep a dentro da pasta apps e você vai notar e também na pasta ep existe um arquivo também Bild.com Hero legal então aqui ó a gente tem também ó dentro da pasta é um Bill de ponto zero vamos lá o ponto zero aqui dentro da pasta é e agora a gente precisa encontrar por esse por essa linha que tem um The Fall to configure Então ela tá aqui e aqui embaixo a gente vai ter aqui o defunto config o ataque para

baixo passou aqui ó aqui ó ó e aqui de volto configure tá aqui tal Depois confio e aqui agora que a gente achou de foto config a gente vai adicionar aqui essas duas linhas tá bom dentro do depósito config então aqui ó só tem que tomar cuidado porque tem dois de fotos config em um outro aqui ó quer ver o shopping comprar ter ou config e É nesse daqui ó exatamente na verdade é mesa que a dentro Android dentro de foto config Tá bom a gente vai adicionar agora aqui a linha então para gente Configurar

aqui o teste o o detox em sim então vou pegar aqui vou copiar e vou colocar aqui ó bem aqui nessa parte aqui tá bom então basicamente ontem nessas duas linhas aqui dentro depois config tá dentro de Android próxima etapa no mesmo arquivo a gente vai pegar essas duas linhas aqui tá bom das duas linhas aqui e a gente tem aqui ó dependências aqui dentro um procurar aqui ó posso dar um contra você então control ver aqui no control f e eu vou colocar antes do IF Vendo ó Antes desse isso aqui é eu vou

colocar aqui esse as linhas agora do detox tá então antes desse isso aqui vou vim aqui ou selecionar essas duas linhas e vou também colocar aqui vamos fazer aquele padrão e são AD detox só pra gente lembrar que você que essas configurações foram feitas pelo detox e que também lá no depósito consegui né deixa eu pegar aqui ele também I had you O box Maravilha Então temos aqui agora as configurações beleza próxima etapa agora é criar um arquivo dentro da pasta Android fsrc e não existe essa pasta Android teste lá a gente notar Vamos navegar

deixa eu fechar esses daqui já estão ok a gente Navegar aqui a por exemplo na pasta Android api depois src e aí ela não tem essa pasta Android teste a gente vai adicionar essa pasta aqui dentro dessa pasta a gente vai criar uma Outra pasta chamada Java dentro da pasta Java uma faça chamada com e dentro da pasta com a gente vai criar uma pasta com o nome do pacote da nossa aplicação aonde a gente descobre esse nome caso você não saiba você pode vir aqui ó em beauty.com Hero ele vai geralmente fica aqui em

cima na verdade dentro do homem androidmanifest fica não cadê ele cadê ele e aqui também não beijo para tu ver do lado de fora 17.0 é no 7.0 é isso quilômetros é o nome da aplicação em cima tá então é nesse carinha aqui ela tem um outro lugar também que ele fica e deixa um mini Misaki o ponto zero Man Java me activity Aqui ó fica no Men Active Java tá vendo ó aqui no médico diabo a gente tem o nome do pacote só que neste caso a gente vai adicionar somente o nome da aplicação

não com o com vá eu vou pegar aqui bem aqui ó Androidmanifest dentro do a pasta com fechar esse monte de pasta né e vou criar uma pasta com o nome do pacote beleza e agora eu vou criar dentro um arquivo detox Teste Ponto Java tá bom esse arquivo aqui ele é o arquivo que vai ser utilizado para rodar o nosso teste lá na no dispositivo né no caso aqui no emulador do Android eu vou selecionar a todo esse arquivo posso ficar com a emcop vão control ver aqui e a gente vai mudar em dois

lugares Primeiro lugar que a gente tem que mudar é aqui trocar pelo pacote na nossa aplicação vou tirar esse comentário e vamos lá em Man é a minha aqui o diabo porque eu pego aqui ó igual tá aqui e troca aqui por esse conteúdo e outro lugar é aqui embaixo também ó tá vendo aqui a gente vai também substituir vou copiar só o teste teste e dois e e vou trocar aqui ó esse Pet aqui também vai virar para entrar no lugar aqui o teste e 2 e tá então salvei Dois lugares eu mudei aqui

primeiro lugar foi aqui né coloquei aqui o nome do pacote do PEC da nossa aplicação e aqui também aqui em baixo tá bom maravilha feito isso tá vendo por isso que eu postei por isso que eu optei Por trazer já esse arquivo mais focado nas configurações a gente ir para aquilo que realmente interessa quer fazer o teste e claro Nem vale a pena você ficar decorando essas configurações então Nem vale a pena tá bom Por isso que eu não Imagina a gente ficar digitando aqui né todas essas configurações não para gente tomar o vídeo para

os testes tem o que faz mais sentido para gente agora beleza façamos sobrevivemos as etapas de configuração legal Maravilha e agora a gente vai Inicial detox porque a gente precisa iniciar o detox quando a gente Inicial detox ele vai girar para gente quatro arquivos de configurações tá E aí esses arquivos vai ser utilizado pelo detox tá bom na verdade são três arquivo De configuração um arquivo é de teste ele gera um arquivo de teste de exemplo para gente já usar vamos lá primeira coisa que a gente vai fazer aqui deixa eu fechar tudo agora eu

já tá belezinha vou abrir o terminal vou até limpar o terminal aqui e agora vou dar esse comando aqui é o yarn detox emitir menos R7 tá bom tão yarn a detox - R na verdade nit primeiro init - r e Justin por quê Porque a gente vai iniciar agora o nosso setup de teste com O teste né ele tem uma outra opção que é um morra por exemplo para você fazer teste mas é que a gente vai usar hoje vou dar em ter Inclusive a gente já instalou de é por isso que a gente

precisa ter Onde esta instalado para fazer o teste é incoerente com detox tá vendo que ele acrescentou 4 arquivos então basicamente ele cria uma pasta aqui ó e 2 e tá vendo essa pasta ela tá até verdinha porque ela não existe ainda mas antes de falar dessa pasta tem esse Arquivo do lado de fora que é um detox RC é um arquivo de configuração e basicamente aquele traz um exemplo não tá não tá pronto tá vendo ó Ele não tá pronto tá specific to your apps Bayern Tom Ele não tá pronto esse arquivo mas é

que basicamente ele é um mapeamento da onde está o binário e vai ser utilizado para ser testado e o mapeamento de qual emulador você quer usar para fazer o teste então e aqui ó eu já vou até vir aqui eu vou copiar aqui essa parte ó Vejo também já deixei no jeito e é mais fácil a gente vim aqui substituir por isso daqui tá bom muito mais fácil a gente fazer dessa forma aqui e aí Claro vou falar dessas configurações e esse é o primeiro aqui ó ele tem um as configurações de Runner do teste

que tá dentro da pasta e dois e e a gente tem que ir a config. Seis que basicamente tem aqui por exemplo adoração um time-out do teste algumas configurações como por exemplo aonde ele Vai procurar por arquivos de teste ele vai procurar por exemplo por todos os arquivos que tenha e dois. JS né inclusive traz aqui ó um arquivo de teste chamado first best e 2 e na ele traz esse arquivo de dia exemplo até aqui para você ter aqui né para uma base um ponto de partida mas basicamente a gente tem Então já falei

ainda com fica Quanto dias não tem essas configurações é sobre os arquivos de teste time-out esse é um regex aqui Inclusive por exemplo quando você vai usar algest para fazer teste aí você tem uma por exemplo você pode ter no arquivo. Teste Ponto spec E aí ele vai esse mapear para você né mapear para você aonde os arquivos que vão ser utilizados e ou procurados pelo teste em si muito bem e a gente tem aqui o ivar me tem umas configurações com relação a ambiente em si do nosso teste e aqui no detox RC né

a gente tem aqui a Configuração do tipo Então a gente vai executar aqui no Android Emulator o Bayern PF é aonde está o binário que ele vai ser utilizado para executar fazer o teste alce a gente vem aqui ó tá dentro de Android é bem dentro aqui de aula treino nem tem a pasta bild aqui ó menor não tem a pasta bild aí você deve estar se perguntando Ah sim beleza como eu Gero abilde agora já que eu não tenho E aí que entra esse código de baixo aqui ó Na verdade essa configuração aqui Debaixo

essa bild aqui ela é uma com uma configuração Zinha para acessar pasta Android executar o ponto zero a sendo de banco é basicamente gerar um arquivo de um APK para de buggy e volta para a pasta anterior que é a pasta raiz da aplicação então primeira coisa que a gente pode fazer é gerar Então a nossa bild aqui ó vou dar um Clear aqui tá a gente pode gerar Nossa biomm Kodak um yarn o melhor isso yarn detox build menos e E Aí a gente coloca Android. E multiponto debug.exe Android emo ponte bug é o

que a gente vai então executar aqui para ele gerar que eles conseguir encontrar aqui a bild da aplicação vou dar Inter e olha que ele vai fazer e vai começar aqui o processo de gerar bild ó e você vai notar que agora apareceu dentro da pasta Sr a pasta Android ó e entra que da pasta Android dentro de ap vai aparecer daqui a pouquinho uma pasta debuild Vamos só esperar ele Concluir Claro que pode levar um tempinho essa bild e agora já tá carregando acho que vai ser rápido até deu agora agora apareceu a pasta

Beauty tá vendo ó apareceu ali a building a pasta bild e aí ele vai terminar de gerar os arquivos ele falta ele vai gerar uma pasta How much is APK de buggy e a gente vai ter ali o apk é o arquivo para a gente usar para fazer testes a nossa aplicação agora vamos aguardar ele terminar como esse processo Ele pode levar um tempinho pode levar um tempo para ser executado vou fazer o seguinte eu vou pausar o vídeo e até para não ficar esperando aqui a bild terminar e assim que terminar de Executar a

bild eu volto combinado eu vou deixar aquela executando e assim que terminar a bild eu volto estou de volta agora terminou a bild Demorou tá vendo as cinco minutos e 30 segundos é eu não ia fazer você esperar 30 por cinco minutos e 30 segundos né então os pausei Agora vamos seguir continuar com a os nossos testes aqui o show agora uma coisinha que a gente precisa que ajustar então a gente já sabe beleza que é para testar teste baseado um emulador de Android aqui é o caminho do binário e ele gerou dentro da pasta

Beauty World puts apk android teste Ou melhor aqui dentro de debug tem aqui o nosso ep debug. Apk que é esse o arquivo que ele vai usar inclusive para fazer os testes a gente tem aqui então né Esse comando Para gerar a building in se e agora a gente tem aqui a declaração de qual que é o dispositivo que a gente vai usar para fazer o teste em si e tem que ser a ver The Name Como que você descobre o seu of the name que inclusive esse não nem é o nome do meu a

vida dele ó eu vou abrir primeiro o Android Studio oi vem aqui avd Manager Tá vendo aquela em configurações avd Manager é esse nome que me interessa só que aí os espaços eu vou substituir por Underline Tá bom então ó fiz eu underline três abateu underline e ai e no meu caso é 28 e não há 29 Então coloque aí qual que é o seu avi The Name aí do teu emulador Tá bom vou fechar porque é basicamente era só isto eu precisava o calendário tá aberto aqui eu já isso calendário beleza show então já

temos aqui então a configuração Zinha perfeita e agora a gente já pode começar a que a gente já gerou abiud para o nosso teste e aí a gente já pode Executar o nosso teste em si mas antes né de executar o teste deixou marcar aqui que a configuração do nosso setup tá pronta tá bom Já estamos com a nossa configuração pronta vamos partir agora para o nosso primeiro teste bom então vamos lá primeira coisa que a gente vai fazer agora que chega a parte divertida da coisa é um primeira coisa que eu vou fazer eu

vou vir aqui na pasta e2ee tem esse first Taste legal esse first test aqui e aqui tá vendo que ele traz alguns Testes de exemplo né então basicamente a gente tem que unscribe que é como se fosse uma suíte de teste Então vamos ter mudar o nome dela então vou colocar aqui por exemplo mais fértil e dois e né o and Switch testes por exemplo né então seria a minha primeira suíte de testes Vamos colocar aqui em trem por exemplo Tá bom então você pode ter vários disco AIDS em um arquivo que basicamente ele vai

agrupar os testes não é uma forma de no Ali no na saída né no resultado final dos Testes você conseguir visualizar e os testes passaram ou falharam a grupo formas agrupado aí a gente tem aqui duas funções antes dos Testes em si só a função a gente tem que um before All basicamente esse before All ele vai ir ser executado ou seja o que tiver dentro dele vai ser executado sempre que antes de qualquer teste aqui dentro por ser executado Então antes de qualquer teste ser executado aqui vai passar pelo Before All né Tipo antes

de tudo digamos assim uma uma tradução né e basicamente que ele faz ele vai dar um Lote F lá no nosso dispositivo ele vai abrir a aplicação faz sentido para poder testar aplicação e cinco lá aplicação como usuário usando ela é precisa Abrir aplicação né Então faz total sentido Então antes de qualquer teste before All ele vai lançar vai abrir aqui neste caso um esse loud Apple ou o nosso ep lá no dispositivo o before it ele é uma função Que a executada antes em cada teste então se você tem 30 testes essa função vai

ser executada 30 vezes antes de cada teste e basicamente esse before it que ele faz ele faz um Reload na aplicação faz um calor de aplicação Digamos que você queira testar alguma coisa que tem super a ver ela e com o estado e aí você quer por algum motivo é garantir que os estados estejam no de pulso né E aí você pode fazer esse relógio da aplicação antes de todos os Testes ou de testes específicos mas é que então você já sabe agora que o before of é executado antes de qualquer teste aqui na então

neste caso ele vai ser executado para então abrir a nossa aplicação e o before it é o que é executado antes de cada teste tá bom E no caso aqui ele vai fazer um relógio da aplicação e Kit aqui cada teste eu vou apagar dois porque eu vou deixar só uma aqui tá bom E aqui eu vou colocar um o nosso primeiro teste então eu vou Colocar aqui esse nosso primeiro Oi gente já começar aí até esse kit é uma forma meio que semântica de você fazer o teste então por exemplo aqui ó e tilt

up Welcome screen então é deve existir o deve ter alguma tela de boas-vindas digamos assim né mas vamos mudar um pouco esse teste de que forma vamos fazer o seguinte vamos vir aqui no nosso src na nossa tela aqui no nosso index e vamos dar uma olhada porque a gente pode usar aqui como exemplo para executar Esse nosso primeiro teste por exemplo aqui na nossa aplicação deixa eu ter abrir ela na verdade ó eu vou abrir ela deixa eu abrir áudio novo aqui e dessa vez eu vou abrir ela de um jeito diferente tá eu

não vou abrir ela utilizando um Expo e essa é a vantagem do Berg Flor No começo eu estava executando a aplicação com o Expo eu vou executar agora ela usando as ylai como eu tô aqui no Linux primeiro eu vou rodar o bundle ou em start deixa o bando Aqui rodando um grave rodar vai começar a rodar aqui o bando e Vamo tirar um contra você fazer de novo o tanque agora foi beleza e vou abrir com uma nova abinha e é que eu vou dar olhar no Android ou seja eu vou rodar agora direto

no meu outro tio então eu não vou passar pelo pelo ex por agora como eu tinha feito no começo aqui do nosso rolê Aqui agora Vou só esperar ele executar aqui no outro positivo aplicação ele vai lançar aplicação direta aqui para os positivos como é a primeira vez que eu tô fazendo isso não isso pode também naturalmente levar um pouquinho de tempo a mais nas próximas vezes não vou até deixar ele fixa aqui o dispositivo agora só para gente olhar aqui para nossa interface e consegui visualizar o que que a gente pode usar já para

aplicar um teste aqui o nosso para gente fazer o Nosso primeiro teste aqui em trem inclusive né gente já tá nessa etapa aqui só esperar ele carregar vou fazer o seguinte vou pausar o vídeo para você também não ficar esperando aqui e na de lançar eu volto Beleza estou de volta e agora ele já tá até finalizando ele já tá em 99 passou aí pouco mais de um minuto então se não foi até até não demorou tanto como eu achei que ia demorar mais agora oi com sucesso e aí lançou ali a nossa aplicação Vamos

só Aguardar ela ser carregado isso que eu acho sensacional do Vert Flow é pode usar o Excel o posso posso posso rodar direto como seu pelas e lá e né usando direto no dispositivo a nossa aplicação agora já tá carregando ali Nossa aplicação em Beleza então olha lá porque eu vou testar aqui de cara olha que legal olha olha isso eu vou deixar aqui eu vou contar aqui do lado para gente ganhar espaço aqui na tela tá bom olha essa aqui bacana Nossa aplicação tem ali Aquela mensagem ali que é o cancel Any time of

terms of light né que é tipo de ar Pode cancelar a qualquer momento ali e enfim eu quero saber eu quero testar se essa frase para na tela olha que massa então eu vou vir aqui eu vou trocar aqui ó ao invés de usar um by aí eu vou usar aqui por um by é text por exemplo Ou seja eu vou procurar aqui e eu posso até fazer dessa forma aqui ó vou apagar aqui ó a gente pode fazer dessa forma aqui ó a gente pode criar Uma uma variável aqui eu vou chamar aqui por

exemplo de anote um pouco aqui como termos por exemplo ou informou xonadinho a vou chamar Dinho e que essa variável eu vou falar que ela vai ser igual e aí eu vou pegar aqui um elemento primeiro ao leite elementos e o elemento eu vou selecionar o elemento E aí eu posso selecionar esse elementos vai text possa selecionar o elemento pelo texto olha só que sensacional E aí eu vou selecionar esse Elemento aqui porque tá por aquilo que tá escrito que é cancel M time e a optar terms of Life eu vou selecionar por esse texto

Ou seja eu tô selecionando um elemento Olha isso eu tô selecionando um elemento pelo texto um by Text e aí eu passo aqui como um parâmetro Qual é o texto eu quero Então se lecionar olha isso que sensacional e agora todo teste ele é muito baseado numa expectativa ou seja bom eu espero Que tenha tal coisa então aqui ó eu vou mudar até a prazo ó eu espero então e chutes have info about a thing about cancel cancel submit kishan Por exemplo algo assim eu só corrigir aqui e com a forma correta de escrever pronto

então neste caso a deve ter ali uma informação sobre o cancelamento de subscrição por exemplo eu como eu disse o teste ele é muito baseado numa expectativa e eu vou estar essa expectativa da seguinte forma Utilizando aqui o ao leite eu vou colocar aqui eu espero Pet e isso eu dou um controle aqui expekt ou seja eu espero legal eu espero que esse elemento na verdade aqui eu posso até fazer o seguinte bom eu espero e info eu espero que o info e eu vou colocar aqui um two be visible Ou seja eu espero que

se alimenta que esteja visível em tela basicamente é isso ou seja eu tô selecionando aqui pelo texto o elemento tô selecionando um elemento e eu estou Usando como seletor o teste o Ou seja eu quero selecionar na tela eu quero pegar lá na minha interface um elemento que tenha essa frase aqui cancel Any time of games apply E aí eu vou quero verificar eu espero que esse elemento que esteja visível um tela olha isso Olha isso eu espero e esse elemento esteja visível em tela então basicamente é isso que a gente vai testar agora vamos

ver quanto tá o nosso teste para testar aqui no documentação eu deixei inclusive se você Quiser testar no ar e o s por exemplo da muda basicamente a esse ponto cinco ponto de bug no caso que eu vou testar usando o Android então eu vou copiar aqui vou dar ainda para ficar mais fácil aqui e agora olha só que que vai acontecer ele tem que fechar aplicação Olha isso ele já já está ficou teste ele tem que fechar a aplicação e ele Já identificou lá o nosso first test. E dois e com JS Olha lá

ele fechar obrigação ele tem que abrir ela de novo Agora porque ele vai passar pelo before All o primeiro teste ele leva um pouco mais de tempo também né depois os próximos testes vai sentir que eles vão ser mais rápidos mas ele vai passar Cola agora pelo before All um só esperar ele ó ele vai passar pelo before All pelo before it e fazer um Renault então vai Abrir aplicação vai dar um áudio ela abriu ela agora daí ele vai agora fazer eu não tô fazendo nada tô fazendo tudo sozinho o Teste para gente isso

é o teste Entendeu agora ele vai fazer o remold da aplicação ó fez um remédio e agora ele tem que finalizar o teste vamos ver se deu sucesso a lá deu sucesso tá vendo ó ele deu sucesso falando que sim tem essa frase na tela Que ver ó eu vou mudar a frase eu vou vir aqui no componentes no header no índex eu vou mudar essa frase na verdade não é no header não é lá em planos o plano info vou mudar a frase ó a frase tá aqui ó na verdade é frase tá Lá

na home e tá passando o componente Então tá aqui ó de planeio me planeia o plano e se não na verdade vamos dar uma olhada aqui info aquela inflame é vai estar lá dentro do tempo mesmo e aqui ó aqui tá frase ó cancel and time of Thrones apply eu vou tirar aqui por exemplo cancel Any time e vou deixar só After mis legal eu tirei a frase não tem Mais essa frase lá no passe interface né como a gente está testando aí a gente quer verificar se tem aqui lá na nossa interface que a

gente está testando deixa eu dormir aqui é se tem esse cancele time.of.my temos apply agora eu tirei agora a gente tem aqui somente offer a termos atuais como executar o teste ó vou rodar o teste novamente e agora esse teste ele tem que falhar porque não vai ter mais essa frase é em tela vamos até Olhar para ver se na hora que Executar a aplicação como que vai estar a nossa aplicação uma guardar ela ser executada E aí eu e ele já está executando Vamos aguardar ó ó abriu a nossa aplicação se tens um áudio

aí vai fazer um Reload nela e vai esperar ele fazer um Reload lá nossa aplicação [Música] Em nota que não tá mais a frase lá ó fez Reload e agora e vai finalizar nosso teste aqui embaixo e olha lá temos um erro ou seja não passou no teste e olha só que legal né aqui ó ele não conseguiu encontrar tão ele teve um nulo porque ele não consigo encontrar nenhuma informação em tela que tem esse esse cancel Any time of things apply até porque a gente foi lá e removeu Agora vamos fazer o teste voltar

para cá o Texto ah vou voltar o texto para cá e agora quando a gente executar esse teste ele vai ter que passar numa boa mas eu vou fazer o seguinte Antes também ó para não ficar fazendo remold toda hora eu vou comentar essa parte do relógio Porque aqui só vai me interessar mesmo Abrir aplicação tá eu quero que ele sobra aplicação que é o relógio não tem necessidade dele ficar fazendo não neste caso tá nesse nosso teste por isso eu vou deixar ele comentado mas foi bacana Porque você viu que também dá para fazer

isso aqui também no teste automatizado o relógio da aplicação Pois é que tá de novo teste e a nossa expectativa é que esse teste passe até porque a gente voltou para frase que tava lá anteriormente vou aguardar ele concluir isso que é sensacional enquanto ele tá testando aqui a nossa aplicação né de forma totalmente automática uma coisa que eu acho sensacional também do detox ele é Muito bom com o time de teste o que que eu digo com o time de teste ou agora ele vai executar ali eles ali Olá ontem nossa aplicação e ele

não vai fazer o relógio ele já vai direto já para o teste ó ó agora passou receber que tava frase lá inteira então agora passou inclusive ele já deu um teste aqui né como eu tava falando o time dele é muito bom porque o que que acontece né teste o tendão de Aquiles né O que é mais delicado é dos Testes em influentes são Os testes base e testam a usuário como se fosse usuário né simulando usuário interagindo com aplicação sempre foi que algumas ações na Maria a maior parte das ações elas são as 5

horas há sempre Quem já usou o selênio já usei Selenium em outros ambientes né e não no java script e era sempre uma dorzinha de cabeça para fazer esse time funcionar bem porque em vários não só se ele é mais várias outras Claro que não não usei mais diferente então prometi já esteja bem Mais tranquilo lidar com isso mas eu já passei por vários problemas e outros em outras lives que eram dá uma dorzinha de uma dorzinha de cabeça ali para ajustar esse time né do do do teste automatizado aguardar um clique do usuário né

simular O Clique dos olhos esperar esse clica acontecer então o detox ele é muito bom nesse time né até porque a gente usa bastante async-await aqui você pode notar então por exemplo esse teste ele é a 5 e antes da gente pegar o alimento a Gente de Claro Huawei e também aqui para fazer o teste da expectativa né daquilo que a gente espera que aconteça para que o teste eu já então finalizado com sucesso executado com sucesso então Oi gente usa o assim com ao leite Porque como a gente tá falando e testando né como

a gente está testando é interação na interface isso não acontece né de fora assim olha no exato momento né imagina usuário vai lá e por isso que eu acho legal do detox essa proximidade da Realidade então ele funciona muito bem essa questão do time dos Testes Beleza então lembra que eu falei aqui né do do nome da da suíte então agora para ti só para gente fechar bem esse assunto tá vendo que aqui ó my first Dash e dois e então ela tá aparecendo aqui em cima é esse nome que a gente declarou aqui em

cima é o nome que aparece aqui e aqui oh my Sweetest né como eu comentei e aqui embaixo a gente tem um nome a descrição do teste que é o que tá dentro aqui do Kit Beleza então isso é muito legal porque você tem uma visualização você consegue visualizar o teste que falhou o teste que passou então aqui ó eu tô vendo ó esse teste foi Ted que passou como a canção Você pode ter vários testes E aí e é legal você organizar os seus testes por arquivos e por suíte E aí fica mais fácil

bom ficamos até 30 teste um fale ou por exemplo você vai saber a esse teste de tal suíte então fica mais fácil Você encontrar aonde está aquele teste que falhou para fazer um reflexo o entender e resolver aquele teste ali Tranquilo então a gente já viu agora ao qual que é a influência onde aparece aqui né o describe E também o it E é claro a gente vai fazer mais perto daqui e inclusive vai aparecer aqui embaixo é esses outros testes ok então neste momento nós fizemos o nosso primeiro teste e agora né a gente

fez um teste bem simples e basicamente sobe ele Ficava se tinha o elemento em tela e a gente usou ali como estratégia de selecionar e de verificar se esse alimento existia na tela foi utilizando aqui o secretor de teste agora vamos avançar e vamos fazer aqui um teste é interessante e vai ser um teste baseado em interação é legal então aqui ó eu vou até vir aqui para o meu cheque lixo né para o teste baseado em interação é o que a gente vai fazer agora eu vou deixar esse teste aqui Dá até pra gente

Ter aí um exemplo legal eu vou fechar que o terminal por enquanto tá só para ganhar que espaço e tela e eu vou começar a querendo aqui então o nosso it E aí a gente precisa colocar aqui qual que vai ser o nome do nosso teste e aqui agora eu vou testar eu vou fazer o seguinte teste lá deixou deixar aplicação aqui Executar a aplicação de novo e é enquanto aplicação a na verdade eu não vou rodar lá com ex pô agora deixa eu cancelar aqui aí rodando ela Deixa eu matar o terminal acho que

é mais fácil agora eu vou adicionar mais um e agora eu vou voltar com o Android mesmo agora mais rápido né porque primeira vez que geralmente leva um pouco mais de tempo para levar rodar um pouquinho mais eu não sabia então aqui eu quero te mostrar o que que a gente vai testar né então por isso que eu tô executando aqui a nossa aplicação novamente para poder te mostrar o que que a gente vai testar mas Enquanto o nosso ep está sendo lançado vamos fazendo aqui ó então aqui a gente precisa definir é o nosso

it ou seja aquilo que a gente quer testar aqui na nossa aplicação e aqui né a descrição e aqui a gente vai colocar um assim e a função esse a gente vai executar aqui no nosso teste tranquilo e aqui neste caso a gente vai testar o seguinte a gente vai testar é usuário se inscrevendo né fazendo ali aquela etapa de inscrição então ali naquela Nossa sempre passe a Gente tem ali por exemplo as opções de plano então tem o plano básico e o plano prêmio E aí a gente vai fazer o usuário né gente faz

simular usuário escolhendo o plano Premium porque ele começa como o plano básico selecionado e tem usuário vai selecionar o plano Premium tem que digitar o e-mail dele e clicar e no botão fechar o teclado e clicar ali então no botão para poder submeter se inscrever né confirmar a inscrição dele e aí na sequência vai aparecer a Mensagem de que ele foi inscrito né de confirmação e diz querer receber foi enviado para ele o e-mail e tudo mais e aí a gente quer saber se essa mensagem apareceu para então simular que o processo o caminho deles

né de que deu tudo certo ali na hora do usuário fazer a inscrição Então vou lhe chamar aqui ó esse teste de Exu acho lhe subscribe to the Premium a planta é um Esse vai ser o a descrição é que o Título do nosso teste tranquilo e agora lá aquele vai executar agora uma explicação agora foi só aguardar que ele já vai aparecer ali e aí eu já vou te mostra inclusive visualmente exatamente o que a gente vai estar agora e pronto então vamos lá que a gente vai testar tá vendo que aqui ó tá

tem a opção de Premium que muda ali e tem a opção de vez ele vem por padrão com o beijo que selecionado Então a gente vai simular tô trocando aqui para furinho Usuário vai ter que vir aqui e digitar o e-mail dele fechar o teclado clicar no botão subscribe para então aparecer essa mensagem e essa mensagem a gente quer saber se ela existe ali Tranquilo então beleza então vamos lá então primeira coisa que eu vou fazer aqui é o seguinte eu vou selecionar primeiro um elemento tá só que agora eu vou selecionar esse elemento é

pelo Wide Então vai aí eu quero selecionar o elemento pelo Eyed tá legal E aí a gente já viu como que a Gente selecionava pelo texto por exemplo mas agora eu quero selecionar pelo aiding como que a gente definir lá no componente Wide ou no elemento em se não estiver aqui ó na screen deixa eu fechar com essa pasta componente aqui na nossa screen lan e na index e eu já meio que deixei aqui deixa eu ver se eu já deixei Eu só não deixei já deixei eu já deixei aqui aos pés aí de tá

você pode definir Isso é uma propriedade o teste aí de tá que os Elementos tem no react Native Então esse teste aí de é o Edi que ele vai procurar lá no teste automatizado para vir aqui e selecionar e usar esse elemento então eu coloquei aqui por exemplo input que é um componente eu coloquei o teste aí de input e-mail para o pressa para as opções eu coloquei por exemplo é essa daqui para o teste o teste aí é option Premium eu nem coloquei aqui por exemplo um teste aí de para o Basic você não

precisa colocar teste aí de para tudo né Coloque teste aí de ir para aquilo que você quer testar eu como eu quero testar aqui só o botão de punho meu então eu coloquei aqui um teste aí disso lá no primo enfim coloquei aqui também na frase e a frase que aparece o botão de confirmar Obrigado que é o compromisso Messenger Então eu fui selecionando colocando esses teste aí de porque agora eu posso vir aqui a selecionar então pelo Eyed então primeira coisa que eu vou fazer e agora que entra né O que é Legal do

teste do entende porque agora a gente tem que pensar a gente tem que pensar no fluxo que o usuário farinha na nossa aplicação Ou seja a gente tem que pensar como usuário para poder elaborar o nosso teste em frente então isso que é legal então vamos lá qual que é a primeira coisa que o usuário vai fazer os olhos chegou na tela usuário chegou aqui na tela com certeza ele vai selecionar o plano né então vai estar aqui com o Plano básico né ele vai querer selecionar o plano Premium Então essa é a primeira coisa

internacional o plano primo ele vai pensar bom Como que o usuário vai selecionar o plano Premium dela para fazer um teste and um teste baseado em interação principalmente então usuário e vai ter que ficar lá então Primeira coisa eu vou selecionar esse botão e é o option primo é prima eu vou copiar aqui o teste aí dele eu vim aqui e vou selecionar ele ok eu já tenho Ele selecionado eu até poderia fazer aqui ó aqui a criar uma variável né e chamar aqui por exemplo de Button por exemplo mas eu não vou fazer isso

não tá eu já te mostrei ali como você pode fazer colocando elemento numa variável a parte hoje eu vou fazer direto nos elementos tá bom para você até ver uma outra abordagem aí muito bem selecionamos então esse botãozinho aqui que é o prêmio mas agora eu preciso dizer para o teu teste e aqui que entra A mentalidade do usuário né da gente elaborar o nosso teste pensando como usuário pensando né como a gente tivesse mesmo usando a nossa aplicação Então agora eu vou pedir para ele clicar então ele já selecionou o botão eu quero pedir

para eles lá e clicar o nosso teste de clicar no botão então coloco um ponto Tap Olha que sensacional. Tap E aí ele vai estar ele vai clicar na verdade né o teste ele vai clicar lá no botão então eu selecionei o Meu botão aqui usando o option prêmio que é o Eyed de peste esse a dia é só utilizados pelo teste F and Então selecionei essa esse botãozinho de option e eu tô dando um tapa nele que é um Clique nele Ok qual que é a próxima parte do meu teste a próxima coisa do

meu teste é entrar lá naquela caixinha de e-mail é entrar na caixinha de e-mail e digitar o meu e-mail por exemplo Rodrigo a roubar e-mail pontocom super aleatório Então eu preciso entrar nessa Caixinha agora para poder digitar o meu e-mail então o que eu vou fazer vou selecionar a primeira a caixinha elemento é o input né pai aí de ir vou pegar o Eyed aqui do input quer input e-mail tá teste Eyed dele é o input e-mail eu vou selecionar ele aqui tá sempre lembrando caso não tenha importante que tem um pé e eu prefiro

usar os até sair de ir para poder selecionar os elementos tá bom e agora OK selecionei a caixinha de de texto na O meu input e eu preciso fazer eu vou dar um Tap nela porque eu preciso agora o foco nela porque o usuário ele não vai sair digitando né não não faz numa fazer sentido então depois que os olhos veio aqui selecione o prêmio beleza até mudou as informações ali ele vai clicar na caixa ele dá um Tap no text input para abrir o teclado para ele digitar então primeira coisa que a gente vai

fazer é dar um tapete aqui também no teste em que a gente mudar o foco para o texto Para o text input beleza próxima parte agora eu posso até copiar isso aqui e vou duplicar porque eu ainda vou continuar no input e-mail só que agora eu já dei um papo e nele ou seja meu cursor já tá com um foco lá no text input e que eu quero fazer agora eu quero digitar alguma coisa lá dentro então eu vou colocar aqui ó um type ó e vou passar aqui agora o que que o o nosso

teste tem que digitar lá e eu vou colocar o e-mail Rodrigo@e-mail O ponto com.br por exemplo passou um e-mail aleatório então [email protected] ou seja Olha só recapitulando primeira etapa é pensar né o teste and net ponta a ponta é pensar como usuário né seria usar Nossa aplicação primeira etapa a gente selecionou option imprimiu é esse botãozinho temos um tapa nele um clique Beleza depois a gente deu um Tap lá no input no meio selecionando também pela De que esse incuti aqui beleza uma vez que a gente está dentro do input a gente então agora colocou

um pai text para digitar dentro do do text input então a gente está digitando esse e-mail agora que que a gente precisa fazer clicar no botão mas meu caro amigo minha cara amiga o teclado tá na frente do botão que jeito que o usuário vai ficar é isso que é muito legal se a gente não levar isso em consideração dá erro no teste também então isso é muito louco que é Você testar exatamente como usuário testando então por isso antes de eu clicar no botão eu vou fazer uma leite e você selecionar também um elemento

pelo Eyed e o vou selecionar esse elemento que eu deixei aqui ó que é o Tati bold gold feedback que basicamente ele tem um press que quando ele pressionado ele vai dar um dimes do keyboard ou seja ele vai fechar o teclado e esse Tati Burigotto feedback ele tá por volta de toda a nossa aplicação de propósito para que Qualquer lugar clique fecha o teclado então eu vou pegar esse keyboard vou vim aqui e vou selecionar ele e é o teste o teste Eyed do touch bloodhound tiver e agora que eu já selecionei ele e

eu vou fazer dar um tapa nele né E aí eu vou clicar e automaticamente ele vai fechar o teclado para mim e vou salvar aqui né para a gente ter o resultado é para ir salvando eu vou fechar o teclado de um clique em qualquer lugar que chutou o teclado e agora qual que é a próxima Etapa bom já que eu já fechei o teclado né que deixar separadinho já que eu fechei o teclado agora eu quero ficar no botão Então vou em leite elemento pai a ide e agora eu quero clicar em qual botão

nesse daqui ó uma Shake o aí dele e ele aqui ó Button subscribe copiar vai dinheiro e vou colocar ele aqui ó putão subscribe tá então super importante ter um teste aí de E aí. Top não vou dar um Tap no botão e aí que que eu vou fazer De propósito Porque como test and é muito rápido só para ele parar um pouquinho pra gente conseguir visualizar o que tá rolando eu vou colocar aqui ó um é uma promessa só para ele só para dar uma atrasadinha tá vou por um time-out aqui o que pegar

com R mesmo certo time out on o rd 5000 mil segundo aí só para dar uma tá eu não depois eu vou tirar isso mas eu só para o teste executar e não fechar Tão rápido tá é só para o teste não fecha tão rápido a gente conseguir pelo menos um pouquinho tá interface pelo e agora que que eu quero fazer agora eu quero fazer o meu teste então eu quero fazer a minha meu Expert ou seja qual que é uma expectativa a minha expectativa é que apareça aquela aquela mensagem ali de que o e-mail

um e-mail de confirmação foi enviado tão vou usar o ao leite vou pegar aqui ó expert em beleza e dentro do McQueen e eu vou Selecionar um elemento ou selecionar esse elemento pelo Eyed e qual que é o aí dele vamos lá na interface e eu deixei aqui já ó é o play no note não aqui ó esse confirmation messenger Então esse conformist um Messenger aqui eu já deixei ele aqui no jeito tá aqui para o nosso Tex e eu vou eu vou colocar ele e aí que que eu quero fazer eu quero saber se

ele é two be visible Ou seja eu quero saber se ele existe na interface se existe na interface significa que deu Tudo certo e o usuário receber um e-mail de confirmação por exemplo Beleza então a gente fez aqui o nosso teste e agora elaborou o nosso teste vamos executar ele para ver se vai rolar eu vou executar agora o teste aqui com detox teste - e Android para o tempo ponto de buggy e agora qualquer expectativa a expectativa ele vai abrir e fechar o ap perfeito e aí ele vai fazer primeiro aquele teste para ver

se tem essa frase na tela agora a gente tem Dois testes Na nossa suíte aqui de testes E aí o próximo teste é o que a gente acabou de fazer ele vai primeiro selecionar o plano Premium porque vem por padrão o básico como habilitado depois a caixa de e-mail Linux Thin Cut pra digitar o e-mail vai digitar o e-mail contatec depois ele vai clicar em qualquer outra região no caso não tô tiburi igual feedback para fechar o teclado em seguida ele dá um Tap no botão para então a gente confirmar Inscrição da 17 aos 35

segundinhos só para gente ver um pouco da tela e em seguida vai para os pés e é então o desfecho do nosso teste Ou seja a nossa expectativa para que esse teste seja passado com sucesso é que ele tenha em tela a nossa interface tenha esse confirmation messenger seja visível porque por padrão ela não é visível vamos executar agora o teste ou da Inter e vamos acompanhar o nosso teste em execução e olha só já começou o teste Ali execução vir só Aguarda a ladear começou a rodar agora e Já identificou ali o nosso por

teste Já fechou aplicação vai abrir a nossa aplicação agora novamente ó Pode amarrar minhas mãos agora que leva dentro tudo tudo para a gente a gente pode acompanhar aqui que é 100sacional teste automatizado vamos aguardar ele terminar lá ele já encontrou né mas Sweetest agora ele está executando ali a nossa é The morning ali mas nem vou me preocupar agora vai executar lá já executou Nossa aplicação agora vamos só aguardar então olha que louco de colar pó Olha ela vai começar já selecionou o prêmio Olha a digitar olha minhas mãos aqui ele tá digitando agora

Fechou teclado deu subscribe parece uma mensagem sem que segundinhos e vai fechar o Pepe deixou web ou seja fez tudo automático e a gente só ficou observando o bom é que sobra mais tempo Para tomar café não acha não e está testando para você vai lá pega um cafezinho fica só olhando alí tomando um café enquanto o teste automatizado testa tudo para você sensacional Lembra que eu falei que agora apareceu dois testes aqui no agora tem aquele que a gente já tinha feito e agora a gente tem esse daqui né que é o que a

gente está testando a inscrição ele do plano né seleção do plano creme e você viu que ele começou de Fato né com o plano Básico selecionado e ele foi lá e mudou para o plano prêmio e depois então Que preencheu o campo de texto e clica no botão é muito rápido teste né a gente pode até fazer o seguinte ó eu vou copiar aqui ó esse set time-out eu vou colocar a Time out em algumas etapas então primeiro depois de selecionar aqui o botão eu vou por 17 out depois de digitar eu vou por um

outro set time-out e vou por outros e time-out aqui o para Ir pausando as etapas para gente ver com calma Bom dia a dia você não vai colocar ser time alto não né Deixa só vai porque para testar mais rápido né mas aqui por uma questão didática para você ver eu passo a passo eu tô colocando eles aqui mas claro que no dia a dia não colocaria e outra coisa também que eu vou aproveitar e fazer eu gosto de mudar o nome dos arquivos de teste e colocar no nome do arquivo até por uma questão

de organização e facilidade o que eu tô Testando então geralmente eu coloco por exemplo o nome do componente eu tô testando o componente aqui de plano e planos né que é o plan eu gosto de mudar o nome do arquivo lá também para fazer sentido é o nome do arquivo equivalente ao eu tô testando eu vou agora fechar aqui do lado e vou executar de novo e vamos só aguardar o nosso teste executar E aí como lá dentro do nosso arquivo de configuração do detox é um regex que tá lá que ele tanto faz o

nome do arquivo Que ele tá mais importante é encontrar esse padrão e dois e o nome do arquivo então ele já vai automaticamente ela já encontrou o cliente. E bom então é isso que importa para ele esse padrão estar o nome do arquivo então agora a gente vai acompanhar né bem mais passo a passo esse teste em execução porque a gente colocou aquelas Promises ali claro que eu vou tirar ela daqui a pouco mas como eu disse é só para gente realmente estar aqui então vamos Aguardar agora ele começa a rodar já encontrou ali o

nome da suíte e já encontrou o emulador e eles agora que ele lançou Então vai começar o teste agora Ó já lançou ali o nosso teste automatizado ó mãos aqui então a primeira coisa Olha mudou para o plano Prêmio tá vendo eu já mudou para o prêmio já selecionou o prêmio Agora ele digitou olha que louco pra fechar o teclado E aí deu deu aquela pausa vai fechar o teclado e agora que ele quando os principais apareceu a mensagem agora fechar a aplicação sensacional sério É sério é muito muito louco é muito top é muito

muito legal isso então agora que que eu vou fazer Claro vou tirar esse vou tirar aqui as provas né E vou tirar essas provas então ficar elas aqui Os carros aqui também para e mais rápido e eu vou deixar dessa forma aqui tá E agora a gente já fez então o nosso teste baseado em interação Ou seja a gente de fato simulou os a interação do usuário no clic né de selecionar uma caixa de texto do usuário digitar entrar com input ficar em botões em a gente já fez o teste baseado em interação a gente

simulou usuário realmente interagindo com a nossa aplicação de uma forma Totalmente automatizada e disso é sensacional agora eu quero te mostrar um outro recurso muito legal aqui do detox que é como obter screenshot mas antes né deixa até aproveitar e te mostrar uma coisa na documentação do detox se você vir aqui ó em detox ou você vem aqui ou inbox e aqui você tem várias opções bacanas mas o que é legal por exemplo e você pode olhar depois com mais tranquilidade claro né É Para uma questão de tempo é aqui ó no detox é detox

que ver outra opção aqui que se não me engano mexer aqui Matters aqui você tem né obeyed É o que eu tô usando esse aumentar um pouco mais um ó tem aqui o by a Ide por exemplo bailable by text by Type tão frente várias tem algumas opções aqui de seleção e você pode usar tá vendo na para fazer os testes e também você tem aqui ó o que é bem legal Por exemplo aqui no objeto ipiae você tem algumas opções aqui do After each do before que eu já comentei mas tem um outro aqui

e você tem as conferências aqui Action on era esse daqui ó aqui você tem algumas opções de interação por exemplo a gente Ah tá a TAP por exemplo mas você tem Perfect replace text text que é o que a gente usa para escrever uma que é muito legal por exemplo você quer simular um long-press né que é o usuário pressionando um botão por tanto Tempo olha só a quantidade de opções claro que você tem que só cuidar de algumas estão disponíveis só para iOS aqui mas você tem essas opções também para testar e interação com

a interface mas sensacional outra que eu quero aproveitar para te mostrar que tem muito legal é de como obter screenshot dos seus testes por que que cê curso é legal porque como eu te falei né E a gente já viu isso na verdade o teste é muito rápido né então ia Que bom que ele Rápido que bom que ele é rápido para testar logo e pode ser que você queira por exemplo ver é como que ficou a interface final após o teste então foi lá executou um teste executou tudo que você queria estou deu tudo

certo e aí você quer ver como que ficou o resultado final ou e eu errado e aí você também quer ver por que que deu errado enfim né então eu vou te mostrar agora um recurso muito legal que tem aqui que é para você fazer screenshot só que antes Antes disso Quê que a gente vai fazer ó a gente precisa fazer uma configuração sozinhas para poder gerar o screenshot na pasta que a gente quiser porque se a gente não fazer essa configuração ele vai colocar o screenshot na pasta raiz do projeto aí vai ficar meio

zuado meio bagunçado eu não gosto então eu vou vir aqui no detox o nosso detox RC. 21 e aqui ó logo depois do configuration a gente vai colocar aqui ó ar a de fax tá artefatos e aqui eu vou colocar um Rootdir' e basicamente aqui eu vou colocar./E dois e eu vou colocar para criar aqui dentro de uma pasta chamada artefatos tá então vai ser o meus Artefatos de testes de Gamas assim é um eu tô criando aqui esse diretório falando ele olha eu quero que você cria os artefatos de teste aqui no caso entre

a screenshot dentro da pasta e 2 e o e dentro de uma pasta de artefatos e se não ele vai gerar essa pasta na raiz do projeto e pode até virar uma bagunça Então agora vou salvar aqui vou fechar vou voltar aqui para aplicação aqui para o tep o nosso teste em sim e antes aqui de dar o resultado né de expectativa ou não eu vou usar de novo aqui uma leite tá eu sempre lembrando né como a gente está lidando com o teste isso a baseado em interação por natureza são assíncronos é um por

isso a gente usa o leite e o áudio está disponível para gente aqui graças ao assim que ali vou colocar aquela device eu quero usar Agora device e aqui a gente tem uma opção que é o take screen shot então do dispositivo eu quero tirar uma screenshot então tem Spin shot e aqui é opcional mas eu gosto de definir o nome do arquivo da escritótio tá então que você definir o nome que você quiser é porque eu gosto de colocar o nome da screenshot é conectado né que tem a ver com o que eu tô

testando então eu vou colocar por exemplo Snap shot é Premium airplanes Teste por exemplo então eu gosto de dar nomes para as screen shots os meus testes baseado naquilo que eu tô testando ela não ficar solto lá para nós vai gerar um arquivo por exemplo um nome aleatório E aí depois ficar olhando foi para que que ele se esse Snapchat né então por isso que eu gosto de dar nomes que tenham a ver com aquilo que eu tô testando mas é opcional tá esse nome é opcional mas eu vou colocar ele aqui eu vou salvar

e olha só eu vou abrir aqui Nota que não existe essa pasta ainda porque eu nem tirei nem um screenshot da aplicação a partir do momento que a gente executar o teste agora ele vai girar né quando tu chegar nessa etapa de tirar screenshot é uma foto da nossa aplicação print daí ele vai então gerar a pasta casa lá não exista nas às vezes começa a pasta já vai existir lá ele simplesmente vai substituir o arquivo e a pasta vai continuar lá tá bom então agora o nosso teste vai executar muito Mais rápido até porque

a gente tirou aquele aquelas Promise é então ele vai executar de uma forma é mais rápida e a gente quer e no final tem uma screenshot então ou seja não vou olhar me preocupar agora em acompanhar ali mas eu quero ver o que me interessa agora no final é a screenshot e vai ser gerada aqui dentro da pasta e dois aí vamos executar Então deixa eu limpar aqui e executar de novo aqui o comando detox teste mesmo ser Android com temor Ponto de boi vou dar Inter Vamos só aguardar agora a execução o nosso teste

e já tá rodando o nosso teste hein e já encontrou o arquivo né o nosso prêmio. E dois e um é só aguardar aqui ele construir E aí agora vai testar bem rápido assim ele já vai acreditar no botão já vai preencher a caixa de texto fechar o teclado e clicar no botão agora vem vai bem mais rápido e aí na sequência a Gente quer ver ao vão ficar de olho aqui vai aparecer uma pasta aqui ó já começou a preencher e dali preencher o e-mail já clicou no botão já aparece uma mensagem de Ok

e olha lá que legal temos uma pasta nós temos uma pasta aqui e a pasta de artefatos e olha só que bacana dentro da pasta de artefatos ele gera uma pasta baseada ali no nas configurações do nosso emulador eu abro aqui essa imagem e olha e sensacional a gente tem uma Foto e como tava né o momento né O time é temos uma foto do momento da nossa do nosso teste do resultado final do nosso teste Olha que sem funcionar o queijo Meu na boa é muito louco é muito da hora então a gente tem

um print né o mas com inshot da nossa aplicação aqui no momento e o teste foi finalizado nela que a gente passar ali pelo Expert conforme a gente configurou aqui no nosso teste então basicamente Esse é dessa forma que a gente consegue pegar Aqui e tirar screenshots Nossa aplicação E aí como a gente fez essa configuração aqui né no nosso detox para dizerem aonde a gente as pastas esteja né os nossos Artefatos em si a gente configurou para que esteja dentro aqui da pasta and trendy da nossa pasta e dois então dessa forma a gente

então viu como obter screenshot dos nossos testes só antes de finalizar Deixa eu só te mostrar uma coisa que eu comentei só para fechar agora com chave de ouro que É o seguinte lembra que eu falei se a gente não fechar o teclado eu não vou fechar o teclado eu vou comentar e vou executar de novo Olha eu comentei a parte do teclado E como eu não vai falhar agora o teste porque lembra que eu disse que a gente tem que fazer o teste realmente levando em consideração como se o usuário tivesse usando uma explicação

então por isso que eu acho o teste ponto-a-ponto em trem de incrível assim porque ele Força a gente ia não fazer aquele teste tão frio digamos assim né então é um teste muito próximo da realidade mesmo Claro Total automatizado não só esperar ele executar E aí a gente vai notar aqui agora ele vai nesse teste dá erro é porque eu comentei ali a parte que fecha o teclado como teclado vai estar em cima do botão ele não vai conseguir clicar no botão e aqui que tá o problema ó ele vai já selecionou o plano ele

vai preencher o e-mail daí ele vai tentar Clicar no botão Franco teclado tá na frente ó deu erro pa deu e ele nem fechou Web está vendo ele parou lá por quê que daí a gente olhar aqui olha o erro Onde está o erro no Tap porque não conseguiu clicar no botão porque o teclado está aberto e de verdade essa é uma pegadinha real real mesmo essa é uma pegadinha e pega muita gente que está começando a fazer teste em tu então já fica a dica cuida de teclados abertos os seus test and vou tirar

esse comentário Então antes de clicar no botão eu vou recolher o teclado e aí só pra gente finalizar vou executar de novo teste só para garantir que tá tudo funcionando né que tá tudo testando de forma a certinha que não tem nenhum probleminha E aí você vai vir votar aquele vai atualizar Inclusive a pasta um pouquinho né na verdade que a SnapShot em si e agora já fechou Nossa aplicação vai testar a ela nessa é que tá aí lançá-lo novamente é só aguardar ela ser Lançada [Música] já encontrou ali o nosso arquivo Já lançou Nossa

aplicação para ser testada já abriu ali agora ele vai começar com aquele processo de preencher ó selecionou o prêmio de tô lá o seu e-mail as subpastas o teclado que quando o botão aparece a mensagem e passou e aí todos os nossos testes estão passando e agora a gente olhar de novo aqui ó a gente vai ser a Nossa screenshot aqui com nitro não é na verdade ele gerou né mais de uma vez até aqui a nossa screenshot Mas não tem problema tá tranquilo Beleza então basicamente é isso que eu queria trazer para você nesse

Cordeirópolis Essa ferramenta na verdade essa ferramenta que é o detox combinada com essa estratégia que é sensacional para você fazer teste em que o ente na famoso hotel só para testar né ou melhor para automatizar os seus testes baseados em Interação na sua aplicação Espero que você tenha gostado bastante deixa aqui nos comentários se você gostou e também deixa aqui nos comentários sugestões né de temas de conteúdos é que você gostaria de ver em um próximo Cold drops para trazer para vocês sempre os os conteúdos né que fazem mais sentido e claro que elas possam

ajudar sempre a comunidade então deixa aqui nos comentários sugestões vídeos temas com é de conteúdo sair para um próximo could Drop não se esqueça de curtir de compartilhar para ajudar o máximo de pessoas possíveis também se inscrever no canal para ficar por dentro dos próximos conteúdos não só de repente Leite parte qualquer tecnologia Aqui na roça eu vou ficando por aqui um forte abraço para você muito obrigado e até a próxima E aí