角度指令的单元测试答案

【问题标题】：Unit test for angular directive角度指令的单元测试
【发布时间】：2016-03-18 22:03:07
【问题描述】：

我正在尝试为指令编写单元测试，并收到以下错误。

找不到变量：$compile

HTML

<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write("<base href=\"" + document.location + "\" />");
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  Align number to right
  <br/>
  <mi-format-number-in-grid numbervalue="11.7866" scale="1">11.097866</mi-format-number-in-grid>
  <br/>
  <mi-format-number-in-grid numbervalue="11.097866"></mi-format-number-in-grid>
  <br/>
  <mi-format-number-in-grid numbervalue="11.097866"></mi-format-number-in-grid>
  <br/>
  <mi-format-number-in-grid numbervalue="11.097866"></mi-format-number-in-grid>
  <br/>
</body>

</html>

var app = angular.module('plunker', []);

app.directive('miFormatNumberInGrid', function($compile) {
   return {
      restrict: 'E',
      scope: false,
      link: function(scope, element, attributes) {
         var digit = 0;
         var cssClass = "";
         var pctValue = parseFloat(attributes.numbervalue);
         var scale = parseInt(attributes.scale);
         if (attributes.percentchar === "true")
            cssClass = "class='mi-percentsuffix'";
         if (!isNaN(scale))
            digit = scale;
         if (isNaN(pctValue))
            pctValue = 0;
         var containerDOM = angular.element("<span style='" + "float:right;' " + cssClass + ">{{" + pctValue + "|number:" + digit + "}}</span>");
         var compiled = $compile(containerDOM)(scope);
         angular.element(element).replaceWith(compiled);
      }
   };
});


describe('directive: mi-format-number-in-grid', function () {
  // initialize 
  var $compiler,
      $rootScope;

  beforeEach(angular.mock.module('cgApp'));
  beforeEach(inject(function ($compile, $rootScope) {
      $compile = $compile;
      $rootScope = $rootScope;
  }));

  it("should have 2 digits after decimal", function () {
      var element = $compile('<mi-format-number-in-grid numbervalue="11.97342" scale="2"></mi-format-number-in-grid>')($rootScope);
      $rootScope.$digest();
      expect(element.html()).toContain("11.97");
  });
});

【问题讨论】：

标签： angularjs unit-testing directive

【解决方案1】：

因为$compile 变量还没有被声明，而是你已经声明了$compiler，你可以使用$compiler 来做同样的事情。

beforeEach(inject(function ($compile, $rootScope) {
    $compiler = $compile; //it should be $compiler
    $rootScope = $rootScope;
}));

那就做吧

var element = $compiler('<mi-format-number-in-grid numbervalue="11.97342" scale="2"></mi-format-number-in-grid>')($rootScope);

我建议您将$compiler 重命名为$compile，然后像下面那样更改beforeEach 部分依赖注入部分。

// initialize 
var $compile,
    $rootScope;

beforeEach(angular.mock.module('cgApp'));

beforeEach(inject(function (_$compile_, _$rootScope_) {
    $compile = _$compile_; //it should be $compiler
    $rootScope = _$rootScope_;
}));

【讨论】：

感谢您指出我的愚蠢错误。不再获得参考，但我的测试仍然失败。
it("数字应该右对齐", function () { var element = ''; element = ngCompile(element)(scope); scope.$digest(); var span = element.find('span'); var floatRight = element.attr('style'); expect(span).toBeDefined(); expect(floatRight).toBe("float:right"); });当我在调试模式下看到 span 为空时。
你能创建相同的 plunkr 吗？
这是相同的 pluker。 plnkr.co/edit/ZH7JdkuU35ZQicOUuwFX?p=preview