यूनिट एक एंगुलरजेएस निर्देश का परीक्षण करता है जो पृथक दायरे के साथ एक विशेषता को देखता है

Question

मेरे पास एक निर्देश है जो समय के साथ बदलते निर्देश में डेटा को पास करने के लिए एक अलग-अलग दायरे का उपयोग करता है। यह उस मूल्य पर परिवर्तन के लिए देखता है और प्रत्येक परिवर्तन पर कुछ गणना करता है। मैं निर्देश का परीक्षण इकाई के लिए प्रयास करते हैं, मैं घड़ी को गति प्रदान करने के लिए नहीं मिल सकता है (संक्षिप्तता के लिए छंटनी की है, लेकिन मूल अवधारणा नीचे दिखाया गया है):

निर्देशक:

angular.module('directives.file', []) 
.directive('file', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     filename: '@', 
    }, 
    link: function(scope, element, attrs) { 
     console.log('in link'); 
     var convertToCSV = function(newItem) { ... }; 

     scope.$watch('data', function(newItem) { 
     console.log('in watch'); 
     var csv_obj = convertToCSV(newItem); 
     var blob = new Blob([csv_obj], {type:'text/plain'}); 
     var link = window.webkitURL.createObjectURL(blob); 
     element.html('<a href=' + link + ' download=' + attrs.filename +'>Export to CSV</a>'); 
     }, true); 
    } 
    }; 
}); 

टेस्ट:

describe('Unit: File export', function() { 
    var scope; 

    beforeEach(module('directives.file')); 
    beforeEach(inject(function ($rootScope, $compile) { 
    scope = $rootScope.$new(); 
    }; 

    it('should create a CSV', function() { 
    scope.input = someData; 
    var e = $compile('<file data="input" filename="filename.csv"></file>')(scope); 
    //I've also tried below but that does not help 
    scope.$apply(function() { scope.input = {}; }); 
    }); 

घड़ी को ट्रिगर करने के लिए मैं क्या कर सकता हूं ताकि मेरा "घड़ी" डिबगिंग कथन ट्रिगर हो? जब मैं संकलित करता हूं तो मेरा "लिंक में" ट्रिगर हो जाता है।

Answer 1

ट्रिगर होने के लिए $watch के लिए, एक डाइजेस्ट चक्र उस परिभाषा या उसके माता-पिता के दायरे पर होना चाहिए। चूंकि आपका निर्देश एक अलग दायरा बनाता है, इसलिए यह मूल दायरे से प्राप्त नहीं होता है और इस प्रकार जब तक आप $apply को उचित दायरे पर कॉल नहीं करते हैं, तब तक इसके पर्यवेक्षक संसाधित नहीं होंगे।

आप तत्व $compile सेवा द्वारा दिया पर scope() फोन करके निर्देश गुंजाइश पहुँच सकते हैं:

scope.input = someData; 
var e = $compile('<file data="input" filename="filename.csv"></file>')(scope); 
e.isolateScope().$apply(); 

यह jsFiddler कि एक मिसाल है।