Lab7 Player

#Lab 7 - Coder la vue Player

Objectif

Coder la vue Players du jeu

Vous allez :

• Utiliser yeoman pour créer le squelette
• Utiliser Karma en autotest
• Coder la vue, le contrôleur et le test du contrôleur

Préparation

Allez dans le dossier /vagrant/yeomanlab.

documentation

• https://github.com/yeoman/generator-angular
• http://jasmine.github.io/2.1/introduction.html

Créer la route player

Utilisez yeoman et le générateur angular:route pour créer la vue, le contrôleur et la route. La vue Player doit s'afficher lorsque l'on utilise l'url http://localhost:9000/player.

Solution :

$ yo angular:route player

Accéder à la vue

Démarrez le serveur avec Grunt et vérifiez le code généré.

Modifiez manuellement le menu dans index.html pour remplacer le menu Contact par un menu Players qui amène l'utilisateur sur la vue que vous venez de créer.

Vous devez voir "This is the player view."

Solution :

La route est

      .when('/player', {
        templateUrl: 'views/player.html',
        controller: 'PlayerCtrl'
      })

Vous devez avoir ce menu dans index.html

          <li><a ng-href="#/player">Players</a></li>

L'url d'accès à la vue est http://localhost:9000/#/player

Lancer Karma via grunt

Lancez grunt test

Modifiez le contrôleur player.js (par exemple enlevez un des items de la liste) et vérifiez le comportement de Karma.

La configuration de karma dans le Gruntfile force le mode singleRun qui désactive l'autotest. C'est assez logique si on considère les tests dans l'optique du build.

(Facultatif) Lancer Karma en autotest

On ne va pas modifier la configuration grunt car les tests du build en intégration continue ne se finiraient pas.

A la place on va utiliser npm test.

Trouvez l'executable karma en local (dans le node_modules) et lancez karma avec l'option start et le fichier de configuration karma.conf.js. Arrêtez karma.

Modifiez la commande test de npm pour qu'elle lance cette commande.

Relancez Karma par npm test et modifiez le contrôleur player.js (par exemple enlevez un des items de la liste) et vérifiez le comportement de Karma).

*Conseils :

• La configuration des commandes npm se trouve dans package.json.
• le fichier de configuration Karma se trouve sous test/

*Solution :

La commande est

$ node_modules/karma/bin/karma start test/karma.conf.js

Le fcihier package.json doit contenir ce qui suit :

  "scripts": {
    "test": "node_modules/karma/bin/karma start test/karma.conf.js"  
  }

(Facultatif) IHM de Karma

Si vôtre karma tourne en autotest, accédez à l'interface graphique de karma sur http://localhost:8080/

Coder la vue et le contrôleur

Remplacez le code la vue player.html par ce qui suit

<div class="container">
  <h2>Players</h2>

    <!-- Player input -->
    <form role="form" ng-submit="addPlayer()">
        <div class="row">
            <p class="input-group">
                <input type="text" ng-model="newPlayer" placeholder="What is your name?" class="form-control">
                <span class="input-group-btn">
                    <input type="submit" class="btn btn-primary"  value="Add" >
                </span>
            </p>
        </div>
    </form>

    <!-- Players list -->
    <div class="row">
        <ul ng-repeat="player in players">
            <li>{{ player }}</li>
        </ul>
    </div>

</div>

Cette vue permet d'entrer le nom d'un joueur à ajouter et liste les joeurs déjà connus.

Identifiez les éléments du modèle que vous devez ajouter dans le contrôleur et créez les. Laissez la fonction d'ajout du joueur vide pour le moment.

Corrigez le test pour qu'il vérifie la liste des joueurs et non awesomeThings. Créer un niveau de describe supplémentaire pour les specs liées à l'initialisation.

Si vous allez sur la page HTML vous devez voir une liste de noms et une zone de saisie.

Solution :

Le contrôleur

'use strict';

angular.module('twinApp')
  .controller('PlayerCtrl', function ($scope) {
    
    $scope.newPlayer = '';
    $scope.players = [
      'Alice',
      'Bob'
    ];
    
    $scope.addPlayer = function () {
    };  
  
});

Le test

describe('Controller: PlayerCtrl', function () {
...
  describe('Initialize', function () {

    it('should attach a list of players to the scope', function () {
      expect(scope.players.length).toBe(2);
    });
    
  });
});

Terminer le contrôleur et le test

La fonction d'ajout du joueur peut se coder en utilisant push pour ajouter un élément au tableau.

Ecrivez le test correspondant à l'action de créer un nouveau joueur.

Vous pouvez simuler l'appel de la fonction en l'appelant par scope.addPlayer().

Vérifiez que l'application fonctionne.

Solution :

Le test

  describe('Add player', function () {

    it('should add the player to the list', function () {
      expect(scope.players.length).toBe(2);
      scope.newPlayer = 'Chris';
      scope.addPlayer();
      expect(scope.players.length).toBe(3);
      expect(scope.players[2]).toBe('Chris');
    });

  });

Le contrôleur

    $scope.addPlayer = function () {
      $scope.players.push($scope.newPlayer);
      $scope.newPlayer = '';
    };  

Suite

Si vous avez terminé, commencez le Lab9-Game.