AngularJS +茉莉花:对象的比较 [英] AngularJS + Jasmine: Comparing objects

查看:101
本文介绍了AngularJS +茉莉花:对象的比较的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我刚开始写我的AngularJS应用程序的测试和我的茉莉花这样做。

下面是相关code片段

ClientController:

 使用严格的;adminConsoleApp.controller('ClientController',
    功能ClientController($范围,客户端){        //获取客户名单
        $ scope.clients = Client.query(函数(){
            // preSELECT数组的第一个客户
            $ scope.selected.client = $ scope.clients [0];
        });        //必需的数据绑定,使得它在子作用域访问。
        $ scope.selected = {};        //当前页面
        $ scope.currentPage ='的start.html';        //对于客户端导航栏
        $ scope.clientNavItems = [
            {目的地:'的features.html',标题:功能},
        ];        //设置当前页面
        $ scope.setCurrent =功能(标题,目的地){
            如果(目标!==''){
                $ scope.currentPage =目标;
            }        };        //返回路径当前页面
        $ scope.getCurrent =功能(){
            回报的谐音/客户/'+ $ scope.currentPage;
        };        //为活动页面的导航栏高亮
        $ scope.isActive =功能(目的地){
            返回$ scope.currentPage ===目的地是哪里?真假;
        };        //客户端变化重置当前页面
        $ scope.clientChange =功能(){
            $ scope.currentPage ='的start.html';
        };
    });

ClientControllerSpec:

 使用严格的;VAR响应= [
    {
        ID:10,
        名:客户加,
        参考:客户加
    },
    {
        ID:13,
        名:客户端减,
        参考:客户减
    },
    {
        ID:23805,
        名:肖恩QA
        参考:SAQA
    }
];描述(ClientController',函数(){    VAR范围;    beforeEach(注(函数($控制器,$ httpBackend,$ rootScope){
        范围= $ rootScope;
        $ httpBackend.whenGET(的http://本地主机:3001 /客户).respond(响应);
        $控制器('ClientController',{$范围:适用范围});
        $ httpBackend.flush();
    }));    它('应当美元阵列p $ PSELECT第一个客户',函数(){
        //失败。
        期待(scope.selected.client).toEqual(回复[0]);
    });    它('应该设置当前页面的start.html',函数(){
        期待(scope.currentPage).toEqual('的start.html');
    });
});

该测试失败:

 铬25.0(苹果机)ClientController应该preSELECT数组的第一个客户失败
    预计{ID:10,店名:客户Plus的,裁判:客户加'}等于{ID:10,店名:客户Plus的,裁判:客户加'}。
    错误:预期{ID:10,店名:客户Plus的,裁判:客户加'}等于{ID:10,店名:客户Plus的,裁判:客户加'}。
        在空<&匿名GT; (/Users/shaun/sandbox/zong-admin-console-app/test/unit/controllers/ClientControllerSpec.js:43:39)

有没有人对为什么这可能发生的任何想法?

还..因为我是新来的写作AngularJS测试,对我是否建立我的测试错,或者是否可以改善将受到欢迎任何意见。

更新:

包括ClientService:

 使用严格的;AdminConsoleApp.services.factory('客户',函数($资源){
    // API设置,这样,如果clientid以传入,将被检索的clientId客户端,否则检索所有。
    返回$资源(的http://本地主机:端口/客户/:的clientId',{端口:'3001',的clientId:@clientId'},{    });
});

另外,我解决此问题得到了通过,而不是比较ID:

 它('应当美元阵列p $ PSELECT第一个客户',函数(){
    期待(scope.selected.client.id).toEqual(回复[0] .ID);
});


解决方案

toEqual 进行了深入相等比较。这意味着当所述对象的值的所有属性都相等,则对象被认为是相等的。

正如你所说,你正在使用的资源从而增加了对象的几个属性的阵列中的

所以这个 {ID:12} 成为本 {ID:12,$则:函数,$解决:真正} 这是不相等的。如果你正确设置值ID检查应该是罚款,如果你只是测试。

I'm just starting out writing tests for my AngularJS app and am doing so in Jasmine.

Here are the relevant code snippets

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

The test fails:

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) 

Does anyone have any ideas on why this might be happening?

Also .. as I'm new to writing AngularJS tests, any comments on whether I'm setting up my test wrong or whether it can be improved will be welcome.

Update:

Including 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'}, {

    });
});

Also, I got around the problem by comparing ids instead:

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

解决方案

toEqual makes a deep equality comparison. Which means that when all the properties of the objects' values are equal, the objects are considered to be equal.

As you said, you are using resource which adds a couple of properties to the objects in the array.

So this {id:12} becomes this {id:12, $then: function, $resolved: true} which are not equal. Id checking should be fine if you are just testing if you set the values properly.

这篇关于AngularJS +茉莉花:对象的比较的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