Tester son code JS dans tous les navigateurs ... automatiquement ! – Tester son code JS... – Une TODO list



Tester son code JS dans tous les navigateurs ... automatiquement ! – Tester son code JS... – Une TODO list

0 0


confJs


On Github b2l / confJs

Tester son code JS dans tous les navigateurs ... automatiquement !

Nicolas MEDDA - Christophe PROMÉ

Home

Tester son code JS...

Parce que lorsque l'on se rend compte d'un bug alors que le produit est en production depuis 2 semaines, c'est pas très cool. Exemple : poney rose de google Flèche BAS

... dans tout les navigateurs ...

Dans tout les browsers ? bcp de browsers sur le marché, pas facile

... dans tout les navigateurs ...

source : caniuse.com

Christophe

... automatiquement

Christophe

Live coding

Une TODO list

En TDD

le TDD c'est quoi ?

Test unitaire

  • Tester une chose et une seule

  • Ignorer le reste du monde

Outils

Framework

Asserter

Chaijs : BDD (behavior driven development)

Test d'intégration / UI

  • On agit sur le DOM
  • Assertion sur l'état du DOM
  • Dans un browser

Outils

Runner

Framework

Asserter

e2e

  • On intègre le serveur

Outils

Maintenant qu'il y a un serveur...

  • TODO

stub

function Store() {}
Store.prototype.findAll = function() {
    console.log('je suis la vrai methode findAll');
}

store.findAll();
// => je suis la vrai methode findAll
sinon.stub(store, 'findAll').yields('Je suis le stub de store.findAll');

store.findAll(); // => Je suis le stub de store.findAll

// Équivalent à
store.findAll = function() {
    return 'Je suis le stub de store.findAll';
};
C'est l'heritage prototypal en javascript qui permet de redefinir une methode directement au niveau de l'instance Lors de l'appel à la methode findAll, le moteur JS commence par regarder si l'objet contient une propriété, sinon, il regarde si elle existe dans le prototype. S'il ne la touve pas, il remonte au prototype parent et ainsi desuite.

mock

var store = new Store();
var model = new Model(store);

var mock = sinon.mock(store);
mock.expects('findAll').once();

model.all();

mock.verify();
// On s'assure que la méthode all de model a bien appelé
// la methode findAll de store;
Le mock impémente toutes les fonctionnalitées de Spies et Stub, mais il permet en plus de faire des assertions: paramètres passé, nombre d'appel à la méthode etc...

fakeServer

var server = sinon.fakeServer.create();
server.autoRespond = true;
server.respondWith('GET', '/elements', [200, {
    'Content-Type': 'application/json'
}, '["elem1", "elem2", "elem3"]']);

Store.findAll = function() {
    xhr.get('/elements' ...);
}

var store = new Store();
store.findAll();
// => L'appel xhr dans la methode recevra les données définie
//      dans server.respondWith
Mocha http://visionmedia.github.io/mocha Chai http://chaijs.com Sinon http://sinonjs.org Testem http://github.com/airportyh/testem Karma http://karma-runner.github.io CasperJS http://casperjs.org DalekJS http://dalekjs.com Effroi http://github.com/francejs/effroi http://github.com/b2l/testerSonCodeJsAutomatiquement bliblablou

Merci !

Et testez bien !

bliblablou