Javascript - Criando um módulo Ajax com Promises - Parte 2

E então, fez sua lição de casa proposta no post anterior? xD
Vamos então dar continuidade no nosso módulo, para que possamos trabalhar com Ajax de forma organizada, e sem depender de módulos de terceiros o/

Nosso próximo passo é testar se nosso módulo tem os métodos post, put e delete.

No arquivo tests/test.ajax.js, vamos criar um novo teste, logo após o teste do get:

1
2
3
4
it( 'Should have `post` method', function() {
  var ajax = new Ajax();
  ajax.should.have.property( 'post' );
});

Testamos agora pelo método post. É óbvio que ele não existe, mas é por isso que esse teste chama-se TDD, não? Primeiro testamos se algo existe, para que o teste falhe, e logo após, fazemos sua implementação, com o mínimo de código possível.

Vamos então adicionar no arquivo src/ajax.js, logo após o método get:

1
$public.post = function post() {};

E o nosso teste passa! Agora ficou fácil, não? Vou deixar então pra você criar os métodos put e delete ;)

Lembrando que você pode acompanhar o desenvolvimento desse módulo aqui.

Só um detalhe sobre o método delete: como delete é um operador válido em Javascript, você não pode utilizá-lo como nome de variável ou função, mas pode usá-lo como método ou propriedade de um objeto. Então, vamos nomear nossa função somente como del, no arquivo src/ajax.js:

1
$public.delete = function del() {};

Assim não teremos problemas ;)

Certo, e qual é o próximo passo?

Ainda não testamos o retorno dos nossos métodos. Ainda dentro dos testes de interface do nosso módulo, precisamos garantir que eles retornem os métodos done e error. Esses métodos ainda não precisamo funcionar, só precisamos ter certeza que eles serão retornados, já que estamos falando de Promises :)

Criaremos um novo teste então, verificando se o nosso método get retorna esses dois outros métodos. No arquivo tests/test.ajax.js:

1
2
3
4
5
it( 'Should `get` method return `done` method', function() {
  var ajax = new Ajax();
  var getRequest = ajax.get();
  getRequest.should.have.property( 'done' );
});

Testamos primeiro pelo método done. Ele ainda não existe, logo nosso teste falha. Vamos então criá-lo:

1
2
3
4
5
$public.get = function get() {
  return {
    done: function done() {}
  };
};

É só isso? Retornar um método done vazio?

Sim! Não é isso que o nosso teste pede: um método done? Então é isso que damos a ele :)

Precisamos sempre pensar simples, para dar somente o código necessário que o nosso teste precisa, e fazê-lo passar. A funcionalidade do método será feita depois, logo, ela será testada depois, então não precisamos nos preocupar com ela agora.

Dessa forma você mantém seus códigos com o mínimo de código possível, fazendo com que tudo fique tão limpo quanto possível :D

Agora precisamos testar o método error. No arquivo de testes test/test.ajax.js, vamos fazer a asserção para esse método:

1
2
3
4
5
it( 'Should `get` method return `error` method', function() {
  var ajax = new Ajax();
  var getRequest = ajax.get();
  getRequest.should.have.property( 'error' );
});

Então, escrevemos o código para que nosso teste passe. Em src/ajax.js:

1
2
3
4
5
6
$public.get = function get() {
  return {
    done: function done() {},
    error: function error() {}
  };
};

Adicionamos o método error, para que seja retornado por get e nosso teste volta a passar!

Mas e os outros métodos?

Então, todos os nossos métodos precisam retornar os mesmos métodos done e error. Vamos agora testar próximo método, post, para que ele também retorne as Promises done e error. Começamos por done. No arquivo tests/test.ajax.js:

1
2
3
4
5
it( 'Should `post` method return `done` method', function() {
  var ajax = new Ajax();
  var postRequest = ajax.post();
  postRequest.should.have.property( 'done' );
});

Nosso método post também deveria retornar done - assim diz o teste, que por sinal, falhou. Vamos então fazê-lo retornar o método done. No arquivo src/ajax.js:

1
2
3
4
5
$public.post = function post() {
  return {
    done: function done() {}
  };
};

E nosso teste volta a passar! Mas perceba uma coisa: o retorno do método post é exatamente igual - ou está se encaminhando para ser igual - ao retorno do método get. Como todos os nossos testes até aqui passaram, vamos parar de criar funcionalidades e aplicar o BLUE, fazendo um refactory. No arquivo src/ajax.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Ajax() {
  var $public = {};
  var $private = {};

  $public.get = function get() {
    return $private.promises();
  };

  $public.post = function post() {
    return $private.promises();
  };

  $public.put = function put() {};
  $public.delete = function del() {};

  $private.promises = function promises() {
    return {
      done: function done() {},
      error: function error() {}
    };
  };

A função Ajax do nosso módulo agora ficou um pouco mais limpa: removemos a duplicidade do código, criando um método $private.promises, que retorna os métodos da Promise - done e error.

Deixamos o método promises() no objeto $private, pois não precisamos que ele seja acessado através da interface do nosso módulo. Ou seja, ninguém conseguirá chamar assim:

1
2
var ajax = new Ajax();
ajax.promises();

Isso irá retornar um erro dizendo que undefined is not a function, pois o método promises() não é público :D

Agora só precisamos criar os outros testes de Promises para os outros métodos put e delete, para manter tudo documentado.

Como você pode perceber, o resultado dos nossos testes, além de garantir que tudo está funcionando, acabam servindo como documentação do nosso código. Não precisamos usar comentários dentro do módulo para dizer o que cada coisa faz, já que os testes já o fazem por nós :D

Quando alguém ler o resultado dos testes, ele saberá exatamente quais são os métodos disponíveis para uso!

Já temos os testes para toda a nossa interface pronta, mas a continuação ficará para o próximo artigo. Até lá!

Dúvidas até aqui? Comente :D

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1