jquery ui使用茉莉花的自动完成和角度指令测试

Question

我已经创建了自动完成功能和用户jquery ui autocompleter的指令来获取自动完成功能。

var directive = module.exports = function(constants,$parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
      var searchFunction = $parse(attr.searchFunction); 
      var setValueFunc = $parse(attr.ngModel).assign; 
      var autocompleteclass = attr.autoCompleteClass; 
      scope.$watch(attr.autoCompleteData, function() { 
       element.autocomplete('option', { 
        source: scope.$eval(attr.autoCompleteData) 
       }); 
      }); 

      element.autocomplete({ 
       source: scope.$eval(attr.autoCompleteData), 
       select: function(event, ui) { 
        setValueFunc(scope, ui.item.value); 
        var originalEvent = event.originalEvent; 
        while (originalEvent.originalEvent !== void 0) { 
         originalEvent = originalEvent.originalEvent; 
        } 
        if (originalEvent.type === constants.CLICK_EVENT) { 
         searchFunction(scope,{selectedText: scope.$eval(attr.autoCompleteModel)}); 
        } 
       }, 
       focus: function(event) { 
        event.preventDefault(); 
       } 
      }).autocomplete('widget').addClass('dropdown-menu').addClass(autocompleteclass); 

      element.keyup(function(event) { 
       if (event.which === constants.ENTER_KEY_CODE) { 
        element.autocomplete('close'); 
        searchFunction(scope,{selectedText: scope.$eval(attr.autoCompleteModel)}); 
        scope.$apply(); 
       } 
      }); 

     } 
    }; 
}; 
directive.$inject = ['constants','$parse']; 

我想用茉莉花编写测试用例。我可以使用回车键来测试keyup事件。但我无法测试选择事件。第二点是，我已经通过了相同的4个元素。如果我尝试在ul元素里面搜索li，那么我得到的li元素长度等于0.

请找同样的测试用例。

describe('Directive test', function() { 

    var $scope, $compile, autoCompleteElement, $document; 

    beforeEach(inject(function ($rootScope, _$compile_, _$document_) { 
     $scope = $rootScope; 
     $compile = _$compile_; 
     $document = _$document_; 

     $scope.dummyFunction = function(){}; 
     $scope.searchedFun = function(searchText) { 
      $scope.dummyFunction(); 
     }; 

     $scope.names = ['name 1', 'name 2', 'name 3', 'name 4']; 
     var template = angular.element(
      '<form name="form"><input type="text" auto-complete ' + 
      ' class="form-control search-input"'+ 
      ' data-ng-model="search.text" name="name" ' + 
      ' auto-complete-data="names" '+ 
      ' auto-complete-model="searchText" '+ 
      ' search-func="searchedFun(searchText)" ' + 
      '/> </form>' 
     ); 
     $scope.search = {text: null}; 
     autoCompleteElement = $compile(template)($scope); 
     $scope.$digest(); 

    })); 

    it('should call search function on click in input box', inject(function($rootScope) { 
     $scope.search.text = 'q'; 
     autoCompleteElement.scope().$apply(); 
     expect($document.find('body').find('ul')).toBeDefined(); 
    })); 

    it('should select the data from option and call the function on enter event', inject(function($rootScope) { 
     $scope.search.text = 'q'; 
     var event = angular.element.Event('keyup'); 
     event.which = 13; 
     autoCompleteElement.find('input').trigger(event); 
     $rootScope.$apply(); 
     expect($document.find('body').find('#ui-id-1').attr('style')).toContain('display: none;'); 
    })); 

    it('should select the data from option and call the function on select event', inject(function($rootScope) { 
     $scope.search.text = 'q'; 
     var event = angular.element.Event('keypress'); 
     //autoCompleteElement.find('input').trigger(event); 
     $document.find('body').find('#ui-id-1').trigger(event); 
     $rootScope.$apply(); 
     expect($document.find('body').find('#ui-id-1').attr('style')).toContain('display: none;'); 
    })); 
}); 

请指导我。如何检查ng模型是否更新？如何检查选择事件控制器的功能被称为？如何检查选择事件？

在此先感谢。 Jay

Answer 1

如何检查ng模型是否更新？

link: function(scope, element, attrs, ctrl) { 
    ctrl.$viewChangeListeners.push(function() { 
    /*...*/ 
    } 
) 
/*...*/ 
} 

如何检查选择事件的控制器的功能是叫什么名字？

select: function foo(event, ui) { 
    console.log("Function called is: " + this.name); 
    /*...*/ 
    } 

如何检查select事件？

select: function(event, ui) { 
    $scope.$broadcast("selectCalled", { newValue: $scope.id++, oldValue: $scope.id }); 
    $scope.$on("selectCalled", function(event, options) { 
    console.log(String().concat("Event: ", event,"Old: ", options.oldValue, "New: ", options.newValue); 
    /*...*/ 
    } 
) 
}); 

和Jasmine：

it('should call controller', function() { 
    compileInput('<input type="text" ng-model="name" />'); 
    var ctrl = inputElm.controller('ngModel'); 

    browserTrigger(inputElm, 'keydown', {target: inputElm[0]}); 
    inputElm.val('f'); 
    browserTrigger(inputElm, 'change'); 
    expect(inputElm).toBeDirty(); 

    ctrl.$setPristine(); 
    scope.$apply(); 

    $browser.defer.flush(); 
    expect(inputElm).toBePristine(); 
}); 

参考

• AngularJS: inputSpec.js