0

私はui-selectフィールドを持っています

{
  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;
    });
  }
}

単体テストでその内部コントローラーにアクセスし、選択フィールドのデータ読み込みが実際に機能することを確認するにはどうすればよいですか?

更新: テストの例は次のようになります。

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);
});
4

2 に答える 2

0

私は最近、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);
});
于 2015-06-19T00:49:17.730 に答える