Testing mousedown angolare, MouseMove, mouseup

Question

Nella sezione direttive del angular docs

Essi forniscono all'incirca questo esempio di come fare una cosa di trascinamento.

La mia domanda è come si dovrebbe verificare il loro esempio/implementazione:

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

ma che funziona solo per un singolo evento.

L'esempio di Angular utilizza il mouse per aggiungere gli ascoltatori di eventi mousemove e mouseup e this stackoverflow answer utilizza triggerHandler-- che impedisce bubbling/propagation.

In questo momento ho (più o meno):

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

prova sta venendo a mancare. scope.x sta registrando come 0. cosa fare?

Answer 1

Ok il modo in cui guardo questo, nell'esempio, il codice di trascinamento è in una direttiva. Quindi, quando si esamina il testing, poiché la direttiva sta manipolando la posizione dell'elemento a cui è collegata la direttiva, vorrei affermare le modifiche nella posizione dell'elemento piuttosto che asserire i valori delle variabili dell'ambito interno.

Dato che abbiamo chiamato la direttiva myDraggable che viene applicato in questo modo <span my-draggable="">Drag Me</span>, durante la prova:

1. Consente compilare la direttiva.

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

2. Poi inviare mouse evento per elemento compilato

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

3. Dopo di che, perché l'evento del mouse mossa è attaccato al $document, consente di inviare il mouse evento del mouse mossa per $document

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

4. E, infine, cerchiamo di affermare la posizione finale dell'elemento compilato

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

E quando abbiamo messo tutto insieme,

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

Ecco documentazione ufficiale angolare sul metodo consigliato di testare una direttiva: https://docs.angularjs.org/guide/unit-testing#testing-directives

Ecco qui e plunker che implementa tutto ciò di cui ho appena parlato: https://plnkr.co/edit/QgWiVlbNOKkhn6wkGxUK?p=preview

Answer 2

È possibile eseguire il test/asserimento per scope.x, ma considerare Chanthu come risposta sopra - il modo di compilare la direttiva con un ambito.

Oltre a ciò, il motivo per cui il test ha esito negativo è che tutti gli eventi, tranne che il mouse, vengono attivati ​​su un documento a differenza dei casi del test case.

Prova seguente frammento di codice:

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