Présentation tests javascript

Tests d'une application Backbone avec Karma, Jasmine et Sinon avec intégration continue sous Grunt.

Transcript

1. Test-driven JS at Ledej Lunchprez 2/05/2014
2. -Radiohead « Karma police I've given all I can It's not enough»
3. Plan 1- Structure de fichiers ! 2 - Stack ! 3 - Questions
4. Structure
5. Stack • Karma : test runner (+ karma-cli) • RequireJS • Jasmine : test framework • Sinon : test utilities • Grunt-karma : integration avec grunt
6. Karma • Test runner développé par google • Vidéo de présentation : http://www.youtube.com/watch?v=MVw8N3hTfCI • Nombreux plugin dispo (browsers, frameworks, ..) : npm install karma-* • Conf : karma.conf.js
7. Anecdote Karma était appelé « Testacular » avant, mais ils ont décidé de changer de nom. Je ne sais pas pourquoi.
8. Karma.conf.js Clés importantes : • Files : fichiers qui seront servis par karma. Le flag included=false indique qu’il faudra les ajouter ‘manuellement’ (via requirejs) • Browsers : browsers utilisés pour les tests • SingleRun : tests en continu ou non
9. test-main.js • Equivalent au main.js de l’app ! • Indique les fichiers à servir, qui seront accessibles dans chaque test
10. Jasmine • Test framework ! • Facile d’accès (VS Mocha) ! • Syntaxe ~RSpec (tests ruby)
11. Jasmine : sample test describe('just checking', function() { it('works for underscore', function() { // just checking that _ works expect(_.size([1,2,3])).toEqual(3); }); });
12. Jasmine : test avec import define(['underscore', 'jquery', 'views/personal-infos'], function(_, $, PersonalInfosView) { // test import describe('just checking', function() { ! it('works for underscore', function() { // just checking that _ works expect(_.size([1,2,3])).toEqual(3); }); }); });
13. Sinon • Fake server (bug avec karma à régler cet aprem) ! • Spies (= function call monitoring) ! • Mocks
14. Sinon : test avec serveur describe('testing a fake server', function() { beforeEach(function() { console.log(sinon); this.server = sinon.fakeServer.create(); }); afterEach(function () { this.server.restore(); }); it('fakes a jquery ajax request', function() { // lets try to initialize this.server.respondWith("GET", "fake.ledej.fr/pro/api/session", [200, { "Content-Type": "application/json" }, "{ 'token': 'allez', 'awesome': 'viens', 'username': 'on est', 'channel_id': 'bien' }"]); jQuery.ajax({ url: "fake.ledej.fr/pro/api/session", // success: callback });
15. Grunt-karma • Intégré avec grunt-watch (tests lancés à chaque modification de fichier)
16. Let’s test ! karma start karma.conf.js