2016-08-16 6 views
13

के माध्यम से परीक्षण किया गया है, मैं सफलतापूर्वक Resharper 9.2 का उपयोग कर फैंटॉमजेस के माध्यम से जैस्मीन का उपयोग कर नियंत्रक का परीक्षण कर सकता हूं। एक Testrunner के रूप में।एक मॉड्यूल को एक नियंत्रक में उपलब्ध कराएं जिसे जैस्मीन द्वारा Resharper

मैंने Resharper सेटअप करने के लिए https://blogs.endjin.com/2014/09/unit-testing-angularjs-with-visual-studio-resharper-and-teamcity/ पर दिए गए निर्देशों का पालन किया।

यह काम किया: मैं एक नियंत्रक के लिए एक परीक्षण चला सकते हैं अगर मैं न मॉड्यूल उस पर निर्भर निर्दिष्ट करें:

नियंत्रक:

var moduleName; 
(function (moduleName) { 
    'use strict'; 
    var testableController = (function() { 
     function testableController($scope) { 
      var _this = this; 
      this.$scope = $scope; 

      $scope.title = "Welcome"; 
     } 
     testableController.className = 'testableController'; 
     return testableController; 
    }()); 
    moduleName.testableController = testableController; 
})(moduleName || (moduleName = {})); 

कल्पना फ़ाइल इस

///<reference path="~/Scripts/jasmine/jasmine.js"/> 
///<reference path="~/Scripts/jasmine/angular.js"/> 
///<reference path="~/Scripts/jasmine/angular-mocks.js"/> 
///<reference path="~/Scripts/angular-ui/ui-bootstrap.min.js" /> 
///<reference path="~/Scripts/jasmine/controllers.js"/> 
///<reference path="~/Scripts/App/Controllers/testableController.js" /> 
///<reference path="~/Scripts/App/AppJasmine.js" /> 
describe("Controllers", function() { 

    beforeEach(module("moduleName")); 

    describe("Jasmine testableController", function() { 

     var scope, 
      controller; 

     beforeEach(inject(function ($rootScope, $controller) { 
      scope = $rootScope.$new(); 
      controller = $controller('testableController', { $scope: scope }); 
     })); 

     it('should set the page title as "Welcome"', function() { 
      expect(scope.title).toBe('Welcome'); 
     }); 

    }); 
}); 
तरह लग रहा है

वास्तविक नियंत्रक कोणीय यूआई बूटस्ट्रैप "ui.bootstrap" का उपयोग करता है। नियंत्रक पेज पर काम करता है अगर मैं इसे अगले नमूना करने के लिए बदल लेकिन जब मैं यह परीक्षण करने की कोशिश है कि कोई त्रुटि बूटस्ट्रैप

angular.module('moduleName', ['ui.bootstrap']); 
var moduleName; 
(function (moduleName) { 
    'use strict'; 
    var testableController = (function() { 
     function testableController($scope, $uibModal) { 
      var _this = this; 
      this.$scope = $scope; 
      this.$uibModal = $uibModal; 
      $scope.title = "Welcome"; 
     } 
     testableController.className = 'testableController'; 
     return testableController; 
    }()); 
    moduleName.testableController = testableController; 
})(moduleName || (moduleName = {})); 

पर निर्भरता के साथ

Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal 
http://errors.angularjs.org/1.2.24/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal in http://localhost:61032/referenceFile?path=~/webui/trunk/Netvacation.Pegasus.WebUI/Scripts/jasmine/angular.js (line 3802) 

नियंत्रक ** संपादित करें 1 है * * मैं

beforeEach(
    function() { 
     module("ui.bootstrap"); 
     module("moduleName"); 
    } 
    ); 

की कोशिश की, लेकिन एक ही त्रुटि है।

संपादित 2 मैं उपयोग

http://angular-ui.github.io/bootstrap/ संस्करण: 1.3.3 - 2016-05-22

AngularJS v1.2.24

संपादित 3 मैं न परीक्षण करना चाहते हैं $ uibModal, लेकिन यह दूर नकली

+0

ui.bootstrap का कौन सा संस्करण और कोणीय का कौन सा संस्करण आप उपयोग कर रहे हैं? – JayIsTooCommon

+0

कृपया अद्यतन प्रश्न ui.bootstrap 1.3.3, कोणीय v1.2.24 देखें –

उत्तर

0

मैं मो करने के लिए दो रणनीतियों पता कई सिंटैक्स वेरिएंट के साथ सीक एक सेवा, जिसमें कोणीय में सब कुछ है ... आप बस नियंत्रक घोषणा के लिए एक ऑब्जेक्ट शाब्दिक जोड़ सकते हैं या आप अपनी सेवाएं बना सकते हैं और उन्हें $ प्रदाता का उपयोग करके मॉड्यूल में जोड़ सकते हैं:

