Teste ponta a ponta com AngularJS: dicas e truques


0

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.

publicar

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:

2

Agora, os exemplos de teste parecem muito mais limpos sem os seletores CSS.

3

Um decorador agora é definido como:

4

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.


Like it? Share with your friends!

0

What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win

0 Comments

Your email address will not be published. Required fields are marked *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format