web-dev-qa-db-ja.com

ジャスミンを使用してディレクティブで「ng-click」イベントをテストする方法

angular with jasmineで 'ng-click'イベントをテストしたいのですが、方法がわかりません

私のディレクティブファイルは次のようなものです（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,ele,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();
    });
});

そしてテストは失敗しました、console次のような結果：

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イベントをテストするにはどうすればよいですか？

angularjsjasminekarma-jasmine
12
Chicheng Deng

テストさせていただきますので、お気軽に「コードスニペットを実行」してください

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

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

  var scope, el, $compile, $location, simpleHtml, 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, _$compile_, _$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>
16
Krzysztof Safjanowski