एक कोणीय निर्देश का परीक्षण करें जो jQuery

Question

का उपयोग करता है मुझे अपने कुछ कोणीय निर्देशों के लिए यूनिट परीक्षण लिखने में परेशानी हो रही है। विशेष रूप से, जो निर्देश के अंदर jQuery का उपयोग करते हैं। मैंने नीचे एक न्यूनतम उदाहरण दिया है जो मेरी समस्या को दर्शाता है।

यह मूर्ख निर्देश तत्व पर क्लिक ईवेंट को बांधता है। क्लिक करने पर, यह तत्व को छुपाता है। According to Angular, निर्देशों में पारित तत्व jQuery तत्वों के रूप में लपेटा जाएगा। यदि jQuery उपलब्ध है तो यह jQuery का उपयोग करेगा, अन्यथा यह कोणीय के jQuery लाइट का उपयोग करेगा। दरअसल, अगर मैं jQuery में शामिल ब्राउज़र में इस निर्देश का उपयोग करता हूं, तो निर्देश क्लिक करता है और क्लिक किए गए तत्व को छुपाएगा। "है एक समारोह अपरिभाषित नहीं"

describe('clickhide', function() { 
    var scope, elm; 

    beforeEach(module('MyApp')); 

    beforeEach(inject(function($rootScope, $compile) { 
     scope = $rootScope; 
     elm = angular.element('<div clickhide></div>'); 
     $compile(elm)(scope); 
     scope.$digest(); 
    })); 

    it('should do a click', function() { 
     elm[0].click(); 
     //OOPS: undefined is not a function error 
     expect($(elm).find(":hidden").length).toBe(1); 
    }); 
}); 

जब मैं इस परीक्षण चलाने के लिए, इसके बारे में एक त्रुटि के साथ विफल जिसका अर्थ है कि jQuery लोड नहीं था:

angular.module('myApp').directive('clickhide', function() { return { 
    link: function(scope, element, attrs) { 
     element.bind('click', function(e) { 
      element.hide(); 
      scope.$digest(); 
     }); 
    } 
}}); 

यहाँ इस निर्देश के लिए कर्मा इकाई परीक्षण कल्पना है और कोणीय ने इसके बजाय jQuery लाइट का उपयोग किया, जो छुपा() को परिभाषित नहीं करता है।

मुझे इसके आसपास काम करने के दो तरीके मिल गए हैं।

1. jQuery का उपयोग न करें। मेरे निर्देशों को फिर से लिखना आवश्यक है जो मैं नहीं करना चाहता हूं।

2. स्पष्ट रूप से jQuery निर्देशों को बनाने के लिए मेरे निर्देशों में तत्वों को लपेटें: $(element).hide()। इसके निर्देशों में संशोधन की भी आवश्यकता है, जिसे मैं नहीं करना चाहूंगा। यदि कोई विकल्प नहीं है, तो मैं निश्चित रूप से ऐसा कर सकता हूं।

मुझे लगता है कि एक वेब ब्राउज़र में उपयोग करते समय यूनिट परीक्षण जैसे निर्देशों के अंदर स्वचालित रूप से jQuery का उपयोग करने के लिए कोणीय प्राप्त करना संभव होना चाहिए। मेरा मानना ​​है कि मुख्य बिंदु एंगुलर के दस्तावेज से यह पंक्ति है:

jQuery का उपयोग करने के लिए, बस इसे DOMContentLoaded ईवेंट से निकालकर लोड करें।

यह मेरे लिए स्पष्ट नहीं है जब DOMContentLoaded यूनिट परीक्षण चलाते समय होता है। मेरे कर्म कॉन्फ़िग फ़ाइल, पहले फ़ाइल के रूप में jQuery शामिल कोणीय से पहले:

module.exports = function(config) { 
    config.set({ 
    basePath: '../../', 
    frameworks: ['jasmine', 'ng-scenario'], 
    files: [ 
     'app/bower_components/jquery/dist/jquery.min.js', 
     'app/bower_components/angular/angular.js', 
     'app/bower_components/angular-route/angular-route.js', 
     'app/bower_components/angular-sanitize/angular-sanitize.js', 
     'app/bower_components/angular-mocks/angular-mocks.js', 
     ... 
    ], 
    exclude: [], 
    reporters: ['progress'], 
    port: 9876, 
    runnerPort: 9100, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    captureTimeout: 60000, 
    singleRun: false 
    }); 
}; 

मैं परीक्षण में jQuery इंजेक्षन की जरूरत है? शायद यह कर्म की सीमा है? किसी को पता है?

Answer 1

परीक्षण के प्रत्येक ब्लॉक से पहले $ ओवरराइड करने का प्रयास करें।

beforeEach(function() { 
    $.fn.hide = function() { 
    this.css("display", "none") 
    }; 
});