यदि सेवा बस कुछ डेटा परत या एपीआई का एक आवरण है, तो आप एक शाब्दिक वस्तु के साथ अपनी कार्यक्षमता नकली और इंजेक्षन नियंत्रक निर्माता में सही है, तो कर सकते हैं, अपने नमूना वाक्य रचना इस सिर्फ इस तरह से किया जा सकता है:

var currentAuth; 

beforeEach(inject(function ($rootScope, $controller) { 
    scope = $rootScope.$new(); 
    currentAuth = {uid: 1, name: juan, getFriends: function() { ... }}; 

    controller = $controller('TestableCtrl', {'$scope': $scope, 'currentAuth': currentAuth }); 
})); 

में इस मामले 'currentAuth' एक सेवा है जो आवेदन में वर्तमान लॉग इन उपयोगकर्ता प्रदान करता है।

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

var $controller, $rootScope, $scope, $location, Auth; 

    beforeEach(function(){ 
    module('planner.login'); 

    module(function($provide){ 

     $provide.factory('Auth', function($q){ 
     return { 
      $signInWithEmailAndPassword: function(email, pass) { 
      return $q.reject({error: 'ERROR'}); 
      } 
     }; 
     }); 

     return null; 
    }); 

    }); 

    beforeEach(function(){ 

    inject(function($controller, $rootScope, _Auth_) { 
     $scope = $rootScope.$new(); 
     Auth = _Auth_; 

     $controller("TestableCtrl", { 
     $scope: $scope, 
     Auth: Auth, 
     $stateParams: {} 
     }); 
    }); 

    }); 

इस नमूने मैं एक नया कारखाना कि एक कोणीय वादा वापस जाने के लिए $ q सेवा का उपयोग करता बनाने रहा हूँ में, इस उदाहरण है कि मैं angularfire प्रमाणीकरण सेवा उपहास करने के लिए उपयोग करें देखें लेकिन फैंटॉमजेएस के पास वादा विनिर्देश नहीं है)। ध्यान दें कि इसके लिए आपको पहले दो की आवश्यकता है, प्रदाता को मॉड्यूल में जोड़ने के लिए और दूसरा प्रदाता को नियंत्रक में इंजेक्ट करने के लिए।

उपयोग करने के लिए कौन सा आप इस बात पर निर्भर करता है कि आप क्या परीक्षण करना चाहते हैं और आपको मूल सेवा व्यवहार की नकल करने की कितनी गहराई से आवश्यकता है। यूबिमोडाल के साथ आपके मामले में आपको शायद किसी बिंदु और जासूस पर '.open' को कॉल करने की आवश्यकता है जिसे कॉल किया गया है, लेकिन आपको केवल उस संपत्ति के साथ ऑब्जेक्ट बनाने और उसके लिए ऑब्जेक्ट प्रॉपर्टी पर जासूसी करने की आवश्यकता है। तो पहला दृष्टिकोण पर्याप्त होना चाहिए।

तो अपने कोड की तरह कुछ किया जाना चाहिए:

describe("Controllers", function() { 

    beforeEach(module("moduleName")); 

    describe("Jasmine testableController", function() { 

     var scope, 
      controller, 
      uibModal; 

     beforeEach(inject(function ($rootScope, $controller) { 
      scope = $rootScope.$new(); 
      uibModal = { open: function() { return 'Whatever'; } } 
      controller = $controller('testableController', { $scope: scope, $uibModal: uibModal }); 
     })); 

     it('should set the page title as "Welcome"', function() { 
      expect(scope.title).toBe('Welcome'); 
      // you will probably do something like this at some point to verify 
      // that the modal gets opened on click or following any other action: 
      // var spy = spyOn(uibModal, 'open'); 
      // expect(spy).toHaveBeenCalled(); 
     }); 

    }); 
}); 

मुझे आशा है कि यह मदद करता है, कृपया, मुझे बताओ अगर कुछ स्पष्ट नहीं है मैं भी AngularJS क्षुधा का परीक्षण के बारे में सीख रहा हूँ और जानना चाहते हैं कि इस के साथ मदद करता है प्यार होता AngularUI।

0

पहली समस्या यह है कि आप नियंत्रक को मॉड्यूल में पंजीकृत नहीं करते हैं। तो यह मॉड्यूल की निर्भरताओं से अवगत नहीं है।

angular.module('modulename').controller('nameofthecontroller', controller); 

और फिर आप $ uibModal का नकल कर सकते हैं लेकिन इसकी आवश्यकता नहीं है; यह इस नकली के बिना काम करना चाहिए;

संबंधित मुद्दे