单元测试服务元素类更改

Question

我有一个服务，将类添加/删除到几个HTML元素。

我试图根据调用哪种方法来测试这些更改。

define(['require', 'angular'], function (require, angular) { 
    'use strict'; 

    var myFactory = function() { 

     var header = angular.element("#app-header"); 
     var footer = angular.element(document.getElementsByClassName("app-footer")); 
     var change = false; 

     return { 
      red: function() { 
       header.addClass("alert-warning"); 
       footer.removeClass("notify"); 
       change = true; 
      }, 
      black: function() { 
       if (change) { 
        this.red(); 
       } 
      } 
     }; 
    }; 

    return myFactory; 
}); 

我ahve尝试：

describe('<-- MyFactory Spec ------>', function() { 

    var myFactory, $compile, scope; 

    beforeEach(angular.mock.module('MyApp')); 

    beforeEach(inject(function(_myFactory_, _$compile_, _$rootScope_){ 
     myFactory = _myFactory_; 
     $compile = _$compile_; 
     scope = _$rootScope_.$new(); 
    })); 

    it('should open the menu', function(){ 
     var header = angular.element("#app-header"); 
     header = $compile(header)(scope); 
     scope.$digest(); 
     myFactory.red(); 
     scope.$apply(); 
     expect(header).toHaveClass('alert-warning'); 
     expect(change).toBeTruthy(); 
    }); 
}); 

通过上述，我得到错误：

TypeError: 'undefined' is not a function (evaluating 'expect(header).toHaveClass('alert-warning')') 

Answer 1

我怀疑你是不是在茉莉的jQuery的匹配拉动。

.toHaveClass(...) 

不是一个标准的茉莉花匹配，你需要用jasmine-jquery