1

我只是想更好地理解 AngularJS 的 Jasmine 单元测试。所以我围绕我开始的现有实验项目设置了一个测试。我将从代码开始，我的问题在底部。

首先我的应用声明：

(function () {
"use strict";
angular.module('iconic', [])
    .constant('config', {
        debug: true,
        version: '1.0.0.1'
    })
    .value('globalStatus', {            
        currentArea: null,
        progress: null,
        notice: [
            { title: 'Notice 1 Title', message: 'Notice 1 Message' },
            { title: 'Notice 2 Title', message: 'Notice 1 Message' }
        ]
    });
}());

然后是一个获取数据的工厂（现在是静态的，但将是一个 AJAX 调用）：

(function () {
"use strict";
angular.module('iconic')
    .factory('data', ['$http', function ($http) {

        function areas() {
            return [
                  { name: 'home', text: 'Home', enabled: true, active: false },
                  { name: 'gallery', text: 'Gallery', enabled: true, active: false },
                  { name: 'services', text: 'Services', enabled: true, active: false },
                  { name: 'pricing', text: 'Pricing', enabled: true, active: false },
                  { name: 'test', text: 'Test', enabled: false, active: false }
            ];
        }

        return {
            getAreas: areas
        };
    }]);

}());

然后我的控制器与过滤器：

(function () {
"use strict";
angular.module('iconic')
    .controller('NavController', ['$scope', 'data', function ($scope, data) {
            $scope.menus = data.getAreas();
        }])
    .filter('EnabledFilter', ['config', function (config) {
            return function (menus) {
                if (config.debug)
                    console.log('matchEnabled', arguments);
                var filtered = [];
                angular.forEach(menus, function (menu) {
                    if (menu.enabled) {
                        filtered.push(menu);
                    }
                });
                return filtered;
            };
        }]);
}());

然后是我实际的 Jasmine 测试（使用 Chutzpah 运行）：

(function () {
"use strict";

var staticData = [
    { name: 'home', text: 'Home', enabled: true, active: false },
    { name: 'gallery', text: 'Gallery', enabled: true, active: false },
    { name: 'services', text: 'Services', enabled: true, active: false },
    { name: 'pricing', text: 'Pricing', enabled: true, active: false },
    { name: 'test', text: 'Test', enabled: false, active: false }
];

describe("NavController Tests", function () {
    //Mocks
    //Mocks
    var windowMock, httpBackend, _data;

    //Controller
    var ctrl;

    //Scope
    var ctrlScope;

    //Data
    var storedItems;

    beforeEach(function () {
        module('iconic');
    });

    beforeEach(inject(function ($rootScope, $httpBackend, $controller, data) {

        //Mock for $window service
        windowMock = { location: { href: "" } };


        //Creating a new scope
        ctrlScope = $rootScope.$new();

        //Assigning $httpBackend mocked service to httpBackend object
        httpBackend = $httpBackend;

        _data = data;

        storedItems = staticData;

        //Creating spies for functions of data service
        spyOn(data, 'getAreas').andCallThrough();

        $controller('NavController', { $scope: ctrlScope, data: _data});
    }));

    it("should call getAreas on creation of controller", function () {
        expect(_data.getAreas).toHaveBeenCalled();
    });
});

}());

所以这个第一个简单的测试确保 getAreas 被调用通过就好了。但我想添加一个测试，以确保过滤结果从工厂中过滤掉启用为假的数据。知道我将如何处理 Jasmine 吗？

4

0 回答 0