AngularJS指令测试失败 - 为什么＆QUOT;元件QUOT;有一个错误的价值？ [英] AngularJS directive test fails - Why "element" has the a wrong value?

问题描述

鉴于以下指令

，我们可以解释为什么下面的测试失败？ <大骨节病> 演示

指令

  angular.module（'plunker'）。指令（maybeLink'，函数（$编译）{
  返回{
    范围： {
      maybeLink：'='，
      maybeLinkText：'='
    }，
    链接：功能（范围，元素，ATTRS）{      范围。$腕表（'maybeLinkText'，函数（的newval）{
        scope.text = newVal.replace（/ \\ n /克，'＆LT; BR＆GT;'）;
      }）;      范围。$腕表（'maybeLink'，函数（）{
        VAR墩;
        如果（scope.maybeLink）{
          墩= $编译（'＆LT; A HREF =＃＆GT; {{文本}}＆LT; / A＆GT;'）（范围）;        }其他{
          墩= $编译（'＆LT;跨度＆GT; {{文本}}＆LT; / SPAN＆GT;'）（范围）;
        }
        element.replaceWith（墩）;
        元素=墩;
      }）;    }
  };
}）;
 

TEST

 描述（'指令：maybeLink'，函数（）{
  VAR范围，$编译;  beforeEach（函数（）{
    模块（'plunker'）;    注（函数（$ rootScope，_ $ compile_）{
      范围= $ rootScope;
      $编译= _ $ compile_;
    }）;
  }）;  函数编译（HTML）{
    VAR元= $编译（HTML）（范围）;
    范围$摘要（）。
    归元;
  }  它（'当链接URL存在应创建一个链接'，函数（）{
    scope.myLinkText =大视频;
    scope.myLinkURL ='http://www.youtube.com/watch?v=rYEDA3JcQqw';    VAR元=编译（'＆LT;跨度或许链接=myLinkURL也许链接文本=myLinkText＆GT;＆LT; / SPAN＆GT;'）;    的console.log（元素[0] .outerHTML）; // =＆GT; ＆LT;跨度或许链接=myLinkURL也许链接文本=myLinkText级=NG-分离范围的NG-范围＆GT;＆LT; / SPAN＆GT;
    的console.log（element.html（））; // =＆GT; （空字符串）    期待（element.text（））TOBE（大视频）。
    期待（element.find（'A'）的长度。）.toBe（1）;
  }）;
}）;
 

解决方案

如果您更改 element.replaceWith（墩）; 到 element.append （墩）; 在指令code，测试将通过。所以，你需要的是通过在测试模板有一个额外的HTML包装。

所以只是包装在测试code中的模板， DIV 或像这样永远有效的HTML元素，测试应该通过什么。

  VAR元素=编译（'＆LT; D​​IV＆GT;＆LT;跨度或许链接=myLinkURL也许链接文本=myLinkText＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'）;
 

Given the following directive, could one explain why the following test fails? DEMO

DIRECTIVE

angular.module('plunker').directive('maybeLink', function($compile) {
  return {
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    link: function(scope, element, attrs) {

      scope.$watch('maybeLinkText', function(newVal) {
        scope.text = newVal.replace(/\n/g, '<br>');
      });

      scope.$watch('maybeLink',function() {
        var newEl;
        if (scope.maybeLink) {
          newEl = $compile('<a href="#">{{ text }}</a>')(scope);

        } else {
          newEl = $compile('<span>{{ text }}</span>')(scope);
        } 
        element.replaceWith(newEl);
        element = newEl;
      });

    } 
  };
});

TEST

describe('Directive: maybeLink', function() {
  var scope, $compile;

  beforeEach(function() {
    module('plunker');

    inject(function($rootScope, _$compile_) {
      scope = $rootScope;
      $compile = _$compile_;
    });
  });

  function compile(html) {
    var element = $compile(html)(scope);
    scope.$digest();
    return element;
  }

  it('should create a link when link URL exists', function() {
    scope.myLinkText = 'Great Video';
    scope.myLinkURL = 'http://www.youtube.com/watch?v=rYEDA3JcQqw';

    var element = compile('<span maybe-link="myLinkURL" maybe-link-text="myLinkText"></span>');

    console.log(element[0].outerHTML); // => <span maybe-link="myLinkURL" maybe-link-text="myLinkText" class="ng-isolate-scope ng-scope"></span> 
    console.log(element.html());       // => (empty string)

    expect(element.text()).toBe('Great Video');
    expect(element.find('a').length).toBe(1);
  });
});

解决方案

If you change element.replaceWith(newEl); to element.append(newEl); in the directive code, the test will pass. So what you need is pass the template in the test with an additional HTML wrapper.

So just wrap the template in the test code with div or what ever valid HTML element like this, the test should pass.

var element = compile('<div><span maybe-link="myLinkURL" maybe-link-text="myLinkText"></span></div>');

这篇关于AngularJS指令测试失败 - 为什么＆QUOT;元件QUOT;有一个错误的价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！