personalizadas - ¿Cómo probar el valor de resolución de la ruta de Angularjs en el componente?

formularios en angular 6

Question

Estoy usando [email protected] y [email protected] algún recurso en el nivel de ruta para uno de mis componentes. El componente funciona como se esperaba pero mi prueba falla ahora.

Error

PhantomJS 2.1.1 (Linux 0.0.0) module ag.expense-claim ExpenseClaimController: should load data FAILED
TypeError: undefined is not an object (evaluating ''vm.attachedReceipts.results'') (line 16)
ExpenseClaimViewController@app/expenses/expense_claim.js:16:50
ExpenseClaimViewController@[native code]
instantiate@node_modules/angular/angular.js:4733:61
$controller@node_modules/angular/angular.js:10369:39
node_modules/angular-mocks/angular-mocks.js:2221:21
$componentController@node_modules/angular-mocks/angular-mocks.js:2264:25
test/expenseSpec.js:18:40
invoke@node_modules/angular/angular.js:4718:24
workFn@node_modules/angular-mocks/angular-mocks.js:3085:26
loaded@http://localhost:9876/context.js:151:17
inject@node_modules/angular-mocks/angular-mocks.js:3051:28
test/expenseSpec.js:14:26
test/expenseSpec.js:11:13
global code@test/expenseSpec.js:1:9
Error: No pending request to flush ! in node_modules/angular-mocks/angular-mocks.js (line 1799)
flush@node_modules/angular-mocks/angular-mocks.js:1799:76
test/expenseSpec.js:53:31
loaded@http://localhost:9876/context.js:151:17
PhantomJS 2.1.1 (Linux 0.0.0): Executed 43 of 43 (1 FAILED) (0.257 secs / 0.387 secs)
error Command failed with exit code 1.

Prueba

describe(''ExpenseClaimController:'', function () {
var $scope, ctrl, attachedReceipts;
beforeEach(inject(function ($rootScope, $componentController, $stateParams) {
var attachedReceipts = {results: [{}]};
$scope = $rootScope.$new();
$stateParams.expenseClaimId = 1;
ctrl = $componentController(''expenseClaim'', {
$scope: $scope,
attachedReceipts: attachedReceipts
});
}));
it(''should load data'', function () {
…
});

Componente

angular.module(''ag.expenses'')
.component(''expenseClaim'', {
templateUrl: ''…'',
controller: ExpenseClaimViewController,
controllerAs: ''vm'',
bindings: {
attachedReceipts: "<"
}
});
function ExpenseClaimViewController($stateParams, $uibModal, API, gettextCatalog, alert) {
var vm = this;
vm.attachedReceipts = vm.attachedReceipts.results;
…
}

Ruta

 .state(''expense-claim'', {
url: ''/home_expense_report/:expenseClaimId'',
template: ''<expense-claim attached-receipts="$resolve.attachedReceipts"></expense-claim>'',
resolve: {
attachedReceipts: function (API, $stateParams) {
return API.TransportCostAttachment.query({expenseClaimId: $stateParams.expenseClaimId}).$promise;
}
}
})

Pregunta

Implemente mi solución en base a ¿Cómo puedo simular los valores de resolución de ui-router al probar la configuración de un estado? pero todavía no puede conseguirlo para las obras. ¿Qué me estoy perdiendo?

Answer 1

la resolución en el ángulo 1.5 no es DI como el angular 2, por lo que para 1.5 debe pasarlo como un enlace, algo como esto:

var bindings = { attachedReceipts: attachedReceipts };
ctrl = $componentController(''expenseClaim'', {
$scope: $scope
}, bindings);

Answer 2

Además de la respuesta de Ameer, me gustaría proporcionar algunos detalles más ya que luché mucho para encontrarlos, si tiene un componente y necesita probar el controlador directamente o si desea probar la plantilla, tiene dos maneras de crear el controlador que tienen enlaces (ya sea que provengan de una resolución desde el ui-router o no importa)

- Unidad de prueba del controlador de componentes:

Como dijo Ameer, debes pasarlo como un enlace :

beforeEach(inject(function(_$componentController_) {
$componentController = _$componentController_;
}));
it(''should expose a `hero` object'', function() {
// Here we are passing actual bindings to the component
var bindings = {hero: {name: ''Wolverine''}};
var ctrl = $componentController(''heroDetail'', null, bindings);
expect(ctrl.hero).toBeDefined();
expect(ctrl.hero.name).toBe(''Wolverine'');
});

Método $ onInit:

Si su controlador tiene el método $ onInit (), no se ejecutará automáticamente como espera, necesita llamar manualmente el método después de crear el controlador, aquí encontrará más detalles sobre este problema.

- Unidad de prueba de la plantilla del componente:

Cuando la unidad prueba la plantilla de un componente, aún necesita crear una instancia del controlador, así es como puede hacerlo:

beforeEach(inject(($injector) => {
$rootScope = $injector.get(''$rootScope'');
$compile = $injector.get(''$compile'');
scope = $rootScope.$new();
scope.attachedReceipts = {results: [{}]};;
template = $compile(''<expense-claim attached-receipts="attachedReceipts"></expense-claim>'')(scope);
scope.$apply();
});
it(''should test something'', () => {
//Example of something you could test
expect(template.find(''h3'').html()).to.eq(''this is our first content page'');
});

Con este segundo método, se llamará al método $ onInit (), por lo que no es necesario que lo llame de forma manual. Puede encontrar un tutorial completo sobre cómo probar una plantilla dentro de un componente aquí