Làm thế nào để kiểm tra thử nghiệm đơn vị John papa vm.model với hoa nhài?

Question

tôi sử dụng John papa phong cách góc cạnh hướng dẫn điều khiển của tôi trông giống như:

sau phong cách John papa style controller style guide:

function testController() { 

    var vm = this; 

    vm.model = { name: "controllerAs vm test" }; 
} 

thử nghiệm mã của tôi trông giống như:

describe('Controller: testController', function() { 

    beforeEach(module('myApp')); 

    var testController; 

    beforeEach(inject(function ($controller) { 
     scope = {}; 

     testController = $controller('testController', { 
     }); 

    })); 

    it('should have vm.model defined and testController.vm.model is equal to controllerAs vm test', function() { 
     expect(testController.vm).toBeDefined(); 
     expect(testController.vm.model).toBeDefined();  
     expect(testController.vm.model.name).toEqual("controllerAs vm test"); 
    }); 
}); 

Kết quả:

thử nghiệm không thành công: Thông báo kết quả: Dự kiến ​​không xác định được xác định. tại ngăn xếp

Vì vậy, câu hỏi của tôi là làm thế nào chúng ta có thể kiểm tra vm.model và các biến khác từ điều này? Tôi đã không tìm thấy dòng hướng dẫn thích hợp trong hướng dẫn dòng: controllers

Answer 1

Các vm bằng với ví dụ bản thân qua vm = this;

Vì vậy, tất cả các thuộc tính được treo trực tiếp tắt của đối tượng.

function foo(){ 
    var vm = this; 

    vm.name = 'Josh'; 
} 

var myFoo = new foo(); 
myFoo.name; // 'Josh'; 

Vì vậy, tất cả những gì bạn cần làm là thay đổi kỳ vọng của mình để xóa thuộc tính vm.

expect(testController).toBeDefined(); 
expect(testController.model).toBeDefined();  
expect(testController.model.name).toEqual("controllerAs vm test"); 

Để chứng minh này, đây là ví dụ chính xác của bạn, và các bài kiểm tra Jasmine liên quan.

function testController() { 
 

 
    var vm = this; 
 

 
    vm.model = { 
 
    name: "controllerAs vm test" 
 
    }; 
 
} 
 

 

 
angular.module('myApp', []) 
 
    .controller('testController', testController); 
 

 
describe('Controller: testController', function() { 
 

 
    beforeEach(module('myApp')); 
 

 
    var testController; 
 

 
    beforeEach(inject(function($controller) { 
 
    scope = {}; 
 

 
    testController = $controller('testController', {}); 
 

 
    })); 
 

 
    it('should have model defined and testController.model.name is equal to controllerAs vm test', function() { 
 
    expect(testController).toBeDefined(); 
 
    expect(testController.model).toBeDefined(); 
 
    expect(testController.model.name).toEqual("controllerAs vm test"); 
 
    }); 
 

 
    it('should not have a property called vm', function() { 
 
    expect(testController.vm).toBeUndefined(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js"></script>

Answer 2

testControllerlà các vm vì bạn thiết lập var vm = this trong bộ điều khiển. Vì vậy, để làm cho mã thử nghiệm của bạn hơn tương tự như mã điều khiển của bạn, bạn có thể cố gắng thiết lập điều khiển của bạn để vm trong các thử nghiệm quá thay vìtestController

describe('Controller: testController', function() { 
    // we work with "vm" instead of "testController" to have consistent verbiage 
    // in test and controller 
    var vm; 

    beforeEach(module('app')); 
    beforeEach(inject(function ($controller) { 
     vm = $controller('testController', {}, {}); 
    })); 

    it('should have vm.model defined and testController.vm.model is equal to controllerAs vm test', function() { 

     // vm=this in controller 
     expect(vm) 
      .toBeDefined(); 

     // Testing primitives 
     expect(vm.foo) 
      .toBeDefined(); 
     expect(vm.foo) 
      .toEqual('bar'); 

     // Testing objects 
     expect(vm.model) 
      .toBeDefined(); 
     expect(vm.model.name) 
      .toEqual("Batman"); 

     // Testing a method 
     expect(vm.greet()) 
      .toBeDefined(); 
     expect(vm.greet()) 
      .toEqual('Hello There'); 
    }); 
}); 

Mã cho bộ điều khiển

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('testController', testController); 

    /* @ngInject */ 
    function testController() { 
     var vm = this; 

     // Primitives 
     vm.foo = 'bar'; 

     // Objects 
     vm.model = { 
      name: 'Batman' 
     }; 

     // Methods 
     vm.greet = function() { 
      return 'Hello There'; 
     }; 
    } 
})(); 

Hi vọng điêu nay co ich. Chúc may mắn.

Answer 3

Tôi sẽ tạo mô-đun mới và chèn mô-đun đó làm phụ thuộc vào mô-đun ứng dụng để làm cho nó trở nên đơn giản và có thể kiểm chứng. Kiểm tra bộ điều khiển với Style Guide John Papa của:

(function() { 
    'use strict'; 

    angular 
    .module('test') 
    .controller('testController', testController); 

    function testController() { 
    var vm = this; 
    vm.model = { name: "controllerAs vm test" }; 
    } 
})(); 

Các spec bây giờ sẽ trông như thế này:

'use strict'; 

describe('testController', function() { 
    var testController; 
    beforeEach(module('test')); 

    beforeEach(function() { 
    inject(function($injector) { 
     testController = $injector.get('$controller')('testController', {}); 
    }); 
    }); 

    it('should have model defined and testController.name is equal to controllerAs vm test', function() { 
    expect(testController).toBeDefined(); 
    expect(testController.name).toEqual("controllerAs vm test"); 
    }); 
}); 

Hy vọng điều này sẽ giúp mọi người tìm kiếm các giải pháp tương tự.