Foros del Web » Programando para Internet » Javascript » Frameworks JS »

No entiendo Unit test con Jasmine

Estas en el tema de No entiendo Unit test con Jasmine en el foro de Frameworks JS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 19/04/2016, 04:03
inazense
Invitado
 
Mensajes: n/a
Puntos:
No entiendo Unit test con Jasmine

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
  1. (function () {
  2.     angular.module("directives")
  3.         .directive("contentText", function () {
  4.  
  5.             var cloneClass = "full-text-clone";
  6.  
  7.             return {
  8.                 restrict: "C",
  9.                 scope: true,
  10.                 link: function (scope, element) {
  11.                     var getTextContainer = function () {
  12.                         var textContainer = element.find(".top").length !== 0 ? element.find(".top") : element;
  13.                         textContainer = textContainer.find("span, p").first();
  14.                         return textContainer;
  15.                     };
  16.  
  17.                     var getTotalHeight = function () {
  18.                         var parentContainer = element.parent();
  19.                         var totalHeight = parentContainer.height() - parseInt(element.css("padding-top")) - parseInt(element.css("padding-bottom")) - parseInt(element.css("margin-top")) - parseInt(element.css("margin-bottom"));
  20.                         var textContainer = element.find(".top").length !== 0 ? element.find(".top") : element;
  21.                         totalHeight -= (parseInt(textContainer.css("padding-top")) - parseInt(textContainer.css("padding-bottom")) - parseInt(textContainer.css("margin-top")) - parseInt(textContainer.css("margin-bottom")));
  22.  
  23.                         // If bottom element
  24.                         if (element.find(".bottom").length !== 0) {
  25.                             var bottom = element.find(".bottom");
  26.                             totalHeight -= (bottom.height() + parseInt(bottom.css("padding-top")) + parseInt(bottom.css("padding-bottom")) + parseInt(bottom.css("margin-top")) + parseInt(bottom.css("margin-bottom")));
  27.                         }
  28.  
  29.                         // If header
  30.                         if (element.find("h3").length !== 0) {
  31.                             var header = element.find("h3");
  32.                             totalHeight -= (header.height() + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom")) + parseInt(header.css("margin-top")) + parseInt(header.css("margin-bottom")));
  33.                         }
  34.  
  35.                         return totalHeight;
  36.                     };
  37.  
  38.                     var cloneFullText = function () {
  39.                         var container = getTextContainer();
  40.                         var fullTextBlock = container.clone().addClass(cloneClass + " hide");
  41.                         fullTextBlock.find("a").replaceWith();
  42.                         container.parent().append(fullTextBlock);
  43.                     };
  44.  
  45.                     var fitContentHeight = function () {
  46.                         var textContainer = getTextContainer();
  47.                         var totalHeight = getTotalHeight();
  48.  
  49.                         if (textContainer.length !== 0) {
  50.  
  51.                             // Add the text
  52.                             var fullText = textContainer.parent().find("." + cloneClass).text().trim();
  53.                             if (fullText.length) {
  54.                                 var words = fullText.split(" ");
  55.                                 var containedText = "";
  56.                                 var tempText = "";
  57.                                 var link = textContainer.find("a").clone();
  58.                                 textContainer.text(containedText);
  59.  
  60.                                 for (var i = 0; i < words.length; i++) {
  61.                                     tempText += words[i] + " ";
  62.                                     textContainer.text(tempText + link);
  63.                                     if (textContainer.height() > totalHeight) {
  64.                                         containedText += "...";
  65.                                         break;
  66.                                     }
  67.                                     containedText = tempText;
  68.                                 }
  69.  
  70.                                 textContainer.text(containedText).append(link);
  71.                             }
  72.                         }
  73.                     };
  74.  
  75.                     var init = function() {
  76.                         cloneFullText();
  77.                         fitContentHeight();
  78.                         var w = $(window);
  79.                         w.bind("resize", fitContentHeight);
  80.                     };
  81.  
  82.                     init();
  83.                 }
  84.             };
  85.         });
  86. }());

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
  1. describe('directives', function () {
  2.  
  3.     beforeEach(module('controllers'));
  4.  
  5.     var element;
  6.     var outerScope;
  7.     var innerScope;
  8.  
  9.     beforeEach(inject(function ($rootScope, $compile) {
  10.  
  11.         element = angular.element(
  12.             '<div class="content-text" style="height: 500px; width: 500px; padding: 0 0 0 0; margin: 0 0 0 0;">' +
  13.                 '<div class="top">' +
  14.                     '<div class="vertical-align">' +
  15.                         '<h3 class="block-title">@headerText</h3>' +
  16.                     '</div>' +
  17.                 '<div class="bottom">' +
  18.                     '<a href="@linkUrl">' +
  19.                     '<span class="show-for-small">@GetFirstWord(linkText)</span>' +
  20.                     '<span class="hide-for-small">@linkText</span>' +
  21.                     '</a>' +
  22.                 '</div>' +
  23.             '</div>');
  24.  
  25.         outerScope = $rootScope;
  26.         $compile(element)(outerScope);
  27.  
  28.         innerScope = element.isolateScope();
  29.  
  30.         outerScope.$digest();
  31.     })); // Fin beforeEach
  32.    
  33. });

Como puedo generar los test para los returns de este codigo? Estoy muy atascado ahora mismo...

Etiquetas: angular, test
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:32.