0

ディレクティブを単体テストしたい。コードは次のとおりです。

.directive('getData', function() {

    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { myData:'@myData' },
        template: '<div ng-switch="myData">' +
                    '<div ng-switch-when="4">Real Data</div>' +
                    '<div ng-switch-when="5">False Data</div>' +
                    '<div ng-switch-default>No Data</div>' +
                  '</div>'
    }

単体テストの試みは次のとおりです。

describe('Testing', function() {

  var $compile, $rootScope;

    beforeEach(module('myApp'));

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


    it('get some data', function() {
        var c = $compile("<get-data></get-data>")($rootScope);
        $rootScope.$digest();
        expect(c.html()).toContain(''); //don't know how to do this part
    });

});

ng-switch のテスト方法がわかりません。私はここで多くのことを見逃しているように感じます。どんな助けでも大歓迎です。plnkr は次のとおりです: http://plnkr.co/edit/kgygmzXT3eUMw1iNWnwP?p=preview

4

1 に答える 1

1

これを試して：

指令

app.directive('getData', function () {
    return {
        restrict: 'E,C', // Added E so <get-data></get-data> works
        replace: true,
        transclude: true,
        scope: {
            myData: '@' // Removed @myData since it's not needed here
        },
        template: '<div ng-switch on="myData">' + 
                  '  <div ng-switch-when="4">Real Data</div>' + 
                  '  <div ng-switch-when="5">False Data</div>' + 
                  '  <div ng-switch-default class="grid">No Data</div>' + 
                  '</div>'
    }
});

テスト

describe('get-data test', function() {
  var $scope,
      $compile;

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

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

  it('renders Real Data when my-data is 4', function() {
    // Arrange
    var element = $compile('<get-data my-data="4"></get-data>')($scope);

    // Act
    element.scope().$digest();

    // Assert
    expect(element.find('div').html()).toBe('Real Data');
  });

  // Other tests omitted for brevity's sake
});

このPlunkerをチェックして、他のテストを確認してください。

ディレクティブがマークアップをレンダリングするには、ディレクティブのスコープ内でダイジェスト サイクルが発生する必要があることに注意してください。そのためには、 を使用element.scope()してそのスコープに到達し、それを呼び出す必要があります$digest。

最後に、ディレクティブのテストは、DOM が正しく操作されているかどうかをチェックすることがほとんどなので、テストの依存関係として jQuery を追加して、そのセレクターを利用できるようにすることをお勧めします。ここでは必要ありませんでしたが、ディレクティブがより複雑になるにつれて、多くの時間を節約できます。

于 2013-08-17T04:36:45.307 に答える