angularjs – 如何用茉莉花指令测试’点击’事件

我想用茉莉花测试“点击”事件,但我不知道如何

我的指令文件就是这样(headbarDirective.js)：

(function () {
        angular.module('app.widgets.homeHeadbar',[])
            .directive('homeHeadbar',homeHeadbar);

        function homeHeadbar() {
            return {
                restrict: 'EAC',replace: true,transclude: false,scope: {
                    name: '@',role: '@',},templateUrl: 'app/widgets/headbar/headbarView.html',link: function(scope,ele,attrs) {
                    if (!scope.name) {
                        scope.logined = false;
                    } else {
                        scope.logined = true;
                    }
                    scope.logout = function() {
                        UserService.logout();
                        $location.path('/login');
                };
                }
            };
        }
    })();

我这样的模板文件(headbarView.html)：

<nav>
  <div>
    <div class="navbar-right" ng-show="logined">

      <div class="dib fr ml20">
         <div class="user-name cwh">{{name}}</div>
         <div class="user-position cgray">{{role}}</div>
      </div>

      <a class="logout" href="javascript:;" ng-click="logout()">Log Out</a>

    </div>
  </div>
</nav>

我的测试文件就是这样(test.js)：

describe('test the headbarDirective',function(){

    beforeEach(module('templates','app','app.widgets.homeHeadbar'));

    var scope,compile,simpleHtml,UserService,location;

    beforeEach(inject(function(_$rootScope_,_$compile_,_UserService_,_$location_){
        compile = _$compile_;
        scope = _$rootScope_.$new();
        location = _$location_;
        UserService = _UserService_;
    }));

    it('test the logout click',function(){
        simpleHtml = '<home-headbar name="John" role=2></home-headbar>';
        ele = compile(angular.element(simpleHtml))(scope);
        scope.$digest();

        spyOn(UserService,'logout').and.callThrough();

        $(ele).find('.logout').click();
        scope.$digest();

        expect(UserService.logout).toHaveBeenCalled();
    });
});

测试失败,控制台结果如下：

Chrome 43.0.2357 (Windows 7 0.0.0) test the headbarDirective test the logout cli
ck Failed
        Expected spy logout to have been called.
            at Object.<anonymous> (C:/Users/IBM_ADMIN/desk/workspace/WaterFundWe
b/WebContent/test/unit/widgets/headbar/headbarDirective.js:48:30)
Chrome 43.0.2357 (Windows 7 0.0.0): Executed 11 of 11 (1 Failed) (0 secs / 0.124
Chrome 43.0.2357 (Windows 7 0.0.0): Executed 11 of 11 (1 Failed) (0.125 secs / 0
.124 secs)

意味着注销功能尚未被调用.
我的代码有什么问题吗？我如何测试ng-click事件？

让我测试一下,如果是,请随时“运行代码段”

angular.module('app.widgets.homeHeadbar',[])
  .directive('homeHeadbar',function homeHeadbar($location,UserService) {
    return {
      restrict: 'EAC',scope: {
        name: '@',attrs) {
        scope.logout = function() {
          UserService.logout();
          $location.path('/login');
        };
      }
    };
  });

describe('test the headbarDirective',function() {

  var scope,el,$compile,$location,UserService;

  beforeEach(module('app.widgets.homeHeadbar'));

  /* stub as I don't know implementations for UserService */
  beforeEach(function() {
    var _stubUserService_ = {
      logout: jasmine.createSpy('UserService.logout')
    };

    angular.module('app.widgets.homeHeadbar')
      .value('UserService',_stubUserService_);
  });

  beforeEach(inject(function($rootScope,$templateCache,_$location_,_UserService_) {
    $templateCache.put('app/widgets/headbar/headbarView.html',[
      '<nav>','  <div>','    <div class="navbar-right" ng-show="logined">','      <div class="dib fr ml20">','        <div class="user-name cwh">{{name}}</div>','        <div class="user-position cgray">{{role}}</div>','      </div>','      <a class="logout" href="javascript:;" ng-click="logout()">Log Out</a>','    </div>','  </div>','</nav>'
    ].join(''));
    $location = _$location_;
    $compile = _$compile_;
    scope = $rootScope.$new();
    UserService = _UserService_;
  }));

  it('clicks on "logout" redirects to /login page',function() {
    spyOn($location,'path')

    simpleHtml = '<home-headbar name="John" role=2></home-headbar>';
    el = $compile(angular.element(simpleHtml))(scope);
    scope.$digest();

    el.find('.logout').click();

    expect(UserService.logout).toHaveBeenCalled();
    expect($location.path).toHaveBeenCalledWith('/login');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

原文链接：https://www.f2er.com/angularjs/140871.html

angularjs – 如何用茉莉花指令测试’点击’事件

猜你在找的Angularjs相关文章