Comment puis-je l'unité de test isolé champ d'application de la directive
Je suis en train de test de l'unité d'une simple directive, mais la variable dans le champ d'application n'est toujours pas défini.
Directive Src Code:
.directive('ratingButton', ['$rootScope',
function($rootScope) {
return {
restrict: "E",
replace: true,
template: '<button type="button" class="btn btn-circle" ng-class="getRatingClass()"></button>',
scope: {
buttonRating: "="
},
link: function(scope, elem, attr) {
scope.getRatingClass = function() {
if (!scope.buttonRating)
return '';
else if (scope.buttonRating.toUpperCase() === 'GREEN')
return 'btn-success';
else if (scope.buttonRating.toUpperCase() === 'YELLOW')
return 'btn-warning warning-text';
else if (scope.buttonRating.toUpperCase() === 'RED')
return 'btn-danger';
else if (scope.buttonRating.toUpperCase() === 'BLUE')
return 'btn-info';
}
}
};
}])
Test:
describe('Form Directive: ratingButton', function() {
//load the controller's module
beforeEach(module('dashboardApp'));
var scope,
element;
//Initialize the controller and a mock scope
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
//set our view html.
element = angular.element('<rating-button button-rating="green"></rating-button>');
$compile(element)(scope);
scope.$digest();
}));
it('should return appropriate class based on rating', function() {
//console.log(element.isolateScope());
expect(element.isolateScope().buttonRating).toBe('green');
expect(element.isolateScope().getRatingClass()).toBe('btn-success');
});
});
J'ai utilisé un code similaire dans une autre directive de l'unité de test que j'ai eu par la transmission de valeurs à travers les attributs de l'élément et cela a fonctionné comme prévu. Pour ce test buttonRating est toujours pas défini vous ne savez pas où aller à partir d'ici(je suis assez nouveau avec le Jasmin/Karma)
Toute aide serait super!
OriginalL'auteur atsituab | 2015-01-12
Vous devez vous connecter pour publier un commentaire.
Au lieu de définir la chaîne de
green
de le mettre sur le champ lié lorsque la directive élément est compilé dans votre démarrage du test. Sinon, il va chercher la valeur de la portée de la propriété avec le nomgreen
sur la limite de la portée, et qui, évidemment, n'est pas défini dans votre cas.je.e
scope.buttonRating = 'green';
et
angular.element('<rating-button button-rating="buttonRating"></rating-button>')
Essayer:
Plnkr
pas de soucis qui se passe.. 🙂
pouah, perdu beaucoup de temps sur cette. a bien fonctionné pour @ mais = ne savais pas que vous ne pouvez pas mettre la chaîne littérale (c'est UNBINDABLE). heureux Angulaire 2 est de se débarrasser des 2 voies de liaison sous le capot.
bon moyen de tester est pas la définition de la variable, mais la citation de la chaîne littérale ("<cote-bouton-note="\'buttonRating\'"></notation bouton->')
Je suis "TypeError: Cannot read property 'isolateScope' undefined" sur cette Plunker. Même quand je suis en utilisant ce code sur mon local.
OriginalL'auteur PSL