Question

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

找不到变量：$ 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>

JS

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");
  });
});

Answer 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_;
}));

角度指令的单元测试

1 个答案: