web-dev-qa-db-ja.com

AngularJS + Jasmine：オブジェクトの比較

私はAngularJSアプリのテストを書き始めたばかりで、Jasmineで行っています。

関連するコードスニペットを次に示します

ClientController：

'use strict';

adminConsoleApp.controller('ClientController',
    function ClientController($scope, Client) {

        //Get list of clients
        $scope.clients = Client.query(function () {
            //preselect first client in array
            $scope.selected.client = $scope.clients[0];
        });

        //necessary for data-binding so that it is accessible in child scopes.
        $scope.selected = {};

        //Current page
        $scope.currentPage = 'start.html';

        //For Client nav bar
        $scope.clientNavItems = [
            {destination: 'features.html', title: 'Features'},
        ];

        //Set current page
        $scope.setCurrent = function (title, destination) {
            if (destination !== '') {
                $scope.currentPage = destination;
            }

        };

        //Return path to current page
        $scope.getCurrent = function () {
            return 'partials/clients/' + $scope.currentPage;
        };

        //For nav bar highlighting of active page
        $scope.isActive = function (destination) {
            return $scope.currentPage === destination ? true : false;
        };

        //Reset current page on client change
        $scope.clientChange = function () {
            $scope.currentPage = 'start.html';
        };
    });

ClientControllerSpec：

'use strict';

var RESPONSE = [
    {
        "id": 10,
        "name": "Client Plus",
        "ref": "client-plus"
    },
    {
        "id": 13,
        "name": "Client Minus",
        "ref": "client-minus"
    },
    {
        "id": 23805,
        "name": "Shaun QA",
        "ref": "saqa"
    }
];

describe('ClientController', function() {

    var scope;

    beforeEach(inject(function($controller, $httpBackend, $rootScope) {
        scope = $rootScope;
        $httpBackend.whenGET('http://localhost:3001/clients').respond(RESPONSE);
        $controller('ClientController', {$scope: scope});
        $httpBackend.flush();
    }));

    it('should preselect first client in array', function() {
        //this fails.
        expect(scope.selected.client).toEqual(RESPONSE[0]);
    });

    it('should set current page to start.html', function() {
        expect(scope.currentPage).toEqual('start.html');
    });
});

テストは失敗します：

Chrome 25.0 (Mac) ClientController should preselect first client in array FAILED
    Expected { id : 10, name : 'Client Plus', ref : 'client-plus' } to equal { id : 10, name : 'Client Plus', ref : 'client-plus' }.
    Error: Expected { id : 10, name : 'Client Plus', ref : 'client-plus' } to equal { id : 10, name : 'Client Plus', ref : 'client-plus' }.
        at null.<anonymous> (/Users/shaun/sandbox/zong-admin-console-app/test/unit/controllers/ClientControllerSpec.js:43:39)

なぜこれが起こっているのかについてのアイデアはありますか？

また、AngularJSテストを書くのは初めてなので、テストを間違って設定しているかどうか、または改善できるかどうかについてのコメントを歓迎します。

更新：

ClientServiceを含む：

'use strict';

AdminConsoleApp.services.factory('Client', function ($resource) {
    //API is set up such that if clientId is passed in, will retrieve client by clientId, else retrieve all.
    return $resource('http://localhost:port/clients/:clientId', {port: ':3001', clientId: '@clientId'}, {

    });
});

また、代わりにIDを比較することで問題を回避しました：

it('should preselect first client in array', function () {
    expect(scope.selected.client.id).toEqual(RESPONSE[0].id);
});
javascriptunit-testingangularjstddjasmine
43
shaunlim

toEqualは、完全な等価比較を行います。つまり、オブジェクトの値のすべてのプロパティが等しい場合、オブジェクトは等しいと見なされます。

既に述べたように、配列のオブジェクトにいくつかのプロパティを追加するリソースを使用しています。

したがって、この {id:12}はこれになります{id:12, $then: function, $resolved: true}等しくない。値を適切に設定しているかどうかだけをテストしている場合は、IDチェックで問題ないはずです。

64
Umur Kontacı

短い答え：

既存の回答はすべて、オブジェクトを文字列化するか、カスタムマッチャー/比較関数を作成することを推奨しています。しかし、もっと簡単な方法があります：Jasmineの組み込みexpectマッチャーを使用する代わりに、Jasmine toEqual呼び出しでangular.equals()を使用します。

angular.equals()は、Angularによってオブジェクトに追加された追加のプロパティを無視しますが、toEqualは、たとえば、オブジェクトの1つにある_$promise_の比較に失敗します。

長い説明：

私はAngularJSアプリケーションでこの同じ問題に出くわしました。シナリオを設定しましょう：

私のテストでは、ローカルオブジェクトとローカル配列を作成し、2つのGETリクエストへの応答として期待していました。その後、GETの結果を元のオブジェクトと配列と比較しました。 4つの異なる方法を使用してこれをテストしましたが、適切な結果が得られたのは1つだけでした。

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
});
_

参照用に、JSON.stringify()および.toString()：を使用した_console.log_の出力を示します

_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]'
_

文字列化されたオブジェクトに追加のプロパティがあり、toStringが無効なデータを生成して誤検知を引き起こす方法に注意してください。

上記を見てから、さまざまな方法の概要を以下に示します。

  1. expect(scope.foobar).toEqual(foobar)：これは両方の方法で失敗します。オブジェクトを比較すると、toStringはAngularが追加のプロパティを追加したことを明らかにします。配列を比較すると、内容は同じように見えますが、このメソッドはまだ異なると主張します.
  2. expect(scope.foo.toString()).toEqual(myFooObject.toString())：これは両方の方法に合格します。ただし、オブジェクトは完全に翻訳されていないため、これは誤検知です。これが行う唯一の主張は、2つの引数が同じ数のオブジェクトを持っているということです。
  3. expect(JSON.stringify(scope.foo)).toEqual(JSON.stringify(myFooObject))：このメソッドは、配列を比較するときに適切な応答を返しますが、オブジェクト比較には生の比較と同様の障害があります。
  4. expect(angular.equals(scope.foo, myFooObject)).toBe(true)：これはアサーションを行う正しい方法です。Angularに比較をさせることにより、無視することがわかりますバックエンドに追加されたプロパティであり、適切な結果を提供します。

重要な場合は、AngularJS 1.2.14とKarma 0.10.10を使用し、PhantomJS 1.9.7でテストしています。

56
The DIMM Reaper

長い話：angular.equalsをジャスミンマッチャーとして追加します。

beforeEach(function(){
  this.addMatchers({
    toEqualData: function(expected) {
      return angular.equals(this.actual, expected);
    }
  });
});

したがって、次のように使用できます。

it('should preselect first client in array', function() {
    //this passes:
    expect(scope.selected.client).toEqualData(RESPONSE[0]);

    //this fails:
    expect(scope.selected.client).toEqual(RESPONSE[0]);
});
14
Adrian

私は同様の問題を抱えていて、多くのアプローチに基づいて、次のようにカスタムマッチャーを実装しました。

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);

    }
  });
});

そして、この方法を使用しました：

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

もちろん、これは非常に単純なマッチャーであり、多くのケースをサポートしていませんが、それ以上複雑なものは必要ありませんでした。設定ファイルでマッチャーをラップできます。

同様の実装については、 this answer を確認してください。

6
Pipetus

同じ問題があったので、比較するオブジェクトでJSON.stringify()を呼び出しました。

expect( JSON.stringify( $scope.angularResource ) == JSON.stringify( expectedValue )).toBe( true );
2
niftygrifty

少し冗長ですが、予想が失敗した場合に役立つメッセージが生成されます。

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

説明：

angular.toJsonは、angular $promise

JSON.parseは、JSON文字列を通常のオブジェクト（または配列）に変換し、別のオブジェクト（または配列）と比較できるようになります。

0
cute_ptr