テスト角度のマウスダウン、のMouseMove、のmouseup

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

だけが単一のイベントのために働くこと。

Angularの例では、mousedownとmouseupイベントリスナーを追加するためのmousedownを使用しています。また、this stackoverflow answerでは、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

私はこれを見て、この例では、ドラッグするコードが指示にあります。したがって、テストを見ると、ディレクティブがそのディレクティブがアタッチされている要素の位置を操作しているため、内部スコープ変数の値をアサートするのではなく、要素の位置の変更をアサートします。

1. ディレクティブをコンパイルすることができます：

   は、我々はテストがとても<span my-draggable="">Drag Me</span>、同様に適用されるmyDraggableと呼ばれるディレクティブを持って考えます。

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

2. そしてマウス移動イベントが$documentに取り付けられているので、$documentにマウスのマウス移動イベントを送信することができ、コンパイル要素その後

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

3. にイベントをマウスダウン送ります

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

4. そして最後に、のは

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

   ここで推奨される方法に関する公式の角度のドキュメントだ、コンパイル要素

   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

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