web-dev-qa-db-ja.com

ディレクティブで分離スコープを単体テストするにはどうすればよいですか？

単純なディレクティブの単体テストを試みていますが、スコープ内の変数は常に未定義です。

ディレクティブSrcコード：

.directive('ratingButton', ['$rootScope',


function($rootScope) {
      return {
          restrict: "E",
          replace: true,
          template: '<button type="button" class="btn btn-circle" ng-class="getRatingClass()"></button>',
          scope: {
              buttonRating: "="
          },
          link: function(scope, elem, attr) {
              scope.getRatingClass = function() {
                  if (!scope.buttonRating)
                      return '';
                  else if (scope.buttonRating.toUpperCase() === 'GREEN')
                      return 'btn-success';
                  else if (scope.buttonRating.toUpperCase() === 'YELLOW')
                      return 'btn-warning warning-text';
                  else if (scope.buttonRating.toUpperCase() === 'RED')
                      return 'btn-danger';
                  else if (scope.buttonRating.toUpperCase() === 'BLUE')
                      return 'btn-info';
              }
          }
      };
  }])

テスト：

describe('Form Directive: ratingButton', function() {

    // load the controller's module
    beforeEach(module('dashboardApp'));

    var scope,
        element;

    // Initialize the controller and a mock scope
    beforeEach(inject(function($compile, $rootScope) {
        scope = $rootScope.$new();

        //set our view html.
        element = angular.element('<rating-button button-rating="green"></rating-button>');
        $compile(element)(scope);
        scope.$digest();
    }));

    it('should return appropriate class based on rating', function() {
        //console.log(element.isolateScope());
        expect(element.isolateScope().buttonRating).toBe('green');
        expect(element.isolateScope().getRatingClass()).toBe('btn-success');

    });

});

要素属性を介して値を渡すことにより、別のディレクティブ単体テストで同様のコードを使用しましたが、期待どおりに機能しました。このテストでは、buttonRatingは常に定義されておらず、ここからどこに行くべきかわからない（私はJasmine/Karmaにかなり慣れていない）

どんな助けでも素晴らしいでしょう！

angularjsunit-testingangularjs-directivejasminekarma-runner
12
atsituab

文字列greenを設定する代わりに、テストの起動時にディレクティブ要素がコンパイルされるときにバインドされたスコープに設定します。それ以外の場合は、バインドされたスコープでgreenという名前のスコーププロパティの値を検索します。もちろん、これはあなたのケースでは定義されていません。

つまり、_scope.buttonRating = 'green';_

そして

angular.element('<rating-button button-rating="buttonRating"></rating-button>')

試してください：

_  // Initialize the controller and a mock scope
    beforeEach(inject(function($compile, $rootScope) {
        scope = $rootScope.$new();
        scope.buttonRating = 'green'; //<-- Here
        //set our view html.
        element = angular.element('<rating-button button-rating="buttonRating"></rating-button>');
        $compile(element)(scope);
        scope.$digest();
    }));

    it('should return appropriate class based on rating', function() {
        expect(element.isolateScope().buttonRating).toBe('green');
        expect(element.isolateScope().getRatingClass()).toBe('btn-success');

    });
_

Plnkr

25
PSL