Question

我想对我的指令进行单元测试。这是代码：

.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

Answer 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作为测试的依赖关系，这样你就可以利用它的选择器。这里不需要它，但是当你的指令变得更复杂时，它可以节省你很多时间。

单元测试使用ng-switch的AngularJS指令

1 个答案: