Come testare la proprietà 'resolve' su un componente modale Bootstrap con interfaccia angolare

Question

Sto provando a scrivere un test unitario che asserisce che la variabile corretta viene inviata alla proprietà resolve di ui.bootstrap.modal dai componenti Bootstrap di Angular-UI . Ecco quello che ho finora:

// Controller 
angular.module('app') 
    .controller('WorkflowListCtrl', function ($scope, $modal) { 
    // Setup the edit callback to open a modal 
    $scope.edit = function(name) { 
     var modalInstance = $modal.open({ 
     templateUrl: 'partials/editWorkflowModal.html', 
     controller: 'WorkflowEditCtrl', 
     scope: $scope, 
     resolve: { 
      name: function() { return name; } 
     } 
     }); 
    }; 
    }); 

Vale la pena notare che la proprietà resolve.name deve essere una funzione per la componente angolare-UI per funzionare correttamente - in precedenza avevo provato resolve: { name: name }, ma questo non ha funzionato.

// Unit Test 
describe('Controller: WorkflowListCtrl', function() { 

    // load the controller's module 
    beforeEach(module('app')); 

    var workflowListCtrl, 
    scope, 
    modal; 

    // Initialize the controller and a mock scope 
    beforeEach(inject(function ($controller, $rootScope) { 

    scope = $rootScope.$new(); 
    modal = { 
     open: jasmine.createSpy() 
    }; 

    workflowListCtrl = $controller('WorkflowListCtrl', { 
     $scope: scope, 
     $modal: modal 
    }); 

    it('should allow a workflow to be edited', function() { 
     // Edit workflow happens in a modal. 
     scope.edit('Barney Rubble'); 
     expect(modal.open).toHaveBeenCalledWith({ 
     templateUrl: 'partials/editWorkflowModal.html', 
     controller: 'WorkflowEditCtrl', 
     scope: scope, 
     resolve: { 
      name: jasmine.any(Function) 
     } 
     }); 
    }); 
    })); 
}); 

Al momento, questo è solo controllando che la proprietà resolve.name è una funzione, ma quello che mi piacerebbe davvero fare è affermare la funzione resolve.name ritorna Barney Rubble. Questa sintassi, ovviamente, non funziona:

expect(modal.open).toHaveBeenCalledWith({ 
    templateUrl: 'partials/editWorkflowModal.html', 
    controller: 'WorkflowEditCtrl', 
    scope: scope, 
    resolve: { 
    name: function() { return 'Barney Rubble'; } 
    } 
}); 

Sembra che in qualche modo voglio spiare la funzione di controllare resolve.name è stato chiamato con Barney Rubble ma non riesco a trovare un modo per farlo. Qualche idea?

Answer 1

Quindi ho trovato un modo per farlo.

definire una funzione 'privato' sul $scope:

$scope._resolve = function(item) { 
    return function() { 
    return item; 
    }; 
}; 

Modificare la funzione originaria $scope chiamare questo metodo 'privato':

$scope.edit = function(name) { 
    var modalInstance = $modal.open({ 
    templateUrl: 'partials/modal.html', 
    controller: 'ModalCtrl', 
    scope: $scope, 
    resolve: { 
     name: $scope._resolve(name) 
    } 
    }); 
}; 

aggiornare il proprio test per deridere questa funzione e restituire il valore originale, quindi è possibile verificare che sia stato inserito correttamente.

it('should allow a workflow to be edited', function() { 
    // Mock out the resolve fn and return our item 
    spyOn($scope, '_resolve').and.callFake(function(item) { 
    return item; 
    }); 

    // Edit workflow happens in a modal. 
    scope.edit('Barney Rubble'); 
    expect(modal.open).toHaveBeenCalledWith({ 
    templateUrl: 'partials/modal.html', 
    controller: 'ModalCtrl', 
    scope: scope, 
    resolve: { 
     name: 'Barney Rubble' 
    } 
    }); 
});