title: Testing angular mousedown, mousemove, mouseup
body: <p>In the directives section of the <a href="https://docs.angularjs.org/guide/directive#creating-a-directive-that-adds-event-listeners" rel="nofollow noreferrer">angular docs</a></p>
  
  <p>They provide roughly this example of how to make a drag thing. </p>
  
  <p>My question is how would you test THEIR EXAMPLE/implementation:</p>
  
  <pre><code>  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);
    }
  }
  </code></pre>
  
  <p>but that only works for a single event. </p>
  
  <p>Angular's example uses the mousedown to add the mousemove and mouseup event listeners, and <a href="https://stackoverflow.com/questions/28555326/how-do-i-trigger-a-mousemove-event-in-an-angularjs-unit-test">this stackoverflow answer</a> uses triggerHandler-- which prevents bubbling/propagation.</p>
  
  <p>right now i have (roughly):</p>
  
  <pre><code>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);
    });
  });
  </code></pre>
  
  <p>test is failing. scope.x is logging as 0.
  what do?</p>