Angular JS Testing với Karma Jasmine

Question

Tôi có một tuyến đường mẫu như thế này:

angular 
     .module('appRouter',['ui.router']) 
     .config(function($stateProvider,$urlRouterProvider){ 
      $stateProvider 
       ..... 
       ..... 
       .state('settings.account',{ 
        url:'/account', 
        templateUrl:'templates/account.html', 
        controller:function(resolveData){ 
         console.log(resolveData); 
        }, 
        resolve:{ 
         resolveData : function($http){ 
          var root = 'https://jsonplaceholder.typicode.com'; 
          return $http.get(root+'/posts/1').then(function(response){ 

           return response.data; 
          }); 
         } 
        } 
       }); 

      ..... 

Nó chỉ là một URL thử nghiệm nơi tôi có thể nhận được dữ liệu JSON mẫu trực tuyến

https://jsonplaceholder.typicode.com/posts/1

Tôi muốn kiểm tra trạng thái.

beforeEach(function(){ 
     module('appRouter'); 
    }); 

    beforeEach(inject(function(_$rootScope_,_$injector_,_$state_,_$httpBackend_,$templateCache){ 
     $rootScope = _$rootScope_; 
     $state = _$state_; 
     $injector = _$injector_; 
     $httpBackend = _$httpBackend_; 
     $templateCache.put('templates/account.html',''); 
    })); 

    it('should resolve "resolveData"',function(){ 
     const state = $state.get('settings.account'); 
     const resolveFn = state.resolve.resolveData; 

       $httpBackend.whenGET('https://jsonplaceholder.typicode.com/posts/1').respond(function(){ 
     return [ 
      200,{ 
       "userId": 1, 
       "id": 1, 
       "title": "...", 
       "body": "..." 
     }] 
    }); 

    $httpBackend.expectGET('https://jsonplaceholder.typicode.com/posts/1'); 

    $injector.invoke(resolveFn); 

    $httpBackend.flush(); 

    expect($injector.annotate(resolveFn)).toEqual(['$http']); 

    console.log(angular.mock.dump($scope)); 

    expect($scope.resolveData).toEqual({ 
     "userId": 1, 
     "id": 1, 
     "title": "...", 
     "body": "..." 
    }); 

Nhưng điều này không thành công. Nói

1) should resolve "resolveData" 
    UI Routerer Config For Account 
    Expected undefined to equal Object({ userId: 1, id: 1, title: '...', body: '...' }). 
    at Object.<anonymous> (test/controllers/main-controller-spec.js:114:36) 

Tôi đang làm gì sai?

CẬP NHẬT

console.log(angular.mock.dump($scope)); đưa ra sau

Xin vui lòng giúp.

Answer 1

should resolve "resolveData" 
UI Routerer Config For Account 
TypeError: Cannot read property 'get' of undefined 
at resolveData (app/appRouter.js:25:41) 
at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9) 

để giải quyết vấn đề này, bạn nên vượt qua $http để giải quyết chức năng dữ liệu.

resolveFn($http); 

nhưng nó tốt hơn để viết bài kiểm tra như this

Answer 2

gốc Lỗi:

should resolve "resolveData" 
UI Routerer Config For Account 
TypeError: Cannot read property 'get' of undefined 
    at resolveData (app/appRouter.js:25:41) 
    at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9) 

What am I doing wrong?

Bạn đang kêu gọi resolveFn() trong thử nghiệm đơn vị của bạn. Chức năng được xác định là yêu cầu dịch vụ $http và cuộc gọi đó không vượt qua dịch vụ $http (như được đề cập là fingerpich).

Để sửa lỗi này, cho phép góc để xử lý việc chèn phụ thuộc bằng cách sử dụng $injector.invoke(resolveFn).

Xem hoạt động này với plunk. Lưu ý kiểm tra không thành công vì một lý do khác. Tuy nhiên, (nếu tôi hiểu các quy tắc một cách chính xác) đó là một vấn đề khác nhau nên được trả lời bằng một câu hỏi khác (nếu bạn cần thêm trợ giúp).

Lưu ý phụ: Khi trang web (không phải thử nghiệm đơn vị) được mở trong trình duyệt, tôi hy vọng nó hoạt động, vì góc tiêm phụ thuộc $http vào hàm được gán cho resolveData.

Nhìn vào answer cũng tham chiếu đến blog được đề cập bởi fingerpich.

Đây là blog tôi thấy hữu ích khi tìm hiểu về unit testing AngularJS.