2014-01-05 36 views
0

我已经创建了一个指令,用于根据从下拉列表中选择的值更新一个具有特定值的文本框。使用茉莉花测试角度指令

因此,如果电影是从下拉列表中选择,然后 - 插入文本框“演员/标题/导演, alltitles =“关键词”等

使用茉莉我目前正试图测试这个行为了。问题是,我的测试代码,当我在下拉列表中选择不同的值时,它不会触发我的指令,导致我的测试用例失败。

我不知道我要去哪里错了?

指令

myAppmodule.directive("updateSearchCategory", function (mainSearchFactory) { 
return { 
    link: function (scope, element, attrs) { 
     scope.$watch("searchCategory", function (newValue) { 
      if (mainSearchFactory.mainSearchInitialText != null) { 
       var text = mainSearchFactory.mainSearchInitialText(newValue); // create interface in javascript 
       angular.element(element).val(mainSearchFactory.mainSearchInitialText(newValue)); 
      } 
      else { 
       throw { ErrorType: "NullReferenceException", Message: "argument passed in was null", Location: "updateTextDependingonSelectedItem directive" }; 
      } 

     }) 
    } 
} 

});

测试代码

describe('updateTextDependingOnSelectedItem', function() { 

var element; 

beforeEach(module('myApp')); 
beforeEach(inject(function ($compile, $rootScope) { 

    // set up the scope 
    var scope = $rootScope; 
    scope.DropDownItems = ["All Titles", "Movies", "Games"]; 
    scope.searchCategory = scope.DropDownItems[0]; 

    //create and compile the directive 
    element = angular.element('<div id="MainPageHeader">' +     
       '<select data-ng-model="searchCategory" data-ng-options="item for item in DropDownItems" class="itemTypesDropDownList"></select>' + 
       '<input type="text" id="headerSearch" update-search-        category="searchCategory" />' + 
       '</div>'); 

    $compile(element)(scope); 
    scope.$digest(); 
    console.log(element[0].outerHTML); 
})); 

    it('when movies is selected add text "Actor/Title/Director" to search textbox', function() { 
    element.find('.itemTypesDropDownList').val(2); // 1 is index number for Movies 
    expect(element.find('#headerSearch').val()).toContain('Actor/Title/Director'); 
}); 
} 

感谢

回答

0

您需要将范围与scope = $rootScope.$new();

设置为新rootscope除非你提供确切的错误代码那里有没有多少人知道了。

Ode to Code blog对Angular的一些简单单元测试有很好的指导,您可能会发现很有帮助。