Como testar, compilar e automatizar o ES6 - Babel, Gulp, QUnit e JSHint ajudam nessa tarefa!

Publicado em 31 de agosto de 2015 às 19:06

Neste post, você aprenderá a melhorar a qualidade de seu ES6, utilizando ferramentas para testar e verificar a qualidade do código, concatenar todos os scripts em um único arquivo, gerar um "mapa" para debugar o código e realizar os testes unitários.

Se você já utiliza TDD no seu dia a dia, verá como é fácil fazer isso com essas ferramentas. Se não, será uma boa hora para aprender.

Entenda o papel de cada ferramenta que utilizaremos:

Gulp será responsável por rodar o "transpiler" e automatizar os testes.

Babel irá transformar nosso script em ES6 para ES5 (para rodar em browsers comuns).

JSHint irá verificar a qualidade do nosso código.

QUnit será responsável por realizar os testes unitários.

Sourcemap para facilitar o entendimento do 

código compilado.

Configurando

Caso ainda não tenha o Gulp instalado na sua maquina, acesse o site oficial (http://gulpjs.com/).

Com o Gulp instalado, vamos utilizar o NPM para baixar nossas dependências. Para isso, vamos criar o arquivo package.json:

{
"dependencies": {
"gulp": "*",
"gulp-sourcemaps": "*",
"gulp-babel": "*",
"gulp-jshint": "*",
"jshint-stylish": "*",
"gulp-concat": "*"
},
"devDependencies": {
"gulp-qunit": "*"
}
}

Depois de criado o arquivo no nosso projeto, iremos rodar o comando npm install

Depois de o NPM baixar nossas dependências, iremos criar nosso arquivo de configuração do Gulp.

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");
var qunit = require('gulp-qunit');

gulp.task('watch', function() {
gulp.watch('./babel/*.js', ['babel','qunit','jshint']);
});

gulp.task('qunit', function() {
return gulp.src('./qunit/test-runner.html')
.pipe(qunit());
});

gulp.task('default', function() {
gulp.src('js/babel.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('jshint-stylish'));

});

gulp.task('jshint', function () {
gulp.src('babel/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('jshint-stylish'));
});

//es6
gulp.task("babel", function () {
return gulp.src("babel/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat("babel.js"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("js"));
});

Iremos criar tbm o arquivo de configuração do JSHint.
.jshintrc
{
"esnext": true,
"browser": true,
"esnext": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"undef": true,
"trailing": true,
"smarttabs": true,
"globals": {
"console": true
}
}

 

Obs: Esse arquivo deve ser montado conforme sua preferência, apenas o esnext deve ser marcado como true.

Por fim, iremos criar nosso teste com QUnit.

Iremos criaremos uma pasta chamada qunit e dentro dela o arquivo test-runner.html.

test-runner.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>QUnit Example</title>
 <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
 <div id="qunit"></div>
 <div id="qunit-fixture"></div>
 <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
 <script src="../js/babel.js"></script>
 <script src="tests.js"></script>
</body>
</html>

QUnit Example

Abrindo no browser, devemos ver a seguinte tela:

Seguindo o TDD,  primeiro escreveremos nosso teste.

Escrevendo o teste

Agora é a hora de realizarmos nosso TDD.

Dentro da pasta qunit iremos criar o arquivo test.js.

teste.js

QUnit.test( "Testando a classe calc", function( assert ) {

//set

//expect

//assert

});

Para entender como funciona, iremos criar o teste de uma classe que deverá fazer alguns cálculos, apenas soma e multiplicação, o resto fica com você =).

Nosso teste então ficará assim:

QUnit.test( "Testando a classe calc", function( assert ) {

calc = new calc(2,3);

mult = calc.mult();

ssert.ok( calc.mult() == '6', "Mult deve retornar 6" );

});

Ao acessar novamente o test-runner.html devemos ver o seguinte erro:

Isso é o que esperávamos, pois ainda não temos nossa classe e métodos.

Escrevendo nossa classe, compilando e testando:

Agora devemos voltar ao terminal e digitar grunt watch

O Grunt ficará observando nosso projeto e buscando por alterações nos nossos arquivos.

Iremos criar nossa classe usando a sintaxe do ES6, utilizando um construtor.

Salvaremos nossa classe em babel/calc.js

calc.js

class calc{

 constructor(x, y) {

   this.x = x;

   this.y = y;

 }

 mult() {

  return this.x*this.y;

 }

 somar() {

  return this.x+this.y;

 }

 }

Nesse momento, o JSHint irá verificar nosso código, o Babel irá compilar para ES5 e o QUnit irá retornar nossos asserts.

O resultado deve ser:

Podemos ver o resultado no terminal do nosso teste.

Se voltarmos a acessar nosso test-runner.html, iremos ver a seguinte tela:


Nesse momento, já podemos criar novos arquivos, novas classes e todas elas irão para o arquivo js/babel.js.

Você também pode usar os novos recursos disponíveis no ES6/ES2015 e não se preocupar com os browsers antigos.

Você ainda pode usar o Sourcemaps para debugar melhor seu código =)

Caso fique alguma dúvida, pode baixar o projeto em https://github.com/eleaga/babel-gulp-config.

Boa sorte!

 

Fontes:

https://babeljs.io/

http://qunitjs.com/

http://gulpjs.com

https://www.npmjs.com/