मैं जैस्मीन के साथ एक AngularJS सेवा का परीक्षण कैसे करूं?


107

(यहां एक संबंधित प्रश्न है: जैस्मिन परीक्षण में एंगुलरजेएस मॉड्यूल नहीं देखा गया है )

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

मेरे पास कुछ उदाहरण और ट्यूटोरियल हैं, लेकिन मैं कहीं नहीं जा रहा हूं।

मेरे पास सिर्फ तीन फाइलें हैं:

  • myService.js: जहां मैं एक AngularJS सेवा को परिभाषित करता हूं

  • test_myService.js: जहां मैं सेवा के लिए जैस्मीन परीक्षण को परिभाषित करता हूं।

  • specRunner.html: सामान्य चमेली विन्यास के साथ एक HTML फ़ाइल और जहाँ मैं पिछली दो अन्य फाइलें और जैस्मीन, एंगुलरज और कोणीय-मॉकजेज़ आयात करता हूँ।

यह सेवा के लिए कोड है (जब मैं परीक्षण नहीं कर रहा हूं तो अपेक्षित रूप से काम करता है):

var myModule = angular.module('myModule', []);

myModule.factory('myService', function(){

    var serviceImplementation   = {};
    serviceImplementation.one   = 1;
    serviceImplementation.two   = 2;
    serviceImplementation.three = 3;

    return serviceImplementation

});

जैसा कि मैं अलगाव में सेवा का परीक्षण करने की कोशिश कर रहा हूं, मुझे इसे एक्सेस करने और उनके तरीकों की जांच करने में सक्षम होना चाहिए। मेरा सवाल यह है: मैं AngularJS बूटस्ट्रैपिंग के बिना अपने परीक्षण में सेवा को कैसे इंजेक्ट कर सकता हूं?

उदाहरण के लिए, मैं इस तरह से जैस्मीन के साथ सेवा के तरीके के लिए लौटाए गए मूल्य का परीक्षण कैसे कर सकता हूं:

describe('myService test', function(){
    describe('when I call myService.one', function(){
        it('returns 1', function(){
            myModule = angular.module('myModule');
                    //something is missing here..
            expect( myService.one ).toEqual(1);
        })

    })

});

जवाबों:


137

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

तत्काल सेवा के लिए angular.injector को उस मॉड्यूल के साथ बुलाया जाना चाहिए जहाँ हमारी सेवा परिभाषित है। फिर, हम नए इंजेक्टर ऑब्जेक्ट को सेवा के लिए पूछ सकते हैं और केवल तभी जब सेवा अंत में त्वरित हो।

कुछ इस तरह काम करता है:

describe('myService test', function(){
    describe('when I call myService.one', function(){
        it('returns 1', function(){
            var $injector = angular.injector([ 'myModule' ]);
            var myService = $injector.get( 'myService' );
            expect( myService.one ).toEqual(1);
        })

    })

});

एक अन्य तरीका ' इनवोक ' का उपयोग करते हुए एक समारोह में सेवा को पारित करना होगा :

describe('myService test', function(){
    describe('when I call myService.one', function(){
        it('returns 1', function(){

            myTestFunction = function(aService){
                expect( aService.one ).toEqual(1);
            }

            //we only need the following line if the name of the 
            //parameter in myTestFunction is not 'myService' or if
            //the code is going to be minify.
            myTestFunction.$inject = [ 'myService' ];

            var myInjector = angular.injector([ 'myModule' ]);
            myInjector.invoke( myTestFunction );
        })

    })

});

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

describe('myService test', function(){
    describe('when I call myService.one', function(){
        beforeEach(module('myModule'));
        it('returns 1', inject(function(myService){ //parameter name = service name

            expect( myService.one ).toEqual(1);

        }))

    })

});

13
एक उदाहरण देखना पसंद करेंगे जब आपकी सेवा में स्वयं की निर्भरता हो (जैसे $ लॉग)
रॉय ट्रूवेल

2
क्षमा करें, मैं वास्तव में कुछ इस तरह की तलाश कर रहा था: stackoverflow.com/q/16565531/295797
रॉय Truelove

