测试角度mousedown,mousemove,mouseup

Question

在angular docs的指令部分

它们大致提供了如何制作拖动物的示例.

我的问题是你如何测试他们的例子/实施:

  var startX = 0, startY = 0;
  scope.x = 0;
  scope.y = 0;
  element.css({
    top: scope.y, 
    left: scope.x
  });

  element.on('mousedown', function(event) {
    // Prevent default dragging of selected content
    event.preventDefault();
    startX = event.pageX - scope.x;
    startY = event.pageY - scope.y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
  });

  function mousemove(event) {
    scope.y = event.pageY - startY;
    scope.x = event.pageX - startX;
    element.css({
      top: scope.y + 'px',
      left: scope.x + 'px'
    });
  }

  function mouseup() {
    $document.off('mousemove', mousemove);
    $document.off('mouseup', mouseup);
  }
}

但这只适用于单个事件.

Angular的示例使用mousedown添加mousemove和mouseup事件侦听器,此stackoverflow应答使用triggerHandler--它可以防止冒泡/传播.

现在我(大致):

describe('on mousedown it', function(){
  it('moves a thing', function(){
    expect(scope.x).toBe(0);
    element.triggerHandler({type: 'mousedown', pageX: 0, pageY:0});
    element.triggerHandler({type: 'mousemove', pageX:10, pageY:10);
    expect(scope.x).toBe(10);
  });
});

测试失败了.scope.x记录为0.什么做？

Answer 1

好的，我看这个的方式，在示例中，拖动代码位于指令中。因此，在查看测试时，因为指令正在操纵指令所附加的元素的位置，所以我会断言元素位置的更改，而不是断言内部范围变量的值。

鉴于我们有一个名为的指令，在测试时myDraggable应用如下：<span my-draggable="">Drag Me</span>

1. 让我们编译该指令。

   var scope = $rootScope.$new(); var elem = $compile('<span my-draggable="">Drag Me</span>')(scope);

2. 然后将鼠标按下事件发送到编译的元素

   elem.triggerHandler({type: 'mousedown', pageX: 0, pageY:0});

3. 之后，因为鼠标移动事件附加到$document，所以让我们将鼠标移动事件发送到$document

   $document.triggerHandler({type: 'mousemove', pageX: 10, pageY:20});

4. 最后，让我们断言编译元素的最终位置

   expect(elem.css('top')).toBe('20px') expect(elem.css('left')).toBe('10px')

当我们把它们放在一起时，

describe('on mousedown it', function(){
  beforeEach(module('dragModule'));

  it('moves a thing', inject(function($compile, $rootScope, $document){
    var scope = $rootScope.$new();
    var elem = $compile('<span my-draggable="">Drag Me</span>')(scope);
    $rootScope.$digest();

    elem.triggerHandler({type: 'mousedown', pageX: 0, pageY:0});
    $document.triggerHandler({type: 'mousemove', pageX: 10, pageY:20});

    expect(elem.css('top')).toBe('20px');
    expect(elem.css('left')).toBe('10px');
  }));
});

以下是有关测试指令的推荐方法的官方角度文档：https://docs.angularjs.org/guide/unit-testing#testing-directives

这是实现我刚才谈到的所有内容的 plunker：https://plnkr.co/edit/QgWiVlbNOKkhn6wkGxUK ?p=preview