角度ディレクティブのユニットテスト

-1

ディレクティブのユニットテストを作成しようとしていて、次のエラーが発生しました。角度ディレクティブのユニットテスト

は、変数を見つけることができません：$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"); 
    }); 
});

出典

2016-03-18 user360

をコンパイルあなたが$compilerと宣言したのではなく、$compilerを同じものとして使用することができます。

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

はその後むしろ、私はあなたが$compileに$compilerの名前を変更して、以下のようにbeforeEach節依存性注入の一部を変更するために行うことをお勧めしたい

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

を行います。

// initialize 
var $compile, 
    $rootScope; 

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

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

出典

2016-03-18 22:06:52

私のばかげたミスを指摘してくれてありがとう。もはや参照を取得していないが、私のテストはまだ失敗しています。 – user360

それは（ "Numberは右に整列するはずです"、function（）{ var要素= 'グリッド内のグリッドID = "testData" numbervalue = "11.97342" scale = "2" percentchar = "true"> var span = element.find（ 'span'）; var floatRight = 0グリッド内のグリッド数を指定します。 expect（span）.toBeDefined（）; expect（floatRight）.toBe（ "float：right"）; }）; element.attr（ 'style'）; 私はデバッグモードでspanが空であると見ます。 – user360

同じものを作成できますか？ –

角度ディレクティブのユニットテスト

答えて

関連する問題