Logo JavaScript

Tester du code avec Karma + (Jasmine ou Mocha)

flattr this!

Bon, ça va faire 20 ans (en octobre 2014) que les tests unitaires sont un concept publique, il va peut-être falloir s'y mettre. Non ?

Alors, on va tester efficacement avec Karma et Jasmine ou Mocha, au choix. Ou autre, vous allez comprendre plus tard.

Karma

Anciennement connu sous le nom de Testacular. C'est un outil qui va déclencher votre suite de tests, la maintenir en exécution et vous permettre de l'organiser. En gros, vous lui expliquez rapidement le contexte et vous n'avez plus qu'à vous concentrer sur vos tests.

Jasmine, Mocha, ce que vous voulez

Vous prenez n'importe quel framework de tests compatible avec Karma. Je ne connais pas de framework de test un minimum publique qui ne soit pas compatible. Personnellement j'ai un faible pour Mocha même si je m'amuse avec Jasmine en ce moment. Vous pouvez même utiliser les deux en même temps. Pratique :)

Mettre en place les tests

Alors installer Karma, ça va vite, c'est d'ailleurs très bien expliqué dans la doc : http://karma-runner.github.io/0.10/intro/installation.html

Vous l'aurez compris dans le lien ci-dessus, c'est pas compliqué. Maintenant on va expliquer à Karma ce qu'il doit faire. Pour ça il faut un fichier de configuration. Encore une fois la doc est plus que claire : http://karma-runner.github.io/0.10/intro/configuration.html

Une fois la procédure finie et le fichier généré, allez faire un tour dedans, il y a un sacré paquet de commentaires pour vous aider à comprendre. Pas la peine d'entrer dans les détails ici, encore une fois Karma se suffit à lui-même.

Ecrire des tests

Par exemple, ici, voilà un test pour un polyfill de String.startsWith :

La fonction :

(function () {
    'use strict';

    if (!String.prototype.startsWith) {
        Object.defineProperty(String.prototype, 'startsWith', {
            enumerable   : false,
            configurable : false,
            writable     : false,
            value        : function (searchString, position) {
                position = position || 0;
                return this.indexOf(searchString, position) === position;
            }
        });
    }
}());

Son test :

/*globals describe, it, expect*/

describe('Polyfills: String.startsWith', function () {
    'use strict';

    it('should exists', function () {
        expect(String.prototype.startsWith).toBeDefined();
        expect(typeof String.prototype.startsWith).toBe('function');
    });

    it('should starts with this and a position undefined', function () {
        expect('a'.startsWith('a')).toBeTruthy();
        expect('1'.startsWith('1')).toBeTruthy();
        expect('a1'.startsWith('a')).toBeTruthy();
        expect('1a'.startsWith('1')).toBeTruthy();
    });

    it('should not starts with this and a position undefined', function () {
        expect('a'.startsWith('1')).not.toBeTruthy();
        expect('1'.startsWith('a')).not.toBeTruthy();
        expect('a1'.startsWith('1')).not.toBeTruthy();
        expect('1a'.startsWith('a')).not.toBeTruthy();
    });

    it('should starts with this and a position defined at 0', function () {
        expect('a'.startsWith('a', 0)).toBeTruthy();
        expect('1'.startsWith('1', 0)).toBeTruthy();
        expect('a1'.startsWith('a', 0)).toBeTruthy();
        expect('1a'.startsWith('1', 0)).toBeTruthy();
    });

    it('should not starts with this and a position defined at 0', function () {
        expect('a'.startsWith('1', 0)).not.toBeTruthy();
        expect('1'.startsWith('a', 0)).not.toBeTruthy();
        expect('a1'.startsWith('1', 0)).not.toBeTruthy();
        expect('1a'.startsWith('a', 0)).not.toBeTruthy();
    });
});

Comme vous pouvez le voir, avec Jasmine, je me suis concentré sur le test en lui-même, pas de truc très compliqué à mettre en place avant de commencer à écrire mes tests. La doc de Jasmine est pas franchement la meilleure doc que j'ai lu. L'approche étant quelque peu originelle. J'ai dû mal à m'y faire. Mais bon, si vous n'aimez pas, vous pouvez faire exactement les mêmes tests avec Mocha/Chaï, QUnit ou je ne sais quoi.

Il suffit pour ça d'écrire vos tests dans le framework souhaité et de l'ajouter à la liste des frameworks utilisés dans votre fichier karma.conf.js.

Tester par exemple une appli Angular

Eyh t'es un marrant toi, j'ai une appli avec un vrai framework à tester. Avec des dépendances et tout, pas juste un bon vieux polyfill écrit par les mecs de Mozilla qui n'a plus vraiment besoin d'être testé. Bon vu que j'utilise Angular, exemple pour Angular. Mais il y a des exemples avec Ember notamment aussi sur le site de Karma. Sinon si vous utilisez les générateurs de Yeoman (Yo), il y a souvent des tests Karma inclus.

Bah c'est pas vraiment plus compliqué en fait. Par exemple, prenons un contrôleur banal :

/*globals angular, define */

angular.module('monApp').controller('DashboardCtrl', [
    '$scope', function ($scope) {
        'use strict';

        $scope.foo = 'bar';
    }
]);

Et son test :

/*globals describe, beforeEach, inject, module, it, expect, angular */

describe('Controller: DashboardCtrl', function () {
    'use strict';

    var DashboardCtrl,
        scope;

    beforeEach(module('monApp'));

    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        DashboardCtrl = $controller('DashboardCtrl', {
            $scope : scope
        });
    }));

    it('dashboard should be defined', function () {
        expect(scope.foo).toBeDefined();
        expect(scope.foo).toBe('bar');
    });
});

Pas plus compliqué que ça ?! Ben non, on est aux trucs de débutants. Vous avez juste à demandé à récupéré le module sur lequel vous allez tester avant chaque tests, puis à injecter un scope tout propre ainsi qu'à instancier le contrôleur. Et là vous n'avez plus qu'à écrire vos tests.

Et maintenant ?

Vous allez dans votre dossier où est votre fichier de conf karma et vous faites :

karma start

Et voilà vous avez fini, vos tests passent ou non, vous corrigez et ils eurent plein d'enfants. Euh...

flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

2 réponses à Tester du code avec Karma + (Jasmine ou Mocha)

  1. Syl dit :

    Merci Math pour cet article de qualité, comme toujours ! :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Articles liés