模拟Web浏览器orientationchange事件以使用jasmine测试绑定事件处理函数

时间:2015-01-30 13:22:04

标签: javascript unit-testing angularjs-directive jasmine orientation-changes

我有一个angularjs指令为方向更改事件创建一个事件处理程序,以便在方向更改为横向时添加类名(它仍然需要改进,所以现在请耐心等待):

angular.module('myApp')
  .directive('orientationHandler', function ($rootScope, $timeout, $window) {
    return function(scope, element, attrs) {
      var className = 'mobile_landscape';
      var mediaQuery = 'only screen and (max-width: 768px) and (orientation: landscape)';
      var orientationCheck = function() {
        if ($window.matchMedia(mediaQuery).matches) {
          element.addClass(className);
          $rootScope.$broadcast('Orientation.change', 'landscape');
        } else {
          element.removeClass(className);
          $rootScope.$broadcast('Orientation.change', 'portrait');
        }
      };
      $window.addEventListener('orientationchange', function() {
          $timeout(orientationCheck, 100);
          $timeout(orientationCheck, 200);
        },
        false
      );
      $rootScope.$on('$viewContentLoaded', function() {
        $timeout(orientationCheck, 100);
        $timeout(orientationCheck, 200);
      });
    };
  });

现在我想测试茉莉花这样一个指令:

//TODO: Find a way to test orientation change events
describe('Directive: orientationHandler', function () {

  // load the directive's module
  beforeEach(module('myApp'));

  var element,
      scope,
      $window;

  beforeEach(inject(function ($rootScope, $compile, $httpBackend, _$window_) {
    $window = _$window_;
    scope = $rootScope.$new();
    element = angular.element('<div orientation-handler></div>');
    element = $compile(element)(scope);
    $httpBackend.whenGET(/.*/).respond(200);
  }));

  it('should broadcast an event when changed the orientation', function () {
    var message;
    scope.$on('Orientation.change', function(event, value) {
      message = value;
    });
    angular.element($window).trigger('orientationchange');
    scope.$apply();
    expect(message).toBeDefined();
    expect(angular.isString(message)).toBe(true);
  });
});

那么,有没有办法以编程方式触发方向更改事件,或以某种方式模拟它以测试绑定事件处理程序?

谢谢!

1 个答案:

答案 0 :(得分:1)

几点:

  1. 我会使用以下方法检查方向类型:

    $window.screen.orientation.type
    

    无需运行媒体查询。

  2. 我使用以下内容在我的测试中触发事件:

    function dispatchOrientationChangeEvent() {
      var evt, orientationEventType = 'orientationchange';
      evt = $window.document.createEvent('HTMLEvents');
      evt.initEvent(orientationEventType, true, true);
      $window.dispatchEvent(evt);
    }