Bộ điều khiển thử nghiệm đơn vị 1,5 góc yêu cầu bộ điều khiển thành phần cha

Question

Tôi đang thử đơn vị kiểm tra bộ điều khiển (con) của một thành phần AngularJS 1.5 (với Webpack) yêu cầu thành phần cha và bộ điều khiển từ mô-đun khác.

Child cấu trúc điều khiển:

function ChildController() { 
    var vm = this; 

    vm.searchText = ''; 

    vm.submit = function() { 
    var data = {}; 
    data['srch'] = vm.searchText; 
    vm.parentCtrl.submitTextSearch(data); 
    }; 
} 

module.exports = ChildController; 

thành phần trẻ em:

var template = require('./child.html'); 
var controller = require('./child.controller'); 

var childComponent = { 
    require: { 
    parentCtrl: '^parent' 
    }, 
    template: template, 
    controller: controller, 
    controllerAs: 'vm' 
}; 

module.exports = childComponent; 

Vì vậy, những gì tôi muốn làm là để thử ra parentCtrl đó là cần thiết trong trình() của childController - chức năng. Tôi đã không thể tìm thấy làm thế nào để thực sự làm điều này. Tôi đã tìm thấy một số giải pháp chỉ thị cha mẹ tương tự và đã thử các giải pháp đó, ví dụ: tiêm bộ điều khiển cha mẹ thông qua phần tử HTML giả như được mô tả trong this child-parent directive example và về cơ bản giống như stackoverflow solutions không có kết quả. Vấn đề của tôi khác nhau ít nhất là trong thực tế là bộ điều khiển con và cha mẹ trong các mô-đun khác nhau. Và tôi cho rằng phạm vi-thủ thuật không phải là nhiều Angular 1,5-phong cách?

Bộ xương của kiểm tra Jasmine của tôi mà không cố gắng giả thất bại của tôi:

describe('child component', function() { 
    describe('child controller', function() { 
    var controller; 
    beforeEach(angular.mock.module('child')); 
    beforeEach(inject(function(_$componentController_) { 
     controller = _$componentController_('child'); 
    })) 
    it('should work', function() { 
     controller.searchText = "test"; 
     controller.submit(); 
    }) 
    }) 
}) 

Điều đó dẫn tới TypeError: Cannot read property 'submitTextSearch' of undefined. Chính xác thì tôi nên làm gì để giả lập bộ điều khiển cha mẹ? Với kinh nghiệm hạn chế của tôi ở Angular, tôi không có ý tưởng.

Answer 1

Trong trường hợp của bạn, bạn thêm parentCtrl làm phụ thuộc của thành phần của bạn để kiểm tra nó, bạn phải giả lập thành phần gốc và gán nó cho bộ điều khiển. Vì vậy, bạn sẽ cần phải làm một cái gì đó như:

beforeEach(inject(function(_$componentController_) { 
    controller = _$componentController_('child'); 
    parentCtrl = _$componentController_('parent'); 
    controller.parentCtrl = parentCtrl; 
})) 

Answer 2

1. Giải pháp

Trong thử nghiệm của bạn nhanh chóng điều khiển cha mẹ với một phạm vi mới:

mainScope = $rootScope.$new(); 
$controller('ParentController', {$scope: mainScope}); 

và trong bộ điều khiển con của bạn, khởi tạo một phạm vi mới bằng cách sử dụng phạm vi đã được tạo trước đây:

childScope = mainScope.$new(); 
$controller('ChildController', {$scope: childScope}); 

Ví dụ từ AngularJS documentation:

describe('state', function() { 

    var mainScope, childScope, grandChildScope; 

    beforeEach(module('myApp')); 

    beforeEach(inject(function($rootScope, $controller) { 
     mainScope = $rootScope.$new(); 
     $controller('MainController', {$scope: mainScope}); 
     childScope = mainScope.$new(); 
     $controller('ChildController', {$scope: childScope}); 
     grandChildScope = childScope.$new(); 
     $controller('GrandChildController', {$scope: grandChildScope}); 
    })); 

    it('should work', function() { 
     grandChildScope.searchText = "test"; 
     grandChildScope.submit(); 
    }); 
}); 

2. Giải pháp

Child cấu trúc điều khiển:

function ChildController() { 
    var vm = this; 

    vm.searchText = ''; 

    vm.submit = function() { 
    var data = {}; 
    data['srch'] = vm.searchText; 
    vm.parentCtrl.submitTextSearch(data); 
    }; 
} 

module.exports = ChildController; 

thành phần trẻ em:

var template = require('./child.html'); 
var controller = require('./child.controller'); 

    var childComponent = { 
     bindings: { 
     searchText: 'test' 
     }, 
     template: template, 
     controller: controller, 
     controllerAs: 'vm' 
    }; 

module.exports = childComponent; 

var ChildController = $componentController('childComponent', null, {...}); 
ChildController.$onInit(); 
expect(ChildController.searchText).to.equal('test'); 
expect(ChildController.submit()).to.equal('*expected result value should come here*'); 

refrences:

AngularJS documentation - Testing Controllers

AngularJS documentation - $componentController

Unit Testing Angular Components with $componentController

Answer 3

Sử dụng mã dưới đây sẽ nhận được nó khởi tạo và xin vui lòng kiểm tra Jasmine đơn vị kiểm tra làm việc Plunker

var ctrP = $componentController('parentComp'); 
var ctrl = $componentController('childComp', {}, { 
    parentCtrl: ctrP 
}); 

Và trường hợp thử nghiệm của bạn nên được như hình dưới đây:

'use strict'; 

describe('component: heroDetail', function() { 
    var $componentController, $compile, $rootScope; 

    beforeEach(module('plunker')); 
    beforeEach(inject(function(_$componentController_) { 
    $componentController = _$componentController_; 
    })); 

    it('should expose a `hero` object', function() { 
    var ctrP = $componentController('parentComp'); 
    console.log(ctrP); 
    var ctrl = $componentController('childComp', {}, { 
     parentCtrl: ctrP 
    }); 
    console.log(ctrl); 
    ctrl.submit('some data'); 
    expect(ctrl.parentCtrl.searchText).toEqual('some data'); 

    }); 
});