如何使用'controller as'对角度视图进行单元测试

时间:2016-02-18 05:50:41

标签: angularjs unit-testing jasmine

我正在使用茉莉花测试角度视图。当我更改exportStatus的值(JSON对象有界视图)时,视图不会自行更新(使用ng-class未应用预期的类名)。但是,当我使用相同的代码并在jasmine spec文件外运行时,这很好用。

我使用了 controller as 语法。我认为,我做错了,这是用controller as语法测试角度视图的正确方法吗?

describe("Export Note Icon states::", function() {

    var app = angular.module('ThinkshopAPP', []);

    function NotePropertiesView(){}
    var oNotePropertiesView = new NotePropertiesView();

    var oUserContext = new UserContext({"userName": "postmaster@test.int", "domainName": "test.int"});
    oUserContext.set("mail", "postmaster@test.int");
    oUserContext.set("firstname", "");
    oUserContext.set("lastname", "");
    oUserContext.set("displayname", "");
    oNotePropertiesView.oUserContext = oUserContext;
    oNotePropertiesView.sessionId = "";

    oNotePropertiesView.note = new Note();
    oNotePropertiesView.note.set("id", 101);

    app.value("NotesPropertiesViewObject", oNotePropertiesView);
    app.service('ExportNoteService', loadExportNoteService);
    app.controller('ExportNoteController', ['$scope', '$interval', '$window', 'ExportNoteService', 'NotesPropertiesViewObject', loadExportNoteController]);

    beforeEach(module('ThinkshopAPP'));

    var ExportNoteController, $rootScope, $compile, $controller, view, $scope, exportNoteService, oNotesPropertiesViewObject;
    beforeEach(inject(function(_$controller_, _$rootScope_, _$compile_, _ExportNoteService_, _NotesPropertiesViewObject_){

        $controller = _$controller_;
        $rootScope = _$rootScope_;
        $compile = _$compile_;
        $scope = $rootScope.$new();
        exportNoteService = _ExportNoteService_;
        oNotesPropertiesViewObject = _NotesPropertiesViewObject_;

        createController = function(){
             var html = '<div id="ExportNoteContainer" class="ExportNoteContainer floatright paddingtopfivepx paddingbottomtenpx paddingrighttwentypx" ng-controller="ExportNoteController as exportnote">'+
                '<div id="ExportNote" class="ExportNote" ng-class="exportnote.exportNoteStatus == \'start\' ? \'ExportNoteIcon\' : (exportnote.exportNoteStatus == \'complete\' ? \'ExportNoteCompleteIcon\' : \'ExportNoteProcessingIcon\')" ng-click="exportnote.exportNote()"></div></div>';

             ExportNoteController = $controller('ExportNoteController as exportnote', { '$scope': $scope, '$rootScope': $rootScope, 'NotesPropertiesViewObject': oNotesPropertiesViewObject });
             view = $compile(angular.element(html))($scope);
             $scope.$digest();
        };
    }));


    it("Export note icon should present by default, if note is not already exported.", function() {
        createController();
        // assigned value to exportNoteStatus, but ExportNoteIcon not getting applied.
        $scope.exportnote.exportNoteStatus = 'start';

        var a = view.find(".ExportNoteIcon"); 
        expect(a.length).not.toEqual(0);
    });

    it("Click on export note, note exporting process will get start", function() {

        createController();
        // assinged value by controller as syntax, but not appling ExportNoteIcon class.
        ExportNoteController.exportNoteStatus = "start";

        var fakeHttpPromise = {
                success: function() {}
        };

        spyOn(exportNoteService, 'exportNote').andReturn(fakeHttpPromise);

        view.find(".ExportNoteIcon").click();

        expect(exportNoteService.exportNote).toHaveBeenCalledWith(101);
    });     
});

我认为视图没有附加到控制器,因此模型中的任何更改都不会更新到视图中。

ExportNoteController

function loadExportNoteController($scope, $interval, $window, oNoteExportService, oNotesPropertiesView){

    var vm = this;
    var intervalTime = 0 ;
    iNoteId = 0;
    oNoteExportService.setLoggedInUserId(oNotesPropertiesView.oUserContext.getLoggedInUserId());

    oNoteExportService.setSessionId(oNotesPropertiesView.sessionId);

    /**
     * Start process of note exporting when note is not already exported or in process of exporting.
     * This will call Webservice to initiate exporting of note and return current status
     * of process.
     * 
     * When export note process completed and got status complete, then download file.
     * 
     * When export note process is ongoing, then do nothing.
     */
    vm.exportNote = function(){

        switch(vm.exportNoteStatus){
        case "complete":
            // Download exported note.
            $window.open(oNoteExportService.getDownloadExportedNoteURL());
        break;
        case "processing":
            // Do nothing
        break;
        case "start":
            // start exporting note process.
            vm.exportNoteStatus = "processing";
            iNoteId = oNotesPropertiesView.note.get("id");
            oNoteExportService.exportNote(iNoteId).success(function(data){
                    updateExportNoteProcessStatus(data.status);
            });
        break;  
        }

    };



    /**
         * Update model after getting exporting note process status.
         * Server will response for processing or complete.
         * 
         * When process is complete status will get updated and download icon will display as well as
         * it will clear polling to server to get status of note exporting process.
         * 
         * When exporting still in progress, polling req. to server to get export note progress status
         * will get started. This req. will get called each time, after some interval of time.
         * @param status
         */
        function updateExportNoteProcessStatus(status){
            switch(status){
                case "start":
                    vm.exportNoteStatus = "start";
                break;  
                case "complete":
                    vm.exportNoteStatus = "complete";
                    clearInterval();
                break;
                case "processing":
                    vm.exportNoteStatus = "processing";
                    startIntervalToCheckNoteExportStatus();
                break;
            }
        } 

        /**
         * Get export note processing status from server for current note.
         */
        vm.getExportNoteStatus = function(noteId){
            iNoteId = noteId;
            clearInterval();
            oNoteExportService.getExportNoteStatus(iNoteId).success(function(data){
                updateExportNoteProcessStatus(data.status);
            });
        };

        /**
         * Start interval to check status of export note.
         */
        function startIntervalToCheckNoteExportStatus(){
            if( intervalTime == 0){
                intervalTime = $interval(function() {
                    oNoteExportService.getExportNoteStatus(iNoteId).success(function(data){
                        updateExportNoteProcessStatus(data.status);
                    });
                }, 5000);
            }
        }

        /**
         * clear interval started to check export note status.
         */
        function clearInterval(){
            if( intervalTime != 0){
                $interval.cancel(intervalTime);
                intervalTime = 0;
            }
        }

        vm.getCurrentSelectedNoteId = function(){
            return iNoteId;
        };
    }

0 个答案:

没有答案