Tests Javascript

Les testes unitaires sont devenues une nécessité dans nos projets de développement. Aujourd'hui, j'ai pris un peu de temps pour apprendre à tester du code Javascript. Il existe pléthore de framework javascript de test. J'ai choisi d'apprendre QUnit qui est le framework de test utilisé par JQuery et JQuery UI. Il permet essentiellement de faire des testes unitaires, et non pas des testes d'intégrations comme pourrait le faire Mocha, Jasmine, Karma, Protractor.

Exemples QUnit

Exemple d'un test unitaire avec QUnit :


QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

Exemple d'un test unitaire checkbox de JQuery UI :


test("checkbox", function( assert ) {
  expect( 4 );
  
  var input = $("#check"),
  label = $("label[for=check]");
  ok( input.is(":visible") );
  ok( label.is(":not(.ui-button)") );
  input.button();
  assert.hasClasses( input, "ui-helper-hidden-accessible" );
  assert.hasClasses( label, "ui-button" );

});

Pour tester entièrement du code Javascript, il est indispensable de pouvoir simuler des évènements Javascript. jquery-simulate permet de simuler ces évènements du navigateur. Elle est utilisé dans les tests unitaires de JQuery UI :

Exemple de test unitaire avec jquery-simulate :


QUnit.test('s', function(assert) {
  expect(5);
 
 var target = $("#resizable1").resizable({
  handles: "all"
 });

 var handle = $("#resizable1").find(".ui-resizable-s");

 handle.simulate("mouseover").simulate('drag', { dx: 0, dy: 20, moves: 1});
 equal( target.height(), 120, "compare height" );

 handle.simulate("mouseover").simulate('drag', { dx: 0, dy: -50, moves: 2});
 equal( target.height(), 70, "compare height2" );

 equal( target[0].style.top, "", "top should not be modified" );
 equal( target[0].style.left, "", "left should not be modified" );
 equal( target[0].style.width, "", "width should not be modified" );

});