测试角质鼠标，摩丝表情，鼠标

Question

在角文档的指令部分中

他们大致提供了这个如何制造拖曳物的例子。

我的问题是，您将如何测试它们的示例/实现：

  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);
  }
}

但这只适用于单个事件。

example的示例使用mousedown来添加mousemove和mouseup事件侦听器，而这个堆叠溢出的答案使用触发器处理程序--这可以防止冒泡/传播。

现在我(粗略地)：

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);
  });
});

测试失败了。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

下面是实现我刚才提到的所有内容的柱塞：https://plnkr.co/edit/QgWiVlbNOKkhn6wkGxUK?p=preview

Answer 2

您也可以测试/断言作用域x，但请考虑Chanthu的上述答案--使用作用域编译指令的方法。

此外，您的测试失败的原因是除了鼠标向下触发的所有事件，与测试用例描述不同的是，这些事件都是在文档中触发的。

试试下面的片段：

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