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 回答