Buenos dias. Estoy aprendiendo a hacer test con Jasmine para directivas de Angular y en una directiva concreta no entiendo como puedo crear el spec.
He buscado en muchas webs, tutoriales, manuales... pero sigo sin comprender como hacerlo. Podeis explicarme / guiarme?
La directiva es esta, con restriccion sobre una clase:
Código Javascript
:
Ver original(function () {
angular.module("directives")
.directive("contentText", function () {
var cloneClass = "full-text-clone";
return {
restrict: "C",
scope: true,
link: function (scope, element) {
var getTextContainer = function () {
var textContainer = element.find(".top").length !== 0 ? element.find(".top") : element;
textContainer = textContainer.find("span, p").first();
return textContainer;
};
var getTotalHeight = function () {
var parentContainer = element.parent();
var totalHeight = parentContainer.height() - parseInt(element.css("padding-top")) - parseInt(element.css("padding-bottom")) - parseInt(element.css("margin-top")) - parseInt(element.css("margin-bottom"));
var textContainer = element.find(".top").length !== 0 ? element.find(".top") : element;
totalHeight -= (parseInt(textContainer.css("padding-top")) - parseInt(textContainer.css("padding-bottom")) - parseInt(textContainer.css("margin-top")) - parseInt(textContainer.css("margin-bottom")));
// If bottom element
if (element.find(".bottom").length !== 0) {
var bottom = element.find(".bottom");
totalHeight -= (bottom.height() + parseInt(bottom.css("padding-top")) + parseInt(bottom.css("padding-bottom")) + parseInt(bottom.css("margin-top")) + parseInt(bottom.css("margin-bottom")));
}
// If header
if (element.find("h3").length !== 0) {
var header = element.find("h3");
totalHeight -= (header.height() + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom")) + parseInt(header.css("margin-top")) + parseInt(header.css("margin-bottom")));
}
return totalHeight;
};
var cloneFullText = function () {
var container = getTextContainer();
var fullTextBlock = container.clone().addClass(cloneClass + " hide");
fullTextBlock.find("a").replaceWith();
container.parent().append(fullTextBlock);
};
var fitContentHeight = function () {
var textContainer = getTextContainer();
var totalHeight = getTotalHeight();
if (textContainer.length !== 0) {
// Add the text
var fullText = textContainer.parent().find("." + cloneClass).text().trim();
if (fullText.length) {
var words = fullText.split(" ");
var containedText = "";
var tempText = "";
var link = textContainer.find("a").clone();
textContainer.text(containedText);
for (var i = 0; i < words.length; i++) {
tempText += words[i] + " ";
textContainer.text(tempText + link);
if (textContainer.height() > totalHeight) {
containedText += "...";
break;
}
containedText = tempText;
}
textContainer.text(containedText).append(link);
}
}
};
var init = function() {
cloneFullText();
fitContentHeight();
var w = $(window);
w.bind("resize", fitContentHeight);
};
init();
}
};
});
}());
De momento mi test es el siguiente, he cargado un elemento para testear las pruebas, pero no tengo muy claro como seguir:
Código Javascript
:
Ver originaldescribe('directives', function () {
beforeEach(module('controllers'));
var element;
var outerScope;
var innerScope;
beforeEach(inject(function ($rootScope, $compile) {
element = angular.element(
'<div class="content-text" style="height: 500px; width: 500px; padding: 0 0 0 0; margin: 0 0 0 0;">' +
'<div class="top">' +
'<div class="vertical-align">' +
'<h3 class="block-title">@headerText</h3>' +
'</div>' +
'<div class="bottom">' +
'<a href="@linkUrl">' +
'<span class="show-for-small">@GetFirstWord(linkText)</span>' +
'<span class="hide-for-small">@linkText</span>' +
'</a>' +
'</div>' +
'</div>');
outerScope = $rootScope;
$compile(element)(outerScope);
innerScope = element.isolateScope();
outerScope.$digest();
})); // Fin beforeEach
});
Como puedo generar los test para los returns de este codigo? Estoy muy atascado ahora mismo...