यूनिट परीक्षण AngularJS निर्देश, पोस्टलिंक डी 3 डीओएम

Question

नहीं बदल रहा है मैं जैस्मीन का उपयोग कर एंगुलरजेएस निर्देश का परीक्षण करने की कोशिश कर रहा हूं। निर्देश डी 3js का उपयोग कर पोस्टलिंक चरण में टेम्पलेट में एसवीजी तत्व जोड़ने के लिए है। यह वास्तविक अनुप्रयोग में ठीक काम करता है।

इकाई परीक्षण में ऐसा प्रतीत होता है कि डी 3 कोड कभी निष्पादित नहीं होता है।

इस कोड का एक सरलीकृत संस्करण है कि अभी भी त्रुटि को पुनरुत्पादित करता है:

describe('directive test', function() { 

    var element, scope; 

    beforeEach(module('app')); 

    beforeEach(inject(function ($rootScope, $compile) { 
    scope = $rootScope.$new(); 
    element = '<d3-test></d3-test>'; 
    element = $compile(element)(scope); 
    scope.$apply(); 
    })); 

    it('should have an SVG child element', function() { 
    expect(element.html()).toEqual('<div id="map"><svg></svg></div>'); 
    }); 

}); 

त्रुटि मैं प्राप्त है:

PhantomJS 1.9.8 (Mac OS X) directive test should have an SVG child element FAILED 
    Expected '<div id="map"></div>' to equal '<div id="map"><svg></svg></div>'. 

angular.module('app', []); 

angular.module('app').directive('d3Test', function() { 
    return { 
    template: '<div id="map"></div>', 
    restrict:'E', 
    scope: { 
     someAttr: '@', 
    }, 
    link: function postLink(scope, element, attrs) { 

     d3.select('#map').append('svg'); 
    } 
    }; 
}); 

इस इकाई परीक्षण है

क्या मेरी उम्मीद गलत है कि मैं डीओएम परिवर्तन डी 3 के लिए कैसे परीक्षण कर सकता हूं? मैं इसका सबसे अच्छा परीक्षण कैसे कर सकता हूं?

Answer 1

समस्या बहुत सरल है। d3.select विधि window.document में तत्व की खोज कर रही है। आपके परीक्षण मामले में आपका तत्व अलग डोमेन तत्व में है और window.document का हिस्सा नहीं है।

इसे ठीक करने के लिए आप वैश्विक चयनकर्ता का उपयोग करने के बजाय सीधे निर्देश के तत्व के माध्यम से नोड प्राप्त कर सकते हैं।

d3.select(element.find('div#map')[0]).append('svg'); 

नोट: यह कोड कोणीय + jQuery के साथ काम करता है। यदि आप अपने प्रोजेक्ट के अंदर jQuery का उपयोग नहीं करते हैं तो आपको चयनकर्ता को अनुकूलित करने की आवश्यकता हो सकती है क्योंकि तब आप टैग नाम से लुकअप तक सीमित हैं। https://docs.angularjs.org/api/ng/function/angular.element