1
क्या beforeEachकई के मामले में सेवा को इंजेक्ट करने का एक अच्छा तरीका है ... कई ... सेवा के लिए कई परीक्षण आवश्यक हैं? डेटा मॉडल (सेवा) का परीक्षण करना और यह वैश्विक चर का एक टन रखता है। धन्यवाद, C46
CSS

2
आप यह नहीं कहते कि (3) 'उचित तरीका' क्यों है
लीजी

2
@LeeGee मुझे लगता है कि हम इसे 'उचित' तरीका कह सकते हैं क्योंकि यह ngMock AngularJS मॉड्यूल का उपयोग करता है जो विशेष रूप से परीक्षण उद्देश्यों के लिए है।
रॉबर्ट

5

हालांकि ऊपर दिया गया उत्तर शायद ठीक काम करता है (मैंने यह कोशिश नहीं की :)), मेरे पास चलाने के लिए अक्सर बहुत अधिक परीक्षण होते हैं इसलिए मैं खुद परीक्षणों में इंजेक्शन नहीं लगाता हूं। मैं इसका वर्णन करता हूं () मामलों को ब्लॉक में बताता हूं और प्रत्येक विवरण ब्लॉक में पहले () या पहले () में अपना इंजेक्शन चलाता हूं।

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

चीजों को समूहीकृत करने और पहले-ब्लॉक का उपयोग करने के लिए वापस जाना, यहां एक छोटा सा उदाहरण है। मैं एक कैट सेवा कर रहा हूं और मैं इसे परीक्षण करना चाहता हूं, इसलिए सेवा को लिखने और परीक्षण करने के लिए मेरा सरल सेटअप इस तरह दिखाई देगा:

app.js

var catsApp = angular.module('catsApp', ['ngMockE2E']);

angular.module('catsApp.mocks', [])
.value('StaticCatsData', function() {
  return [{
    id: 1,
    title: "Commando",
    name: "Kitty MeowMeow",
    score: 123
  }, {
    id: 2,
    title: "Raw Deal",
    name: "Basketpaws",
    score: 17
  }, {
    id: 3,
    title: "Predator",
    name: "Noseboops",
    score: 184
  }];
});

catsApp.factory('LoggingService', ['$log', function($log) {

  // Private Helper: Object or String or what passed
    // for logging? Let's make it String-readable...
  function _parseStuffIntoMessage(stuff) {
    var message = "";
    if (typeof stuff !== "string") {
      message = JSON.stringify(stuff)
    } else {
      message = stuff;
    }

    return message;
  }

  /**
   * @summary
   * Write a log statement for debug or informational purposes.
   */
  var write = function(stuff) {
    var log_msg = _parseStuffIntoMessage(stuff);
    $log.log(log_msg);
  }

  /**
   * @summary
   * Write's an error out to the console.
   */
  var error = function(stuff) {
    var err_msg = _parseStuffIntoMessage(stuff);
    $log.error(err_msg);
  }

  return {
    error: error,
    write: write
  };

}])

catsApp.factory('CatsService', ['$http', 'LoggingService', function($http, Logging) {

  /*
    response:
      data, status, headers, config, statusText
  */
  var Success_Callback = function(response) {
    Logging.write("CatsService::getAllCats()::Success!");
    return {"status": status, "data": data};
  }

  var Error_Callback = function(response) {
    Logging.error("CatsService::getAllCats()::Error!");
    return {"status": status, "data": data};
  }

  var allCats = function() {
    console.log('# Cats.allCats()');
    return $http.get('/cats')
      .then(Success_Callback, Error_Callback);
  }

  return {
    getAllCats: allCats
  };

}]);

var CatsController = function(Cats, $scope) {

  var vm = this;

  vm.cats = [];

  // ========================

  /**
   * @summary
   * Initializes the controller.
   */
  vm.activate = function() {
    console.log('* CatsCtrl.activate()!');

    // Get ALL the cats!
    Cats.getAllCats().then(
      function(litter) {
        console.log('> ', litter);
        vm.cats = litter;
        console.log('>>> ', vm.cats);
      }  
    );
  }

  vm.activate();

}
CatsController.$inject = ['CatsService', '$scope'];
catsApp.controller('CatsCtrl', CatsController);

युक्ति: बिल्लियाँ नियंत्रक

