茉莉花單元測試檢查角引導模式的範圍

Question

我有一個項目列表。當你點擊一個項目時，它會調出一個模式來顯示該項目的數據。在列表的控制器中，有一個函數openRecentsModal，它從ng-repeat列表中獲取數據對象，並在函數運行時在新的作用域上創建它。新的模式然後將該對象作爲$ scope.recentsFoldersData提供。我需要編寫一個單元測試以確保在範圍上定義了recentsFolderData，但是我嘗試過的所有內容都會導致「預期未定義被定義」。我希望有人能幫助。

這裏的列表控制的方法來打開一個模式：

function openRecentsModal(obj) { 
    var scope = $rootScope.$new(); 
    scope.recentsFoldersData = obj; 
    var controller = 'recentsFoldersDetailController'; 
    $modal.open({ 
    scope: scope, 
    controller: controller, 
    templateUrl: 'js/modal/recents/folder/recentsFoldersDetail.tpl.html' 
    }); 
} 

這裏的模態的控制：

angular.module('modal.recents.folder', []) 
    .controller('recentsFoldersDetailController', recentsFoldersDetailController); 

    recentsFoldersDetailController.$inject = ['$scope', '$modalInstance']; 
    function recentsFoldersDetailController($scope, $modalInstance) { 

    $scope.close = function close() { 
     $modalInstance.dismiss('close'); 
    }; 
    } 

最後，這裏的單元測試，我的工作（我排除那些正在通過的，以及這種測試不需要的幫助函數）：

describe('recents folders modal controller tests', function() { 
    var scope, q, modal, mockDetailController, mockListController, mockRecentService, mockFolderService, mockModalInstance, $httpBackend; 

    beforeEach(module('mainApp')); 

    beforeEach(inject(function($rootScope, $q, $controller, $modal, _recentService_, _folderService_, $injector) { 
    q = $q; 
    scope = $rootScope.$new(); 
    modal = $modal; 
    $httpBackend = $injector.get('$httpBackend'); 
    $httpBackend.whenGET('js/modal/recents/folder/recentsFoldersDetail.tpl.html').respond(200, ''); 
    mockRecentService = _recentService_; 
    mockFolderService = _folderService_; 
    mockModalInstance = { 
     dismiss: jasmine.createSpy('modalInstance.dismiss') 
    }; 

    mockDetailController = function() { 

     return $controller('recentsFoldersDetailController', { 
     '$scope': scope, 
     '$modalInstance': mockModalInstance 
     }); 
    }; 

    mockListController = function() { 

     return $controller('recentsListFoldersController', { 
     '$scope': scope, 
     '$modal': modal, 
     'recentService': mockRecentService, 
     'folderService': mockFolderService 
     }); 
    }; 
    })); 

    describe('scope tests', function() { 

    it('should place the data on the scope when openRecentsModal is called', function() { 
     var obj = defaultSuccessfulRecentsDataResponse(); 
     mockListController(); 
     spyOn(scope, 'openRecentsModal'); 

     scope.openRecentsModal(obj); 
     expect(scope.openRecentsModal).toHaveBeenCalledWith(obj); 
     mockDetailController(); 
     expect(scope.recentsFoldersData).toBeDefined(); 
    }); 

    }); 

    /* helper functions */ 
    function defaultSuccessfulRecentsDataResponse() { 
    return { 
     id: 'id 1', 
     name: 'first name', 
     description: 'first description' 
    }; 
    } 

}); 

Answer 1

我可以用一個簡單的變化的函數調用的模式

function openRecentsModal(obj) { 
     $rootScope.recentsFoldersData = obj; 
     var controller = 'recentsFoldersDetailController'; 
     $modal.open({ 
     //scope: scope, 
     controller: controller, 
     templateUrl: 'js/modal/recents/folder/recentsFoldersDetail.tpl.html' 
     }); 
    } 

通過允許對象解決這個問題要放在$ rootScope（UI自舉模式的默認設置），而不是一個新的$範圍，測試回來了一個確定的值

it('should put recents object on the scope', function() { 
    mockListController(); 

    scope.openRecentsModal(defaultSuccessfulRecentsDataResponse()); 
    mockDetailController(); 
    expect(scope.recentsFoldersData).toBeDefined(); 
});