d3.js - jasmine testi bir svg öğesine tıklamak çağırıyor

Question

D3.js kitaplığını kullanan bir açısal uygulamasında grafik yönergesi var. direktifin

Bölüm yüzden

svg.selectAll('g rect') 
    .on('click', function(d) { 
     scope.clickHandler(d, scope.data); 
    }) 
    .on('mouseover', function() { 
     d3.select(this).classed('data-item-hover', true); 
    }) 
    .on('mouseout', function() { 
     d3.select(this).classed('data-item-hover', false); 
    }); 

bazı birim testlerinde bu işleyicileri kapsayacak istiyorum, ama aslında dinamik bu olayları çağırmak nasıl mücadele ediyorum gibi bazı svg elemanlarına fare olay işleyicileri ekler.

Ben benim test spec bu çalışılıyor

describe('scope.clickHandler', function() { 
    var rect; 
    beforeEach(function(){ 
     spyOn(scope, 'clickHandler'); 
     rect = svg.select('g rect')[0][0]; 
     rect.on('click')(); 
    }); 
    it('should call scope.render after a window resize event occurs', function() { 
     expect(scope.clickHandler).toHaveBeenCalled(); 
    }); 
}); 

Ancak bu bir hatayı

TypeError: undefined is not a constructor (evaluating 'rect.on('click')'

Bu SO How to invoke "click" event programmatically in d3? geldi ve ikinci cevap bu tekniği çalışırken götürdü ne olduğunu atar .

D3.js'de olayları kaydettiğim svg öğelerinde bir fare olayını nasıl çağırabilirim?

Teşekkür

Answer 1

ana sorun, undefined hatası alıyorum, bu yüzden svg.select('g rect')[0][0] bir DOM öğesi değil uygun D3 seçim olmasıdır.

(svg.select('g rect')[0][0] instanceof Element) // true 

Yani belli bir eleman bazı olayı tetiklemek için, aşağıdaki yapabilirsiniz: Dokümanlar: Bir DOM öğesi Element arabirimini uygulayan beri

Selections are arrays of elements—literally (maybe not literally...). D3 binds additional methods to the array so that you can apply operators to the selected elements...

Sen cidden bu kontrol edebilirsiniz:

var rect = svg.select('g rect') // first rect element found is assumed 
rect.on('click').call(rect.node(), rect.datum()); // as commented in above link 

Basit çalışma kemanı here.