0 Replies - 190 Views - Last Post: 05 January 2014 - 03:03 PM

#1 ray1234  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 07-September 12

Testing an angular directive using jasmine

Posted 05 January 2014 - 03:03 PM

I have created a directive that would update a textbox with a certain value depending on the value selected from the dropdownlist.

so if movies was selected from the dropdown then - insert 'Actor/Title/Director' in the textbox, alltitles = "keyword" etc

Using jasmine I'm currently trying to test this behaviour out. The issue is, I my test code, when I select a different value in the dropdownlist, it's not triggering my directive, resulting in my test case failing.

I don't know where I'm going wrong?

Directive

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

        })
    }
}





Test Code
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');
});
}



Is This A Good Question/Topic? 0
  • +

Page 1 of 1