Um pouco mais de Protractor

Rainbow art

Ano novo, projeto novo. E no projeto onde comecei a trabalhar este ano resolvemos que novas funcionalidades só serão desenvolvidas quando todas as funcionalidades já existentes estiverem cobertas por testes automatizados. Inicialmente estou ajudando na cobertura de testes e2e, para daqui para frente trabalharemos com TDD, evoluindo a aplicação com maior segurança e confiança.

Neste projeto os testes e2e estão sendo feitos com o Protractor, visto que a aplicação é AngularJS, e muitas lições estão sendo tiradas deste aprendizado, tais como o uso de orientação a objetos com JS nos testes e a melhor escrita de hepers. Minha idéia aqui é trazer um pouco mais da minha experiência com esta ferramenta fascinante, o Protractor. Inicialmente, quero lembrar-lhes do projeto protractor-todomvc, o qual criei para meus posts sobre o Protractor e o qual utilizarei para exemplos aqui. No segundo post que fiz, onde falei sobre refatoração de testes, eu expliquei sobre o uso de helpers, para a separação de código que se repete ao longo dos testes em diferentes arquivos, para sua utilização de forma genérica, porém, naquela época acabei pecando e ferindo uma boa prática na escrita de testes, onde além da lógica repetida, coloquei o próprio teste no helper. Well. Novo projeto, novos aprendizados e novas contribuições das lições aprendidas, à comunidade! Naquela época, eu havia criado um helper que testa a adição de um item à lista de to-do, porém hoje, vou mostrar como deixar no helper só a lógica de adição do item, e o teste em si, no arquivo spec.js. O helper que antes era assim:

// todomvc.helper.js

module.exports = {  
  addTodoItem : function(item) {
    it('should add an item into the todo list', function() {
      var todoTextField = element(by.id('new-todo'));

      text = item;
      todoTextField.sendKeys(text);
      todoTextField.sendKeys(protractor.Key.ENTER);
    });
  }
};

Refatorado para conter só a lógica e não o teste propriamente dito, fica assim:

// todomvc.helper.js

module.exports = {
  addTodoItem : function(item) {
    var todoTextField = element(by.id('new-todo')),
        text = item;
    todoTextField.sendKeys(text);
    todoTextField.sendKeys(protractor.Key.ENTER);
  }
};

E o teste dentro do arquivo spec.js é retadorado de:

todomvcHelper.addTodoItem('Criar teste para completed list');

Para:

it('should add an item into the to-do list', function () {
  var text = 'Teste de digitação em campo texto';
  todomvcHelper.addTodoItem(text);
  var todoLabel = element(by.css('.view .ng-binding'));
  expect(todoLabel.getText()).toEqual(text);
});

Note que na verdade no helper anterior o teste nem mesmo havia, somente havia a ação de adição de um item à lista, sem nenhuma verificação. Esta era feita em um próximo teste (em outro it).

Outro exemplo de reforação de um helper deste mesmo repositório no github pode ser visto abaixo, antes e depois (arquivos spec.js e helper.js respectivamente).

Antes:

todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
todomvcHelper.verifyHeaderElementText('h1', 'todos');
verifyHeaderElementText : function(headerType, headerText) {
  it('should verify the text of a header element', function() {
    var typeOfHeader = element(by.css(headerType));
    expect(typeOfHeader.getText()).toEqual(headerText);
  });
}

Depois:

it('should verify left sidebar hearder', function () {
  todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
});

it('should verify left sidebar hearder', function () {
  todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
});
 verifyHeaderElementText : function(headerType, headerText) {
  var typeOfHeader = element(by.css(headerType));
  expect(typeOfHeader.getText()).toEqual(headerText);
}

A idéia aqui é disseminar algumas boas práticas na escrita de testes com Protractor e dar chance a um aprendizado evolutivo, sempre em busca da melhoria.

android evolution

Por hoje esta é minha singela contribuição. Em breve estarei explicando um pouco sobre OO em JS para testes com Protractor.

Para acesso ao código trabalhado neste post, veja github/wlsf82

Aguardo teu comentário. =D

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s