Testez l'interface de votre site

Dans le dernier chapitre, vous avez écrit votre premier test ainsi que des petits morceaux de code un peu absurdes (comme la fonction  rollMany , qui techniquement n'existe encore nulle part). Vous l'avez fait dans le fichier  BowlingGameSpec.js  dans le dossier  spec  . 

Maintenant vous allez écrire le code JavaScript qui accompagnera votre test ! 💻 # JS4ever

Ouvrez le fichier que vous avez créé qui s'appelle  BowlingGame.js  (dans le dossier  src  de votre répertoire Jasmine).

Pour rappel, voici le contenu de votre fichier test :

describe("Bowling game", function() {
    
    it("should properly calculate a gutter game", function() {
        rollMany(20, 0);
        expect(game.score()).toEqual(0);
    });
    
    it("should properly calculate a strike", function () {
        // test
    });
    
    it("should properly calculate a spare", function () {
        // test
    });
        
});

Exécution de votre test

Vous avez écrit le test mais vous ne l'avez pas réellement exécuté ("run" en anglais) pour voir s'il passe ou s'il échoue.

Si vous l'exécuté maintenant, normalement, il devrait échouer puisque vous n'avez pas encore écrit de code pour le supporter. Souvenez-vous qu'en TDD, il est important de d'abord voir votre test échouer avant d'écrire votre code. 

Ouvrez le fichier  SpecRunner.html  inclus dans le package Jasmine standalone ou dans les fichiers que vous avez téléchargés au début de la deuxième partie du cours.

En vue du test ci-dessus, nous savons que nous devons définir plusieurs notions dans notre code JavaScript.

• L'idée d'un  BowlingGame 

• Une fonction pour lancer la balle, ex.  roll  ou  rollMany 

• La notion de  game 

• La notion de  score 

Par exemple, introduisez la notion de  BowlingGame  en premier. C'est aussi simple que d'ajouter le code suivant à votre fichier  BowlingGame.js  :

var BowlingGame = function() {
};

Actualisez la page  SpecRunner.html . Maintenant, vous verrez :

Ok,  game  n'est pas défini. Définissez-le. Facile !

Nous savons qu'il va falloir créer un nouveau  game  dans chaque test parce que sinon, tous les résultats de tous les matchs seront combinés, même si nous devons tester qu'un seul match à la fois. Pour faire ça nous pouvons configurer un peu les tests.

Dans le fichier  BowlingGameSpec , ajoutez une ligne au-dessus de vos tests qui dit de créer une nouvelle instance de  BowlingGame  pour chaque test et de l'assigner à la variable  game .

Dans  BowlingGameSpec  (votre fichier de test):

describe("BowlingGame", function() {
	var game;

	beforeEach(function(){
		game = new BowlingGame();
	});
// ...

Enregistrez vos modifications et actualisez  SpecRunner.html  à nouveau.

Vous avez maintenant une autre erreur qui dit que  game.roll  n'est pas une fonction ("TypeError: game.roll is not a function").

Cela signifie que  BowlingGame  a besoin d'une fonction qui s'appelle  roll  et qui définit l'action de lancer la boule. Définissez-la dans le code, relancez le test, et voyez quelle erreur vous obtenez ensuite.

Répétez ce cycle (voyez une erreur, ajoutez votre code, et re-éxécutez le test) suffisamment de fois et votre fichier  BowlingGame.js devrez finir par ressembler à ça : 

var BowlingGame = function() {
    this.rolls = [];
    this.currentRoll = 0;
};

BowlingGame.prototype.roll = function(pins) {
    this.rolls[this.currentRoll++] = pins;
};

BowlingGame.prototype.score = function() {
    var score = 0;
    var frameIndex = 0;
    var self = this;

    function sumOfBallsInFrame() {
        return self.rolls[frameIndex] + self.rolls[frameIndex + 1];
    }

    for (var frame = 0; frame < 10; frame++) {
        score += sumOfBallsInFrame();
        frameIndex += 2;
    }
    return score;
};

Et  BowlingGameSpec.js  devrait ressembler à ça :

describe("BowlingGame", function() {
    var game;

    beforeEach(function(){
        game = new BowlingGame();
    });

    function rollMany (n, pins) {
        for (var i = 0; i < n; i++) {
            game.roll(pins)
        }
    }

    it("should handle a gutter game", function() {
        rollMany(20, 0);
        expect(game.score()).toEqual(0);
    });
    
    it("should properly calculate a strike", function () {
        // test
    });
    
    it("should properly calculate a spare", function () {
        // test
    });

});

Vous avez écrit suffisamment de code dans vos fichiers  source  et  spec  pour effectuer votre premier test. Regardez comment tout est vert dans  SpecRunner.html  ! ✅🍏📗💚

Maintenant, vous pouvez avancer sur l'écriture du code pour votre deuxième test :

it("should properly calculate a strike", function () {
    // test
});

Vous écrirez le code associé aux strikes tout en étant sûr(e) de ne pas casser votre code existant. Vous saurez que vous avez cassé quelque chose dans un test précédent si un test qui passait avant commence à échouer.

Voici le cycle TDD classique :

1. Écrivez un test basique.

2. Exécutez le test.

3. Écrivez le code le plus simple possible pour corriger la première erreur associée avec ce premier test.

4. Exécutez le test.

5. Écrivez le code le plus simple possible pour corriger l'erreur que vous voyez.

6. Répétez jusqu'à ce que tous les tests passent.

Ensuite, vous allez remettre en pratique tout ce que vous venez d'apprendre dans une activité : créez un magasin de bonbons ! 🍬🍭🍫