यूनिट एक निर्देश का परीक्षण करता है जो AngularJS

Question

में नियंत्रक को परिभाषित करता है, मैं कर्म और जैस्मीन का उपयोग करके निर्देश का परीक्षण करने की कोशिश कर रहा हूं जो कुछ चीजें करता है। सबसे पहले यह एक टेम्पलेट यूआरएल का उपयोग करता है और दूसरा यह एक नियंत्रक को परिभाषित करता है। यह सही शब्दावली नहीं हो सकती है, लेकिन यह इसकी घोषणा में एक नियंत्रक बनाता है। कोणीय अनुप्रयोग स्थापित किया गया है ताकि प्रत्येक इकाई अपने मॉड्यूल के भीतर निहित हो। उदाहरण के लिए, सभी निर्देश मॉड्यूल app.directive के भीतर शामिल हैं, सभी नियंत्रक app.controller के अंतर्गत निहित हैं, और सभी सेवाएं app.service आदि के भीतर निहित हैं

चीजों को और जटिल करने के लिए, इस निर्देश के भीतर परिभाषित नियंत्रक को एक निर्भरता और इसमें एक ऐसा फ़ंक्शन होता है जो $ स्कोप पर मान सेट करने के लिए $ http अनुरोध करता है। मुझे पता है कि मैं $ http कॉल का अनुकरण करने के लिए $ httpBackend नकली का उपयोग करके इस निर्भरता का नकल कर सकता हूं और उचित कार्य को इस फ़ंक्शन के कॉल पर वापस कर सकता हूं। मैंने अपने द्वारा बनाए गए अन्य यूनिट परीक्षणों पर कई बार ऐसा किया है, और इस अवधारणा पर बहुत अच्छी समझ है।

नीचे दिया गया कोड कॉफीस्क्रिप्ट में लिखा गया है।

<div> 
     {{model.value_one}} {{model.value_two}} 
    </div> 

0123:

angular.module("app.service") 
     .factory 'Service', ['$http', ($http) -> 

     getValue:() -> 
     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 

यहाँ दृश्य है:

angular.module('app.directive') 
     .directive 'exampleDirective', [() -> 
     restrict: 'A' 
     templateUrl: 'partials/view.html' 
     scope: true 
     controller: ['$scope', 'Service', ($scope, Service) -> 
      $scope.model = {} 
      $scope.model.value_one = 1 

      # Call the dependency 
      Service.getValue() 
      .success (data) -> 
       $scope.model.value_two = data 
      .error -> 
       $scope.model.value_two = 0 
     ] 
     ] 

यहाँ निर्भरता सेवा है:

यहाँ मेरी निर्देश है

मैंने इसे थोड़ा सा सरल बना दिया है, क्योंकि मेरा लक्ष्य केवल यह समझने के लिए है कि इसे कैसे तारित किया जाए, मैं इसे वहां से ले जा सकता हूं। कारण मैं इसे इस तरह से संरचित कर रहा हूं क्योंकि मैंने शुरुआत में इसे नहीं बनाया था। मैं एक मौजूदा परियोजना के लिए परीक्षण लिखने पर काम कर रहा हूं और मेरे पास इसे किसी अन्य तरीके से कॉन्फ़िगर करने की क्षमता नहीं है। मैंने परीक्षण लिखने का प्रयास किया है, लेकिन मैं जो चाहता हूं उसे करने के लिए नहीं कर सकता।

मैं यह देखने के लिए परीक्षण करना चाहता हूं कि मूल्यों को देखने के लिए बाध्य किया जा रहा है, और यदि यह जांचने के लिए भी संभव है कि नियंत्रक मूल्यों को सही तरीके से बना रहा है या नहीं।

यहाँ मैं क्या मिल गया है है:

'use strict' 

    describe "the exampleDirective Directive", -> 

     beforeEach module("app.directive") 
     beforeEach module("app/partials/view.html") 

     ServiceMock = { 
     getValue :() -> 

     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 
     } 

    #use the mock instead of the service 
    beforeEach module ($provide) -> 
     $provide.value "Service", ServiceMock 
     return 

    $httpBackend = null 
    scope = null 
    elem = null 

    beforeEach inject ($compile, $rootScope, $injector) -> 

    # get httpBackend object 
    $httpBackend = $injector.get("$httpBackend") 
    $httpBackend.whenGET("example/fetch").respond(200, "it works") 

    #set up the scope 
    scope = $rootScope 

    #create and compile directive 
    elem = angular.element('<example-directive></example-directive>') 
    $compile(elem)(scope) 
    scope.$digest() 

मैं नहीं जानता कि मैं कैसे पास कर रहा हूँ, या अगर यह भी सही है। मैं यह कहने में सक्षम होना चाहता हूं कि मान सही तरीके से देखने के लिए बाध्य हैं। मैंने अपने karma.js फ़ाइल में html2js सेट अप करने के लिए Vojtajina के उदाहरण का उपयोग किया है ताकि मुझे विचारों को पकड़ने की अनुमति मिल सके। मैंने जवाब खोजने के लिए बहुत सारे शोध किए हैं, लेकिन मुझे कुछ मदद की ज़रूरत है। उम्मीद है कि मैं एक प्रोग्रामर बुद्धिमान से मुझे सही दिशा में इंगित कर सकता हूं। धन्यवाद।

Answer 1

कर्म में तत्व बनाएं, फिर नियंत्रक को पकड़ने के लिए अपने निर्देश के नाम के साथ .controller() फ़ंक्शन का उपयोग करें। आपके उदाहरण के लिए, इन के साथ लाइनों पिछले कुछ बदल देते हैं: है कि दिया कि कैसे आप अपने निर्देश में परिभाषित किया गया,

elem = angular.element('<div example-directive></div>'); 
$compile(elem)($rootScope); 
var controller = elem.controller('exampleDirective'); 

ध्यान दें, यह नहीं एक तत्व के रूप विशेषता के आधार पर होना चाहिए, और। मैं 100% निश्चित भी नहीं हूं, लेकिन मुझे नहीं लगता कि आपको scope.$digest; की ज़रूरत है, आमतौर पर मैं कुछ भी डालता हूं जिसे scope.$apply(function() {}) ब्लॉक में लागू करने की आवश्यकता होती है।