Testando

com

NodeJS

NodeBR - 30 Agosto, 2014

Pipetadora

Mas porquê?

Javascript


Liberdade


Problemas

Esforços

Para

Melhorar

Padrões, Bibliotecas, Testes

Teste,

"Compara o estado e comportamento do produto contra oráculos"

Para quê?


  • Feedback

  • Design

  • Docs

  • Incerteza

  • Regressões

Base: Mocha + Chai

  • Logo Mocha
  • Logo Chai

Criamos o Teste

describe('Calc', function() {
  var calculadora;

  it('é instanciavel', function() {
    calc = new Calc();
    expect(!!calculadora)
      .to.equal(true);
  });
});
              

Criamos seu construtor


function Calc () {}

module.exports = Calc;
              

Teste Soma


describe('.soma', function () {
  it('deveria somar', function() {
    var obtido = calc.soma(5, 2);
    var esperado = 7;

    expect(obtido)
      .to.equal(esperado);
  });
});
              

Func. Soma

Calc.soma = function(a, b) {
  return a + b;
};
              
Func. Mult Async

Calc.mult = function (a, b, cb) {
  setTimeout(function () {
    cb(null, a * b);
  }, 500);
};

              

Teste Mult Async

it('deve mult', function(fim){
  var esperado = 6;

  calc.mult(2, 3, function(e, res){
    if (e) fim(e);

    expect(res)
      .to.equal(esperado);
    fim();
  });
});
              

E nos browsers?

Logo Mocha

mocha-index.html


<div id="mocha"></div>

<script src="calculadora.js"></script>
<script src="chai.js"></script>
<script src="mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script src="test-calculadora.js"></script>

<script>
  mocha.checkLeaks();
  mocha.globals(['Calc']);
  mocha.run();
</script>
              
Teste HTML Mocha

Automatizar --> Karma

Logo Karma

Config Karma


config.set({
  frameworks: ['mocha'],

  files: [
      "chai.js",
      "calculadora.js",
      "test-*.js"
  ],

  browsers: ['Chrome',
             'Firefox',
             'PhantomJS'],
});
              
Teste HTML Mocha

jQuery --> SinonJS

Logo SinonJS

Calculadora Client


Client.get = function(data){
  return $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/multiplica',
    data: data
  });
};
              

Como testar o $.ajax sem servidor?

Sinon SPY!

Antes: Prepara o Spy


beforeEach(function () {
  sinon.spy($, 'ajax');
});
              


Depois: Limpa o Spy


afterEach(function () {
  $.ajax.restore();
});
              

Chamou?


it('deve chamar ajax', function(){
  calc.get({});

  expect(jQuery.ajax.called)
    .to.equal(true);
});
              

e o URL?


it('deve acertar url', function(){
  calc.getResult({});

  var esperado = '/multiplica';
  var obtido = $.ajax.getCall(0)
                  .args[0].url;

  expect(obtido).to.equal(esperado)
});
              

E2E --> Protractor

Logo Protractor

Config Protractor


exports.config = {
  framework: 'mocha',
  specs: ['spec.js',],
  capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
        'args': [
          'incognito',
          'disable-extensions',
          'enable-crash-reporter-for-testing'
        ]
    }
  }
};
              

E o teste em si?

Prepara e testa Titulo


beforeEach() ->
  browser.get('/passos/5');
  browser.ignoreSynchronization = true;

it('deve acertar titulo') ->
  expect(browser.getTitle())
      .to.eventually.equal('Titulo');
              

Emite cliques e verifica


it('clica e numero aparece') ->
  var tecla1 =
    element(by.css('SELETOR1'));
  var tecla2 =
    element(by.css('SELETOR2'));
  var teclaMult =
    element(by.css('SELETOR_MULT'));

  tecla1.click(); teclaMult.click();
  tecla2.click();

  expect(element(by.css('SELETOR_TELA'))
      .getAttribute('value'))
        .to.eventually.equal('1*2');
  });
              

Todo o código aqui é testável!

Logo do GulpJS

Vocês também podem contribuir!

bit.ly/nodebr-testes

Obrigado!



github.com/cirocosta/talks

@cirowrc