在AngularJS上将服务注入Jasmine单元测试

时间:2016-02-02 04:12:08

标签: angularjs unit-testing jasmine

我对此很疯狂,我无法进行相当简单的单元测试(这是我在AngularJS上的第一个)。

我保持一切尽可能简单。我一直在尝试几种方式来注入我的服务,但他们都没有工作。我尝试的最后一个来自here

这是我的测试文件:

describe('product service',function(){
    var ProductService;
    beforeEach(module('inspinia'));
    beforeEach(inject(function (_ProductService_) {
        ProductService = _ProductService_;
    }));
    describe('Test',function(){
        it("should be aware that true is true", function() {
            expect(true).toBe(true);
        });
    });
});

这是我的服务:

/**
 * Product service.
 *
 * Service that manages products. Including offline mode and sync tasks.
 *
 * @param {!angular.Http} $http
 * @param {!angular.RootScope} $rootScope
 * @ngInject
 * @export
 */
(function () {
    'use strict';
    angular
        .module('inspinia')
        .factory('ProductService', ProductService);
    /**
     * clientUpdatesQueue
     *
     * Will hold all the offline operations on the following format:
     * {'Section':SectionEnum.SECTION, 'Operation':OperationEnum.OPERATION, 'Record':record, 'Timestamp':currentTimeStamp}
     */
    var clientUpdatesQueue = [];
    var products = [];
    /**
     * Enum for sections used by the clientUpdatesQueue array.
     */
    var SectionEnum = {
        PRODUCTS : 0
    };
    /**
     * Enum for operations used by the clientUpdatesQueue array.
     */
    var OperationEnum = {
        CREATE : 0,
        UPDATE : 1,
        DELETE : 2
    };
    /**
     * Initializes the client updates queue
     */
    (function initClientUpdatesQueue(){
        clientUpdatesQueue = angular.fromJson(localStorage.clientUpdatesQueue || "[]");
        if(localStorage.products === undefined){
            //GetAllFromServer();
        }
        clientUpdatesQueue = angular.fromJson(localStorage.clientUpdatesQueue || "[]");
    })();
    ProductService.$inject = ['$http', '$rootScope'];
    function ProductService($http, $rootScope) {
        /**
         * TODO
         * Will write a function that sends the offline operations updates to the server
         *
         * service.SendUpdates = SendUpdates;
        */
        var service = {};
        service.GetAllFromServer = GetAllFromServer;
        service.GetAll = GetAll;
        service.Get = Get;
        service.Create = Create;
        service.Update = Update;
        service.Delete = Delete;
        service.Synchronize = Synchronize;
        return service;

        /***************SYNCHRONIZATION TASKS***************
         ***************************************************/
        /**
         * Synchronize
         * Iterates through the pending updates queue and performs the corresponding call to the server
         */
        function Synchronize(){
            for (var key in clientUpdatesQueue) {
                switch(clientUpdatesQueue[key].Operation){
                    case 0:
                        CreateOnServer(clientUpdatesQueue[key].Record);
                        break;
                    case 1:
                        UpdateOnServer(clientUpdatesQueue[key].Record);
                        break;
                    case 2:
                        DeleteOnServer(clientUpdatesQueue[key].Record);
                        break;
                }
                clientUpdatesQueue.splice(key, 1);
            }
            updateLocalStorage();
        }
        /**
         * updateLocalStorage
         * Updates local storage with the lastest operations.
         */
        function updateLocalStorage(){
            localStorage.products = angular.toJson(products || "[]");
            localStorage.clientUpdatesQueue = angular.toJson(clientUpdatesQueue || "[]");
        }
        /**
         * GetAllFromServer
         * Gets all products matching the current session from the server and store them on the local storage.
         */
        function GetAllFromServer(){
            var session = angular.fromJson(localStorage.session);
            $http({
                method: 'GET',
                url: $rootScope.apiURL+'getAllClientProducts/'+session,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(response){
                if(response.ErrorMessage === null && response.Result !== null){
                    localStorage.products = angular.toJson(Object.keys(response.Result).map(function (key) {return response.Result[key]}));
                }else if(response.ErrorMessage !==null){
                    alert(response.ErrorMesage);
                }
            })
            .error(function(response){
                alert('Something went wrong. Please try again: '+response);
            });
        }
        /***************LOCAL TASKS*************************
         ***************************************************/
        /**
         * GetAll
         * Gets all the products from the local storage
         *
         * @return {Array} products
         */
        function GetAll(){
            if(localStorage.products !== undefined) {
                return angular.fromJson(localStorage.products);
            }else{
                GetAllFromServer();
            }
        }
        /**
         * Gets the specified product by its primary key
         *
         * @param {String} InvProductId
         * @return {Object} product
         */
        function Get(id){
            products = GetAll();
            var thisProduct = products.filter(function(p){
                return p.InvProductId === id;
            });
            updateLocalStorage();
            return thisProduct[0];
        }
        /**
         * Creates a product
         *
         * @param {Object} product
         */
        function Create(product){
            var result = true;
            if(!ValidateSnapshot(product)){
                return false;
            }
            products = GetAll();
            products.push(product);
            clientUpdatesQueue.push({'Section':SectionEnum.PRODUCTS, 'Operation':OperationEnum.CREATE, 'Record':product, 'Timestamp':Date.now()});
            updateLocalStorage();
            return result;
        }
        /**
         * Updates a product
         *
         * @param {Object} product
         */
        function Update(product){
            var result = true;
            if(!ValidateSnapshot(product)){
                return false;
            }
            products = GetAll();
            for (var key in products) {
                if(products[key].InvProductId === product.InvProductId){
                    products[key] = product;
                }
            }
            clientUpdatesQueue.push({'Section':SectionEnum.PRODUCTS, 'Operation':OperationEnum.UPDATE, 'Record':product, 'Timestamp':Date.now()});
            updateLocalStorage();
            return result;
        }
        /**
         * Deletes a product
         *
         * @param {Object} product
         */
        function Delete(product){
            var result = true;
            products = GetAll();
            for (var key in products) {
                if(products[key].InvProductId === product.InvProductId){
                    products.splice(key, 1);
                }
            }
            clientUpdatesQueue.push({'Section':SectionEnum.PRODUCTS, 'Operation':OperationEnum.DELETE, 'Record':product, 'Timestamp':Date.now()});
            updateLocalStorage();
            return result;
        }
        /***************SERVER COMMUNICATION****************
         ***************************************************/
        /**
         * Creates a product on the server
         *
         * @param {Object} product
         */
        function CreateOnServer(product){
            var session = angular.fromJson(localStorage.session);
            $http({
                method: 'POST',
                url: $rootScope.apiURL+'createProduct/'+session,
                data: $.param(product),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(response){
                if(response.ErrorMessage === null && response.Result !== null){
                    mixpanel.track("Product successfuly created at server: " + response.Result.InvProductId);
                }
            })
            .error(function(data){
                mixpanel.track("Create Product Went Wrong: "+data);
                alert('Something went wrong with product creation: '+data);
            });
        }
        /**
         * Updates a product on the server
         *
         * @param {Object} product
         */
        function UpdateOnServer(product){
            var session = angular.fromJson(localStorage.session);
            $http({
                method: 'POST',
                url: $rootScope.apiURL+'updateProduct/'+session,
                data: $.param(product),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(response){
                if(response.ErrorMessage === null && response.Result !== null){
                    mixpanel.track("Product successfuly edited: " + response.Result.InvProductId);
                }
            })
            .error(function(data){
                mixpanel.track("Create Product Went Wrong: "+data);
                alert('Something went wrong with product creation: '+data);
            });
        }
        /**
         * TODO
         * Deletes a product on the server
         *
         * @param {Object} product
         */
        function DeleteOnServer(product){
            return true;
        }
        /***************VALIDATION UTILITIES****************
         ***************************************************/
        function ValidateSnapshot(product){
            var result = true;
            if(product === null || product === undefined){
                return false;
            }
            if(!product.ApplicableTaxKeys.split(',') instanceof Array || product.ApplicableTaxKeys !== null){
                return false;
            }
            if(product.Barcode.length < 1 || product.Barcode === null || product.Barcode === undefined){
                return false;
            }
            if(product.CliClientId.length !== 10){
                return false;
            }
            if(product.Description.length < 1 || product.Description === null || product.Description === undefined){
                return false;
            }
            if(product.InternalCode.length < 1 || product.InternalCode === null || product.InternalCode === undefined){
                return false;
            }
            if(!product.InvProductCategoryId.split(',') instanceof Array || product.InvProductCategoryId !== null){
                return false;
            }
            if(product.Name.length < 1 || product.Name === null || product.Name === undefined){
                return false;
            }
            if(product.SaleUnitType.length < 1 || product.SaleUnitType === null || product.SaleUnitType === undefined){
                return false;
            }
            if(product.Status.length < 1 || product.Status === null || product.Status === undefined){
                return false;
            }
            if(product.UnitMeasure.length < 1 || product.UnitMeasure === null || product.UnitMeasure === undefined){
                return false;
            }
            return result;
        }
    }
})();

这是我尝试运行测试时遇到的错误:

$ karma start
01 02 2016 22:05:54.839:WARN [karma]: No captured browser, open http://localhost:9876/
01 02 2016 22:05:54.848:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/
01 02 2016 22:05:54.854:INFO [launcher]: Starting browser PhantomJS
01 02 2016 22:05:55.101:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#LoDbe6y-md8uPHi-AAAA with id 31143204
PhantomJS 2.1.1 (Linux 0.0.0) product service Test should be aware that true is true FAILED
    /home/eduardo/ventamia/vm2/clientside/www-app/js/angular/angular.js:4116:53
    forEach@/home/eduardo/ventamia/vm2/clientside/www-app/js/angular/angular.js:323:24
    loadModules@/home/eduardo/ventamia/vm2/clientside/www-app/js/angular/angular.js:4076:12
    createInjector@/home/eduardo/ventamia/vm2/clientside/www-app/js/angular/angular.js:4002:22
    workFn@/home/eduardo/ventamia/vm2/clientside/www-app/node_modules/angular-mocks/angular-mocks.js:2506:60
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.044 secs / 0.01 secs)

如果我删除了我尝试注入服务的行,测试通过了,所以我认为其他一切都很好。

Karma配置文件:

 module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ['jasmine'],
    files: [
        'angular/angular.min.js',
        '../node_modules/angular-mocks/angular-mocks.js',
        'app.js',
        'app-services/*.js',
        'app-services-tests/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}
编辑:我将我的业力配置文件移动到一个目录,以丢弃任何与./符号有关的奇怪行为。但我仍然得到同样的错误。我最终得到了这个conf文件:

module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ['jasmine'],
    files: [
        'js/angular/angular.min.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'js/app.js',
        'js/app-services/*.js',
        'js/app-services-tests/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

1 个答案:

答案 0 :(得分:1)

你这么说     after removing the lines where I try to inject my service, the test passes

因为您的测试用例没有使用任何angular mocking stuff

他们纯粹使用Jasmine stuff

这意味着你的 angular-mocks.js没有被加载。

我已使用相同的代码进行了检查,唯一的区别是加载angular-mocks.js库。

请检查angular-mocks.jskarma_config file的路径。

Karma config中查看基本路径后,angular-mocks.js的路径应该与此angular/angular.min.js一样。

如果您的node_modules位于angular文件夹之外,请使用此路径'../node_modules/angular-mocks/angular-mocks.js'

编辑:请更新此内容。

files: [
        'js/angular/angular.min.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'js/app-services/*.js',
        'js/app.js',
        'js/app-services-tests/*.js'
    ],

更新:

嗯,解决方法是,您应该定义one main module which is your ng-app

然后为服务,控制器等各项创建模块,并将它们注入一个模块。

考虑到这些,为ProductService&amp;定义一个模块。相关服务, serviceModule

angular.module('serviceModule',[]) //service.js

将其注入主模块

var app = angular.module('inspinia',['serviceModule']) // app.js