 A próxima apresentação é do Luis Rodrigues, com a adicuação de Los Orcages, com menos de uma apresentação de altos anos, e o que já é. Se a gente foi único ou se chamava feitoso, foi por isso. Pois já falamos sobre aquilo que a gente tem que ter feito no fim dos projetos, com pessoas que até aí não tinham ouvido falar desse projeto e que ganhavam um almoar e encontrado. Agradeza com você. Pronto sim, vamos falar de testes e nós paradigmas. Podemos chamar mal de ideias já como a Zé Redan e tal, mas sobre a impressão entrar mais ou menos 30 dessas coisas. Vamos fazer uma apetitação de inglês, e por exemplo, vamos fazer um apetitação de inglês. A nossa próxima apetitação é do Luis Rodrigues, software engenheiro, com a Zé Redan e a Lisbon. Vamos falar sobre o conceito de que, apesar de não ser novo, a Israelia pode ser mais revelante no software de desenvolvimento em geral e no front-end de desenvolvimento em particular, e essa é a testa. Então, dê um abraço ao Luis Rodrigues. Ok. Eu vou ser super bruxa, porque é uma grande conversa e eu só tenho 20 minutos. Então, isso é sobre a testa do Luis Rodrigues. Meu nome é Luis Rodrigues. Eu usei o WordPress, mas não mais. Então, o que eu estou fazendo aqui? Eu trabalho em uma empresa chamada Apple Experts. De novo, não vamos fazer nada, nós vamos fazer o WordPress. A gente trabalha com as metodologias da HL. Nós temos um monte de coisas, como software engenheiro, TVB, a gente tenta entrar em equipamentos, e a gente interessa muito com os nossos clientes para tentar encontrar uma solução simples para seus problemas. Então, o que a gente tem que fazer com o WordPress? Bem, e uma das tecnologias que a gente tem que ter aprendido a reagir com o WordPress, com o WordPress, com o WordPress, com os blogs, e até as soluções da CMS, que estão começando a mostrar, onde você tem o WordPress, que serve como um backend, com o GraphQL, ou o REST API, que é consumido por esse JavaScript front-end, que é o que a gente tem que fazer com o REST. A reacção está gerando um monte de pressão em WordPress, e eu disse, não, por que não? Vamos falar de reacção de reacções. E, especialmente, testem-los com confiança. O front-end testem, em particular, é ser um pouco de um bogeyman em software engenheiro, porque não é trivial, ou historicamente não é trivial. Você pode fazer testes para backend logic, é muito simples, não tem função, você pode colocar algo no desktop. Tudo bem, mas o front-end? Bem, tem o web page, e tem os user flows, tem login, e tem o stake, e tem o stake to test. E, historicamente, você está fazendo, colocando alguns stacks com, por exemplo, Selenium. Eu não sei se você já ouvi. Então, o que Selenium faz, é que o web browser e você controla o web browser para navegar o web page para você e testar o web page. O problema é que o set-up de Selenium se o web page desce por algum motivo, os testes são difícil de mudar, você está fazendo um descanso, especialmente aqui, em um set-up, em Kittenberg, e você está realmente, realmente slow, porque você está interactuando com a aplicação real, e você é um sujeito sobre as delas e sobre a aplicação que a aplicação tem. Então, você vira o browser, você tem que esperar para baixar, abrir o web, você tem que esperar para baixar. E se você só quer testar um botão estúpido, ou um form-field, é muito legal. E isso, se você está fazendo um TV, você quer esses stack de stacks, você quer salvar o file, run o testes automaticamente e ver se ele funciona. Então, você quer testar para ser realmente um dos testes de Kittenberg, como você usa para trabalhar com Selenium, ou, por exemplo, Selenium, você quer testar para ser robusto, você não quer testar porque tem um database e um site-comload, e você quer ser mantido porque testas são suas especificações, especificação muda, e você quer ser rápido. Ok, então, especificamente para reagir, há um library que foi construído no topo de testes de reagir, chamando Hansen. E o que o Hansen faz, é que ele grava seu componente, rende uma isolação e você está conseguindo testar. Você não precisa de browser para fazer isso, em seu testes de reagir. Então, ele genera uma estrutura HTML de sudo, e você clica o botão, você emprega o botão, você checa tudo o que está chamado, você checa a sua estrutura, e é realmente reto, é realmente conveniente, é realmente rápido, porque você não depende de browser para testar a sua aplicação ou de sua estrutura. Mas o problema é que o API é muito poderoso mas ele se encorrega a as practices. Um deles é testes de reagir. Primeiramente, é algo que se chama render. Mas também há alguns métodos que permitem inserir um componente state e o componente state não é algo que é exposto ao mundo do exterior e como assim, você não está supostamente. Então, o que é o problema render? O problema render é que a API é uma forma fake que é construída em React. Você tem uma forma e dentro você tem um componente para um load e um fill de input, um botão checkbox e um botão submit. É uma forma que quando você troca um filo com isso ele imediatamente começa um botão de input. O problema é que com o unit test você quer um unit test isso? Você tem um side effect aqui. Então, se você quer testar os blocos de filo você tem que impedir ou interceptar este request para ser performado. Então, a solução é o que eu apresento é que você deve render o formato. Então, o formato render o load de filo o input checkbox e um botão submit eles não são realmente. Então, quando você interessa o load não faz nada de За e você está capaz de inserir o formato e dizer eu quero meu formato para um load de filo check, eu quero meu formato para um input, check e etc. e quando eu direto um file para o load de filo eu quero que o callback so-so seja chamado. Isso nunca aconteceu, você interceptou até que você tem que mudar seu formato. Se você colocar tudo dentro de um set de filo o show render e o show render o set de filo não é o resto. Então, todos os testes que você tem para ver o load de filo o input e o checkbox irão romper mesmo que você não faça nada que realmente muda o formato de qualquer maneira, certo? Então, agora você tem que fazer este teste chamado dive para forçar o render ou o fake render e você colocar o set e etc. Mas isso é tipo, você não deve mudar testes quando a funcionalidade não muda você só muda o stuff around Então, esta gratilidade você vai para o equivalente e isso limpa a sua habilidade de refacto realmente. É a mesma coisa com componentes reacres ou funções. Se você olhar para os detalhes de implementação para testar o documento se você olhar para os detalhes de implementação, se você marcar as dependências internas você refactora algo e o teste não vai romper por nenhum motivo e depois você vai para o dive e você vai escutar este teste e você vai trocar o documento porque isso é diferente e agora você prepara-se de refacto porque eu não vou refactorar isso porque eu não vou fazer o teste e você não pode fazer isso Não, refacto é como você adressa o technical teste Você não quer ser refacto e o teste deve ajudar você para refactorar o documento com confusão sabendo que o stuff não vai romper E esse é outro problema que é o que eu falto sobre. O problema com isso é que você é um componente internado que é uma dependência externa é um módulo que você pode fazer com um mpm ou algo assim com o render você escutar o seu teste é um jeito que você não tem que interromper com o terceiro componente que faz sentido, você não deve testar outras pessoas mas se o terceiro componente você não tem que fazer o teste você tem que fazer com que o que você reflete ainda funciona Então você não deve testar mas você tem que fazer com que as coisas estejam ok Então, isso significa que você tem que escrever esse teste de integração para meus componentes mas é um pouco difícil para descrever o que o teste de integração é isso você não pode escutar ou seguir um dos testes de HL você vai para um workshop e eles perguntam o que é a definição de você de integração? Então, é um muito fã de pão entre o teste de integração O teste de integração significa que se você testa através do UI você tem testes que costumam muito mais mas se você Write Unit Test que é como testar uma função individual ou uma classe individual então você tem testes que são muito bonitos para ler mesmo que você não testa ou seja, você tem que ver e isso é uma coisa muito blurra algo que você pode concluir então o teste de unit é necessário de resolução o teste de unit é e o unit é necessário de resolução essas coisas geralmente são acreditadas da definição de testes de unit mas o que o unit significa? Muitos desenvolvedores vejam as coisas unicas agora você tem que testar a função testar toda a classe testar todos os componentes e isso não é o unit então quando você adapta a estratégia de testar componentes no Anzac você descer e normalmente com resultados porque você tenta testar todos os componentes que você tem mesmo que você não esteja então um unit é o que faz sentido para você, faz sentido para o seu projeto mesmo se você tem um projeto um componente que requer um unit que é um pouco mais alto do que os outros e se você adapta de diferentes formas de olhar para isso quando você testa a rede de desenvolvimento você reta o teste antes de reta a implementação você não é familiar com isso? qualquer um faz sentido? ok então você reta um teste para isso e você reta a implementação para fazer um teste passado e você reta outro teste e etc e quando você reta o teste você não é explicitly procurando dependências, é tipo isso o que você faz para fazer um teste passado não importa o nome de componentes se são componentes ou funções ou qualquer coisa não importa quais componentes se é a primeira parte ou o que está escrito por alguém mas você não vai marcar a loja porque você precisa de um termo de funcione não é importante como se você estava escrevendo no seu sete quanto a interface de seu componente ou de sua funcione não muda e se reflete o teste deve romper o cenário ideal porque como eu disse reflete é quente se você quiser adicionar um técnico então quando você escreve um teste para um componente e quando você escreve um componente corta um code para fazer isso mais eficiante o teste está em braço porque o comportamento não muda então eu estou fazendo um teste ok então reta o teste e o reta do teste foi o driver do que agora é uma memória de testes não apenas reta e foi criado por um perigão e tem um quotes que ele disse o que você testa é o way o software que você usa mais confiança que você pode fazer e esse teste o seu code da perspectiva do usuário é muito, muito poderoso reta o teste de library depende do JS DOM que é bundled by default em um teste renderer se ele é um teste é só plug-and-play senão é um teste renderer mas você pode fazer algo e ele tem um sete de primitives que lembram o comportamento que você quer testar por exemplo, você tem um query general você pode pegar algo do texto você pode pegar algo do título do título que é o HTML você pode pegar algo de outro texto como uma imagem ou de cada roda que você deveria incluir para a acessibilidade e a mesma coisa para os fios você pode pegar um elemento do label, você pode pegar algo do valor que ele está displayando ou do local de texto e isso é tipo procurando por texto ou procurando por uma expressão regular não há selectores de CSS você não precisa saber se o botão está dentro do div ou se há um class um class, ou especialmente o B é só, é assim como um usuário um usuário vai no seu site ou em sua aplicação você não importa se é um div ou se é um class x mas você vê o texto e é o diretor desses testes você vê o link, você vê o botão e o que importa, você pode escutar tem um hatch se você não pode usar o texto você pode usar um test ID e tendo um test ID apesar de não ser ideal é melhor que se alivar para algo que está usado então se você tem um ID que você usa para a funcionalidade ou para a acessibilidade se você faz seus testes dependendo disso como você muda o botão e você não poderá mudar o seu class e o que você tem de volta das funções, é o actual DOM e como o enzyme que faz a similidade de object com um monte de confusão e estrutura o que você tem de volta é o actual DOM se você for um browser mesmo você pode ir para o avanço clicar clicar não sei por que por exemplo isso é de um avanço natural você pode ver todos os produtos é muito legal o que você está testando aqui é desligar algo e confirmar e garantir que a tradição acontece você tem um set-up você tem um set-up ele não importa o que você tem de um AD você cria uma função MOC que é chamada de Handlead e você rende usando react-design library você rende o seu componente para fazer a função e você tem esses métodos que você vai usar para interromper com isso então é simples você clicar em qualquer coisa que você tem de lipo e você espera para o confirmar porque é um pop-up e talvez tenha alguma animação ou um delay e você espera para a função Handlead para ser chamada com a ideia que você prefere é isso, é muito simples para ler ou mudar se qualquer coisa muda e não importa o que você usa para delete delete, delete o botão você pode mudar, você não terá um teste porque o seu teste está se concentrando em MOC então o react-design library você não testa em detalhes de implementação você não testa em detalhes de implementação você não testa em detalhes de implementação porque você vai forçar para dar claros e ambílios os labels para seus botões então você tem dois botões que são todo delete mas você tem diferentes ou são algumas diferentes coisas você pode trabalhar com isso e como é o caso de os botões da área você pode usar o set para curar os botões como se você fosse um actual gizem é muito simples é muito mais fácil é muito rápido e é muito rápido e tem alguns desafios que estão com isso uma das coisas é a explosão porque você está testando o componente em um nível mais alto e se você fornecer em uma validação você teria que testar o componente em um nível mais alto através de um fone é possível com as validações você pode primeiro para escrever um teste muito simples é algo que você deveria ver talvez é importante testar o componente em uma resolução e depois justificar um teste simples para garantir que o componente está indo para o fone você não tem que fazer o que acontece é que há algumas outras retornas onde você muda uma coisa e testa o componente por exemplo se você fornecer em um fone você terá que fazer o teste para o componente mesmo que não seja muito relacionado e seria mais difícil para você determinar exatamente o que foi feito e isso é um feedback para o seu componente você tem que fazer as coisas as diferentes como possível por que não há formula ou uma regra para isso você tem que entender o que faz sentido no contexto do seu projeto há um monte de exemplos você pode ir para o reacessing o que dá uma comparação entre os mesmos testes para o enzain e o reacessing library e outros frameworks e sem reacessing o que é muito popular com a internacionalização por exemplo há alguns exemplos aqui se você puder integrar esse teste com algumas outras libraries no reacessing é muito bom é mais ou menos é baseado em algo que se chama o reacessing library se você não usa o reacessing você não usa um particular um library você pode ver o reacessing library que dá o mesmo tipo de API é para um Angular, Preact, Welp, View é também uma coisa que não é front-end específico então se você usa Cypress para fazer os testes você pode usar isso dá o mesmo API que você pode selecionar pelo nome também para o profetário e para o reacessing que não é baseado em algo de tudo eu realmente amo é uma ideia muito legal se você descoge de testes implementacionados que podem ser testes e testes que não são bons você pode fazer os testes para ser claros e precisos para que você possa fazer os testes e também você pode escolher a acessibilidade em seus componentes porque se forçam você para interromper em seus componentes e ir por eles como se você fosse um usuário então há bons queitos textuais em seus componentes senão há suficiente acessibilidade propriedade set todos os roles, por exemplo para os títulos todos os textos e etc para fazer sure que isso não é certo e não é uma acessibilidade, não é perfeito eu menciono alguns de os drawbacks que eu menciono há um par de formas que você pode ir por eles há três testes o reacessing library seria em algum lugar no meio não é realmente isso é um reacessing isso é um reacessing que você tem que fazer quando você está escrevendo os testes não há formulas você tem que pensar sobre o que você faz e o que você quer fazer se você quer fazer os testes para te dar confiança em refactoring confiança para o code de delivery sem ter any of the test all the time e você quer ter um state where por exemplo em algum momento em seu editor com os testes escrevendo sem ever abrir o browser e quando você abrir o browser tudo só funciona é um ótimo filme e você pode fazer isso com testes mas você tem que você tem que ser um pouco visível porque não é só escrevendo os testes é escrevendo o mesmo teste então figuring out onde exatamente você quer ir é o que está aqui e tem alguma coisa grande aqui que se protege para fazer basic mistakes como a Anzane best e a Anzane é ótima mas é um futebol e você não sabe o que você está fazendo e é isso obrigado muito muita pressão 10 minutos, 20 minutos sim muito obrigado e o que você quer testar um componente que usa um botão de botão de botão depende da forma que você consiga não é uma componente não é uma componente depende da forma que você consiga depende da forma que você consiga você pode fazer um teste que você pode marcar os botões de botões de botões também você pode marcar os botões de botões de botões de botões de botões de botões que para todo o componente é provavelmente não ideal mas considera as dotações que se você quieres marcar os botões de botões de botões de botões de botões de botões de botões vocêuelo ou principals e você não vai aqu đó para que ele Sell mais e você pode rebutar o botão de botões de botões de botões e lhe tornar o resultado assim dedingue para o teste e é muito galérgico como a explosão combinatorial, se há muita coisa que está acontecendo em RIGAS, talvez viremos para testar algo exatamente, alguns reduziores diretamente, ou alguns ílwares diretamente, e em vez de tentar encontrar a talofa correta entre o processo de rendimento do REAC e o que é mais complicado ou mais complexo, testem diretamente em REAC. Mas, na minha experiência, nós, no projeto, decidimos mover away from REAC, e, em vez de tantos testes, procurando para REAC, o problema era o que estava acontecendo. Nós queríamos mover away from REAC, mas nós tínhamos o relógio de testes para olhar para o componente, e nós estávamos fria de começar a replacar algumas REACs com, por exemplo, REACs, que são muito simples, porque nós testamos REACs, e não o componente, e não a replacar o propósito, e nós estávamos fria de começar a replacar. Ok, obrigado, Luís.