'use strict';

describe('Unit Tests: Cats Controller', function() {

    var $scope, $q, deferred, $controller, $rootScope, catsCtrl, mockCatsData, createCatsCtrl;

    beforeEach(module('catsApp'));
    beforeEach(module('catsApp.mocks'));

    var catsServiceMock;

    beforeEach(inject(function(_$q_, _$controller_, $injector, StaticCatsData) {
      $q = _$q_;
      $controller = _$controller_;

      deferred = $q.defer();

      mockCatsData = StaticCatsData();

      // ToDo:
        // Put catsServiceMock inside of module "catsApp.mocks" ?
      catsServiceMock = {
        getAllCats: function() {
          // Just give back the data we expect.
          deferred.resolve(mockCatsData);
          // Mock the Promise, too, so it can run
            // and call .then() as expected
          return deferred.promise;
        }
      };
    }));


    // Controller MOCK
    var createCatsController;
    // beforeEach(inject(function (_$rootScope_, $controller, FakeCatsService) {
    beforeEach(inject(function (_$rootScope_, $controller, CatsService) {

      $rootScope = _$rootScope_;

      $scope = $rootScope.$new();
      createCatsController = function() {
          return $controller('CatsCtrl', {
              '$scope': $scope,
              CatsService: catsServiceMock
          });    
      };
    }));

    // ==========================

    it('should have NO cats loaded at first', function() {
      catsCtrl = createCatsController();

      expect(catsCtrl.cats).toBeDefined();
      expect(catsCtrl.cats.length).toEqual(0);
    });

    it('should call "activate()" on load, but only once', function() {
      catsCtrl = createCatsController();
      spyOn(catsCtrl, 'activate').and.returnValue(mockCatsData);

      // *** For some reason, Auto-Executing init functions
      // aren't working for me in Plunkr?
      // I have to call it once manually instead of relying on
      // $scope creation to do it... Sorry, not sure why.
      catsCtrl.activate();
      $rootScope.$digest();   // ELSE ...then() does NOT resolve.

      expect(catsCtrl.activate).toBeDefined();
      expect(catsCtrl.activate).toHaveBeenCalled();
      expect(catsCtrl.activate.calls.count()).toEqual(1);

      // Test/Expect additional  conditions for 
        // "Yes, the controller was activated right!"
      // (A) - there is be cats
      expect(catsCtrl.cats.length).toBeGreaterThan(0);
    });

    // (B) - there is be cats SUCH THAT
      // can haz these properties...
    it('each cat will have a NAME, TITLE and SCORE', function() {
      catsCtrl = createCatsController();
      spyOn(catsCtrl, 'activate').and.returnValue(mockCatsData);

      // *** and again...
      catsCtrl.activate();
      $rootScope.$digest();   // ELSE ...then() does NOT resolve.

      var names = _.map(catsCtrl.cats, function(cat) { return cat.name; })
      var titles = _.map(catsCtrl.cats, function(cat) { return cat.title; })
      var scores = _.map(catsCtrl.cats, function(cat) { return cat.score; })

      expect(names.length).toEqual(3);
      expect(titles.length).toEqual(3);
      expect(scores.length).toEqual(3); 
    });

});

विशेष: बिल्लियाँ सेवा

'use strict';

