代码之家 › 专栏 › 技术社区 › fmquaglia

使用jasmine模拟web浏览器定向更改事件以测试绑定的事件处理程序函数

orientation-changes jasmine angularjs-directive unit-testing javascript

0

fmquaglia · 技术社区 · 11 年前

我有一个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 回复 | 直到 11 年前

1

2

Tunaki 10 年前

几点:

我将使用以下方法检查方向类型:
```
$window.screen.orientation.type
```
无需运行媒体查询。

我使用以下方法在测试中触发事件:

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