how to test inner controller which loads data for select control in angular-formly

Question

I have a ui-select field

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

How can I access that inner controller in my unit tests and check that data loading for the select field actually works ?

UPDATE: An example of a test could be as such:

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

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

Then test case looks like:

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

You could do it a few ways. One option would be to test the controller that contains this configuration. So, if you have the field configuration set to $scope.fields like so:

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

Then in your test you could do something like:

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

Then do your assertions.

Answer 2

I recently wrote some test for a type that uses ui-select. I actually create a formly-form and then run the tests there. I use the following helpers

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

An example of one of the tests

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