AngularJS + Jasmine: Comparer des objets

Réponse courte:

L'existant répond à toutes les recommander stringifying vos objets, ou la création d'une correspondance personnalisée/fonction de comparaison. Mais, il y a un moyen plus simple: utiliser angular.equals() dans votre Jasmin expect appel, au lieu d'utiliser le Jasmin est intégré dans toEqual matcher.

angular.equals() ignore les propriétés supplémentaires ajoutés à vos objets par Angulaire, alors que toEqual va échouer la comparaison pour, disons, $promise être sur l'un des objets.

Une longue explication:

J'ai couru à travers ce même problème dans mon application AngularJS. Nous allons définir le scénario:

Dans mon test, j'ai créé un objet local et d'un local de tableau, et espérer que les réponses à deux requêtes GET. Par la suite, j'ai comparé le résultat de l'OBTENIR avec l'objet original et tableau. J'ai testé à l'aide de quatre méthodes différentes et un seul a donné des résultats corrects.

Voici une partie de foobar-controller-spec.js:

var myFooObject = {id: 1, name: "Steve"};
var myBarsArray = [{id: 1, color: "blue"}, {id: 2, color: "green"}, {id: 3, color: "red"}];

...

beforeEach(function () {
    httpBackend.expectGET('/foos/1').respond(myFooObject);
    httpBackend.expectGET('/bars').respond(myBarsArray);

    httpBackend.flush();
});

it('should put foo on the scope', function () {
    expect(scope.foo).toEqual(myFooObject);
    //Fails with the error: "Expected { id : 1, name : 'Steve', $promise : { then : Function, catch : Function, finally : Function }, $resolved : true } to equal { id : 1, name : 'Steve' }."
    //Notice that the first object has extra properties...

    expect(scope.foo.toString()).toEqual(myFooObject.toString());
    //Passes, but invalid (see below)

    expect(JSON.stringify(scope.foo)).toEqual(JSON.stringify(myFooObject));
    //Fails with the error: "Expected '{"id":1,"name":"Steve","$promise":{},"$resolved":true}' to equal '{"id":1,"name":"Steve"}'."

    expect(angular.equals(scope.foo, myFooObject)).toBe(true);
    //Works as expected
});

it('should put bars on the scope', function () {
    expect(scope.bars).toEqual(myBarsArray);
    //Fails with the error: "Expected [ { id : 1, color : 'blue' }, { id : 2, color : 'green' }, { id : 3, color : 'red' } ] to equal [ { id : 1, color : 'blue' }, { id : 2, color : 'green' }, { id : 3, color : 'red' } ]."
    //Notice, however, that both arrays seem identical, which was the OP's problem as well.

    expect(scope.bars.toString()).toEqual(myBarsArray.toString());
    //Passes, but invalid (see below)

    expect(JSON.stringify(scope.bars)).toEqual(JSON.stringify(myBarsArray));
    //Works as expected

    expect(angular.equals(scope.bars, myBarsArray)).toBe(true);
    //Works as expected
});

Pour référence, voici la sortie de console.log à l'aide de JSON.stringify() et .toString():

LOG: '***** myFooObject *****'
LOG: 'Stringified:{"id":1,"name":"Steve"}'
LOG: 'ToStringed:[object Object]'

LOG: '***** scope.foo *****'
LOG: 'Stringified:{"id":1,"name":"Steve","$promise":{},"$resolved":true}'
LOG: 'ToStringed:[object Object]'



LOG: '***** myBarsArray *****'
LOG: 'Stringified:[{"id":1,"color":"blue"},{"id":2,"color":"green"},{"id":3,"color":"red"}]'
LOG: 'ToStringed:[object Object],[object Object],[object Object]'

LOG: '***** scope.bars *****'
LOG: 'Stringified:[{"id":1,"color":"blue"},{"id":2,"color":"green"},{"id":3,"color":"red"}]'
LOG: 'ToStringed:[object Object],[object Object],[object Object]'

Remarquez comment le stringified objet a des propriétés supplémentaires, et comment toString les rendements des données non valides qui va donner un faux positif.

En regardant ci-dessus, voici un résumé des différentes méthodes:

1. expect(scope.foobar).toEqual(foobar) : Ce ne sont pas les moyens. Lorsque l'on compare les objets, toString révèle que Angulaire a ajouté des propriétés supplémentaires. Lorsque l'on compare les tableaux, le contenu semblent identiques, mais cette méthode prétend toujours qu'ils sont différents.
2. expect(scope.foo.toString()).toEqual(myFooObject.toString()) : Cela passe dans les deux sens. Cependant, c'est un faux positif, puisque les objets ne sont pas entièrement traduites. La seule affirmation de ce fait est que les deux arguments ont le même nombre d'objets.
3. expect(JSON.stringify(scope.foo)).toEqual(JSON.stringify(myFooObject)) : Cette méthode donne la bonne réponse lors de la comparaison des tableaux, mais l'objet de comparaison a une semblable faute à la crue de comparaison.
4. expect(angular.equals(scope.foo, myFooObject)).toBe(true) : C'est la bonne façon de faire de l'assertion. En laissant Angulaire de faire la comparaison, il sait ignorer toutes les propriétés qui ont été ajoutés dans le backend, et donne le bon résultat.

Si important pour tout le monde, je suis en utilisant AngularJS 1.2.14 et Karma 0.10.10, et l'essai sur la PhantomJS 1.9.7.

J'ai juste eu un problème similaire et mis en œuvre une correspondance personnalisée comme suit, basée sur de nombreuses approches:

beforeEach(function() {
  this.addMatchers({
    toBeSimilarTo: function(expected) {
      function buildObject(object) {
        var built = {};
        for (var name in object) {
          if (object.hasOwnProperty(name)) {
            built[name] = object[name];
          }
        }
        return built;
      }

      var actualObject = buildObject(this.actual);
      var expectedObject = buildObject(expected);
      var notText = this.isNot ? " not" : "";

      this.message = function () {
        return "Expected " + actualObject + notText + " to be similar to " + expectedObject;
      }

      return jasmine.getEnv().equals_(actualObject, expectedObject);

    }
  });
});

puis utilisé de cette façon:

it("gets the right data", function() {
  expect(scope.jobs[0]).toBeSimilarTo(myJob);
});

Bien sûr, c'est un très simple de correspondance et ne prend pas en charge de nombreux cas, mais je n'ai pas besoin de rien de plus complexe que cela. Vous pouvez envelopper le rapprochement dans un fichier de config.

Vérifier cette réponse pour une mise en œuvre similaire.

Un peu verbeux, mais produit utile de message lors de l'attente échoue:

expect(JSON.parse(angular.toJson(resource))).toEqual({ id: 1 });

Explication:

angular.toJson bande de la ressource de tous angulaire des propriétés spécifiques comme $promise

JSON.parse va convertir la chaîne JSON retour à la normale de l'Objet (ou un Tableau), qui peut maintenant être comparé à un autre Objet (ou un Tableau).