如何測試其對角formly

Question

選擇控制加載數據內部控制器我有一個用戶界面，選擇字段

{ 
    key: 'data_id', 
    type: 'ui-select', 
    templateOptions: { 
    required: true, 
    label: 'Select label', 
    options: [], 
    valueProp: 'id', 
    labelProp: 'name' 
    }, 
    controller: function($scope, DataService) { 
    DataService.getSelectData().then(function(response) { 
     $scope.to.options = response.data; 
    }); 
    } 
} 

如何訪問，在我的單元測試內部控制和檢查數據加載的選擇字段實際上工作？

UPDATE： 測試的例子可能是這樣：

var initializePageController = function() { 
    return $controller('PageCtrl', { 
    '$state': $state, 
    '$stateParams': $stateParams 
    }); 
}; 

var initializeSelectController = function(selectElement) { 
    return $controller(selectElement.controller, { 
    '$scope': $scope 
    }); 
}; 

然後測試用例是這樣的：

it('should be able to get list of data....', function() { 
    $scope.to = {}; 
    var vm = initializePageController(); 

    $httpBackend.expectGET(/\/api\/v1\/data...../).respond([ 
    {id: 1, name: 'Data 1'}, 
    {id: 2, name: 'Data 2'} 
    ]); 

    initializeSelectController(vm.fields[1]); 
    $httpBackend.flush(); 

    expect($scope.to.options.length).to.equal(2); 
}); 

Answer 1

你能做到這一點的幾種方法。一種選擇是測試包含此配置的控制器。所以，如果你有場配置設置爲$scope.fields，像這樣：

$scope.fields = [ { /* your field config you have above */ } ]; 

然後在您的測試，你可以這樣做：

$controller($scope.fields[0].controller, { mockScope, mockDataService }); 

然後做你的斷言。

Answer 2

我最近爲使用ui-select的類型編寫了一些測試。我實際上創建了一個formly-form，然後在那裏運行測試。我用下面的助手

function compileFormlyForm(){ 
    var html = '<formly-form model="model" fields="fields"></formly-form>'; 

    var element = compile(html)(scope, function (clonedElement) { 
     sandboxEl.html(clonedElement); 
    }); 

    scope.$digest(); 
    timeout.flush(); 
    return element; 
} 

function getSelectController(fieldElement){ 
    return fieldElement.find('.ui-select-container').controller('uiSelect'); 
} 

function getSelectMultipleController(fieldElement){ 
    return fieldElement.find('.ui-select-container').scope().$selectMultiple; 
} 

function triggerEntry(selectController, inputStr) { 
    selectController.search = inputStr; 

    scope.$digest(); 
    try { 
     timeout.flush(); 
    } catch(exception){ 
     // there is no way to flush and not throw errors if there is nothing to flush. 
    } 
} 

// accepts either an element or a select controller 
function triggerShowOptions(select){ 
    var selectController = select; 
    if(angular.isElement(select)){ 
     selectController = getSelectController(select); 
    } 
    selectController.activate(); 
    scope.$digest(); 
} 

測試

it('should call typeaheadMethod when the input value changes', function(){ 
    scope.fields = [ 
     { 
      key: 'selectOneThing', 
      type: 'singleSelect' 
     }, 
     { 
      key: 'selectManyThings', 
      type: 'multipleSelect' 
     } 
    ]; 

    scope.model = {}; 

    var formlyForm = compileFormlyForm(); 
    var selects = formlyForm.find('.formly-field'); 

    var singleSelectCtrl = getSelectController(selects.eq(0)); 
    triggerEntry(singleSelectCtrl, 'woo'); 
    expect(selectResourceManagerMock.searchAll.calls.count()).toEqual(1); 

    var multiSelectCtrl = getSelectController(selects.eq(1)); 
    triggerEntry(multiSelectCtrl, 'woo'); 
    expect(selectResourceManagerMock.searchAll.calls.count()).toEqual(2); 
});