describe('Unit Tests: Cats Service', function() {

  var $scope, $rootScope, $log, cats, logging, $httpBackend, mockCatsData;

  beforeEach(module('catsApp'));
  beforeEach(module('catsApp.mocks'));

  describe('has a method: getAllCats() that', function() {

    beforeEach(inject(function($q, _$rootScope_, _$httpBackend_, _$log_, $injector, StaticCatsData) {
      cats = $injector.get('CatsService');
      $rootScope = _$rootScope_;
      $httpBackend = _$httpBackend_;

      // We don't want to test the resolving of *actual data*
      // in a unit test.
      // The "proper" place for that is in Integration Test, which
      // is basically a unit test that is less mocked - you test
      // the endpoints and responses and APIs instead of the
      // specific service behaviors.
      mockCatsData = StaticCatsData();

      // For handling Promises and deferrals in our Service calls...
      var deferred = $q.defer();
      deferred.resolve(mockCatsData); //  always resolved, you can do it from your spec

      // jasmine 2.0
        // Spy + Promise Mocking
        // spyOn(obj, 'method'), (assumes obj.method is a function)
      spyOn(cats, 'getAllCats').and.returnValue(deferred.promise);

      /*
        To mock $http as a dependency, use $httpBackend to
        setup HTTP calls and expectations.
      */
      $httpBackend.whenGET('/cats').respond(200, mockCatsData);
    }));

    afterEach(function() {
      $httpBackend.verifyNoOutstandingExpectation();
      $httpBackend.verifyNoOutstandingRequest();
    })

    it(' exists/is defined', function() {
      expect( cats.getAllCats ).toBeDefined();
      expect( typeof cats.getAllCats ).toEqual("function");
    });

    it(' returns an array of Cats, where each cat has a NAME, TITLE and SCORE', function() {
      cats.getAllCats().then(function(data) {
        var names = _.map(data, function(cat) { return cat.name; })
        var titles = _.map(data, function(cat) { return cat.title; })
        var scores = _.map(data, function(cat) { return cat.score; })

        expect(names.length).toEqual(3);
        expect(titles.length).toEqual(3);
        expect(scores.length).toEqual(3);
      })
    });

  })

  describe('has a method: getAllCats() that also logs', function() {

      var cats, $log, logging;

      beforeEach(inject(
        function(_$log_, $injector) {
          cats = $injector.get('CatsService');
          $log = _$log_;
          logging = $injector.get('LoggingService');

          spyOn(cats, 'getAllCats').and.callThrough();
        }
      ))

      it('that on SUCCESS, $logs to the console a success message', function() {
        cats.getAllCats().then(function(data) {
          expect(logging.write).toHaveBeenCalled();
          expect( $log.log.logs ).toContain(["CatsService::getAllCats()::Success!"]);
        })
      });

    })

});

EDIT कुछ टिप्पणियों के आधार पर, मैंने अपने उत्तर को थोड़ा और अधिक जटिल होने के लिए अद्यतन किया है, और मैंने यूनिट परीक्षण का प्रदर्शन करने वाला प्लंकर भी बनाया है। विशेष रूप से, टिप्पणियों में से एक ने उल्लेख किया "क्या होगा यदि एक नियंत्रक की सेवा में स्वयं एक सरल निर्भरता है, जैसे $ लॉग?" - जो उदाहरण में परीक्षण मामलों के साथ शामिल है। आशा करता हूँ की ये काम करेगा! ग्रह का परीक्षण या हैक !!!

https://embed.plnkr.co/aSPHnr/


0

मुझे एक निर्देश का परीक्षण करने की आवश्यकता थी, जिसके लिए एक और निर्देश की आवश्यकता थी, Google Places स्वतः पूर्ण , मैं इस बात पर बहस कर रहा था कि क्या मुझे इसका मजाक उड़ाना चाहिए ... वैसे भी इस निर्देश के लिए किसी भी त्रुटि को दूर करने के लिए काम किया गया था जिसे gPlacesAutocomplete की आवश्यकता थी।

describe('Test directives:', function() {
    beforeEach(module(...));
    beforeEach(module(...));
    beforeEach(function() {
        angular.module('google.places', [])
        .directive('gPlacesAutocomplete',function() {
            return {
                require: ['ngModel'],
                restrict: 'A',
                scope:{},
                controller: function() { return {}; }
             };
        });
     });
     beforeEach(module('google.places'));
});

-5

यदि आप एक नियंत्रक का परीक्षण करना चाहते हैं, तो आप इसे नीचे के रूप में इंजेक्ट और परीक्षण कर सकते हैं।

describe('When access Controller', function () {
    beforeEach(module('app'));

    var $controller;

    beforeEach(inject(function (_$controller_) {
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $controller = _$controller_;
    }));

    describe('$scope.objectState', function () {
        it('is saying hello', function () {
            var $scope = {};
            var controller = $controller('yourController', { $scope: $scope });
            expect($scope.objectState).toEqual('hello');
        });
    });
});

2
प्रश्न परीक्षण सेवा के बारे में है, नियंत्रक के बारे में नहीं।
बार्टेक एस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.