Escrever especificações de ponta a ponta é sempre interessante e divertido. Sem falar que é necessário tornar o processo de refatoração de código mais seguro – atuam como detectores de falhas. Freqüentemente, esses cenários são a única documentação de recurso na base de código.
No entanto, também enfrentamos um inconveniente: às vezes, demoramos muito para obter uma configuração de dados suficiente, bem como para lidar com as dependências CSS e inúmeras alterações feitas em CSS e HTML. Da mesma forma, pode não ser tão fácil escrever um código legível e sustentável ao mesmo tempo.
Teste ponta a ponta com AngularJS: dicas e truques
Felizmente, esses problemas podem ser resolvidos. Hoje, queremos falar sobre algumas técnicas simples que você pode usar para gerenciar os aspectos mencionados acima. Inicialmente, esses cenários foram escritos para o Protractor, mas eles correspondem perfeitamente a qualquer outra estrutura de teste com a qual você gostaria de trabalhar.
Veja um exemplo simples de marcação com especificações relacionadas abaixo. Agora, vamos tentar atualizá-los.
Testando atributos especiais separadamente
Os desenvolvedores geralmente trabalham separadamente com componentes CSS ou HTML e AngularJS. Como consequência, muitas dependências de especificações ocorrem enquanto as alterações de marcação estão sendo feitas. Na verdade, esse é um grande problema que quase todas as equipes enfrentam. Por exemplo, quando um engenheiro de front-end altera o nome da classe do utilitário ou usa uma classe diferente de acordo com as alterações do CSS, ele pode quebrar as especificações por acidente.
Claro, você pode corrigir esse problema monitorando constantemente os seletores de especificações de ponta a ponta, mas isso não é realmente conveniente – você precisa verificar qualquer alteração de marcação feita. Outra maneira é aplicar a semântica de modelo estável a todos os componentes. Mas isso também requer muitos esforços. Em nossa opinião, a solução é ter um atributo específico usado apenas por uma estrutura de teste:
Bem, esses atributos em torno da marcação podem parecer desatualizados. Por outro lado, essa técnica nos traz uma série de vantagens. Vamos dar uma olhada:
- cada elemento tem um nome específico e significativo;
- torna-se mais fácil e seguro aplicar alterações de marcação;
- as especificações não dependem mais das alterações de CSS.
Gerenciando objetos de página e componentes
Objetos de página são comumente usados na escrita de testes ponta a ponta. Graças a ele, os exemplos de especificações tornam-se muito mais convenientes para reutilizar e manter. Veja como objetos de página simples são definidos para especificações abaixo:
Agora, os exemplos de teste parecem muito mais limpos sem os seletores CSS.
Um decorador agora é definido como:
Como resultado, temos exemplos de especificações totalmente reutilizáveis que não dependem de nenhuma alteração de CSS, bem como uma DSL funcional que define classes de página ou objetos de componente. Agora você sabe como facilitar seus testes de ponta a ponta.
Artigo escrito por Desenvolvedores de Ruby on Rails da empresa Rails Ware – empresa de terceirização localizada na Ucrânia, EUA e Polônia.
0 Comments