Testando JavaScript corretamente com Mocha + ES6 + Gulp

Como desenvolvedor, muito provavelmente você já teve que escrever algum tipo de validador ou formatador, seja de cpf, data, ou qualquer que seja. Sabendo disso, você escreve seu formatador, feliz e contente, até que descobre alguma falha, ou algum caso de falha, você como todo bom desenvolvedor, escreve mais código que resolva isso, e esse ciclo permanece até o fim dos tempos, isso se durante o processo, você não precisar refatorar esse código. Pensando nisso, estou escrevendo um workflow para você escrever uma suite de testes para seu formatador com eficiência e sem medo de não conseguir os problemas que tinha resolvido antes.

Para isso, vamos utilizar babel, mocha, gulp. Se não quiser montar o ambiente do zero, você pode ver o repositório diretamente aqui: ng-mocha-test.

Primeiro vamos configurar o ambiente, você pode passar por essa etapa rapidamente só copiando o código, porém tente entender o que cada etapa faz. Digite no seu terminal npm init, e vá preenchendo os campos da forma que você quiser, depois abra no seu editor de preferência e adicione as seguintes devDependencies:

"devDependencies": {
    "babel-core": "^6.14.0",
    "babel-preset-es2015": "^6.14.0",
    "chai": "^3.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-mocha": "^3.0.1",
    "gulp-util": "^3.0.7",
    "mocha": "^2.5.3",
  }

Após isso dê npm install enquanto instala as dependências, vamos escrever nossas tasks no gulp e nossa configuração do babel, utilize a estrutura de pasta que quiser, porém nessa tutorial será utilizado a seguinte:

ng-mocha-test/
|_app/
|__formatters/
|___cpfFormatter.babel.js
|_spec/
|__cpfFormatter.spec.babel.js

gulpfile.babel.js

'use strict';
import gulp from 'gulp';
import gutil from 'gulp-util';
import babel from 'gulp-babel';
import mocha from 'gulp-mocha';
gulp.task('default', () => {
  gutil.log("Gulp is working fine");
});
gulp.task('test', () => {
  gutil.log("Running your specs files");
  return gulp
    .src('./spec/**/*.spec.babel.js')
    .pipe(babel())
    .pipe(mocha());
});

.babelrc

{
  "presets": ["es2015"]
}

Tente agora rodar gulp no terminal, o comando deve demorar mais do que o normal, já que ele irá carregar antes o babel.

Agora, vamos começar a escrever nosso formatador, ele será um formatador de cpf na qual receberá um input, e irá devolver o input formatador se for válido, ou o próprio input se não for um cpf válido.

Vamos primeiro escrever o teste, abra o cpfFormatter.spec.babel.js e vamos adicionar os primeiros testes.

"use strict";
import chai from 'chai';
const expect = chai.expect;
const should = chai.should;
const assert = chai.assert;
import cpfFormatter from '../app/formatters/cpfFormatter.babel';
const cpf = new cpfFormatter();
describe("cpf formatter", () => {
  describe("formating", () => {
    it("should return format cpf correctly", () => {
      let result = cpf.format('1111111111');
      let expectedResult = '111.111.111-11';
      expect(result).to.be.equal(expectedResult);
    });
    it("should return same cpf as input", () => {
      let result = cpf.format('11111111111');
      let expectedResult = '111.111.111-11';
      expect(result).to.not.equal(expectedResult);
    });
    it("should return a empty string if input is undefined", () => {
      let result = cpf.format(undefined);
      let expectedResult = '';
      expect(result).to.equal(expectedResult);
    });
  });
});

Com nossa primeira suite escrita, podemos começar a escrever nosso validador, iremos utilizar o class, do ECMAScript 6. Abra o cpfFormatter.babel.js.

"use strict";
export default class cpf {
    format(input) {
        let output;
        // Insira os códigos abaixo desse comentário
        
        return output;
    }
}

Vamos pensar agora como iremos fazer esse formatador baseado nos testes que temos até agora. Primeiro teste e o mais fácil de cumprir, é caso o input seja undefined, parece um caso raro, porém, pode te causar muito problema se acontecer, e não custa nada. Vamos adicionar um if para se for undefined:

if(!input) {
    return '';
}

Rode o gulp test, e veja que agora a primeira case do seu formatador está funcionando. Vamos agora à segunda mais fácil, se o input não for um cpf válido. Para simplificar as coisas, vamos considerar um cpf válido aquele que tiver 11 dígitos. Então vamos lá:

let inputChars = input.toString(); // Melhor garantir né?
if(inputChars.length === 11) {
    // Próxima sessão irá adicionar o código aqui
} else {
    output = input;
}

Rode gulp test mais uma vez, e já estamos quase lá. Falta agora só formatar o cpf, iremos utilizar o método substr, que recebe os parâmetros a posição na string, e a quantidade de caracteres.

output = inputChars.substr(0,3) + 
    "." +
    inputChars.substr(3,3) + 
    "." +
    inputChars.substr(6,3) + 
    "-" +
    inputChars.substr(9,2);

Pronto, nosso formatador está pronto com testes.

Agora que tudo está pronto, e você pode utilizar o que aprendeu aqui em outros projetos. Se você ainda assim quiser ver mais exemplos, dentro do repositório existe mais uma suite de teste. Se ainda assim você quiser mais exemplos, entre em contato comigo que posso explicar mais exemplos.

Obrigado por ter lido até aqui. Até a próxima!