我正在使用茉莉花测试角度视图。当我更改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;
};
}