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 original
describe('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...