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
`
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:
