如何確保控制器注入指令進行測試？

我正在使用Smart Table並嘗試使用Karma設置一些測試。我一再得到錯誤Error: [$compile:ctreq] Controller 'stTable', required by directive 'removePag', can't be found!。實際使用該指令時，我不會收到任何錯誤。在我看來，Karma應該讓智能表可用於tools模塊，這是我在規範中提到的，但沒有骰子。我如何確定stTable可用於removePag的測試？如何確保控制器注入指令進行測試？

在tools.js（包括expose因爲我懷疑它可能參與，因爲它是連接到頂層st-table一個指令）：

angular.module('tools', ['smart-table']); 

angular 
    .module('freeTools') 
     .directive('expose', exposeTableState) 
     .directive('removePag', removePag) 

function exposeTableState(){ 
    return { 
     require:'stTable', 
      link:function(scope, element, attr, ctrl){ 
      scope.smartTableState=ctrl.tableState(); 
     } 
    }; 
} 

function removePag() { 
    return { 
     restrict: 'E', 
     require: '^stTable', 
     template: '<a href="">View as a single page</a>', 
     link: function(scope, element, attrs, ctrl) { 
      return element.bind('click', function() { 
       return scope.$apply(function() { 
        var tableState; 
        tableState = ctrl.tableState(); 
        tableState.pagination.number = tableState.pagination.totalItemCount; 
        return ctrl.pipe(); 
       }); 
      }); 

     } 
     }; 
}

在toolsSpec.js：

describe('tools', function() { 
    var $compile, 
    $rootScope; 
    beforeEach(module('freeTools')); 
    beforeEach(inject(function(_$compile_, _$rootScope_){ 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
    })); 

    it('Replaces the element with the appropriate content', function() { 
     var element = $compile("<remove-pag></remove-pag>")($rootScope); 
     $rootScope.$digest(); 
     expect(element.html()).toContain("View as a single page"); 
    }); 
}

在Karma.conf：

module.exports = function(config){ 
config.set({ 

basePath : '../../', 

files : [ 
    'bower_components/jquery/dist/jquery.js', 
    'bower_components/angular/angular.js', 
    'bower_components/angular-smart-table/dist/smart-table.js', 
    'bower_components/angular-mocks/angular-mocks.js', 
    'assets/scripts/*.js', 
    'assets/test/*.js' 
], 

autoWatch : true, 

frameworks: ['jasmine-ajax', 'jasmine'], 

browsers : ['Chrome'], 

plugins : [ 
     'karma-chrome-launcher', 
     'karma-firefox-launcher', 
     'karma-jasmine-ajax', 
     'karma-jasmine', 
     ], 
}); 
};

簡體HTML：

<section ng-app="tools"> 
    <table st-table="data" st-safe-src="safe" expose> 
    <div st-pagination> 
     <remove-pag></remove-pag>

我意識到這個問題是非常相似的Unit testing an AngularJS (Smart Table) directive。正如那裏所暗示的那樣，模擬智能表測試自己的控制器的方式也不起作用。無論如何，模塊的源代碼中的stTable似乎是一個指令，而不是控制器。

我也試過在測試中用st表包裝元素，就像$compile("<table st-table><remove-pag>...有相同的錯誤。

我查看了像Controller Required By Directive Can't Be Found這樣的問題，但我已有一個共享的父項tools。

來源

2016-03-01 Mitch Lillie

顯然，問題是父母必須被嘲笑。 H/t爲Unit testing AngularJS child directive that requires parent directive爲嘲笑的指導。

it('Replaces the element with the appropriate content', function() { 
    // This can be anything, even an empty object. 
    var stTableControllerMock = { 
     idk: function() { 
      return 'something'; 
     } 
    }; 

    // Create element with dummy parent 
    var element = angular.element('<fake-parent><remove-pag></remove-pag></fake-parent>'); 

    // '$' + {nameOfMissingController} + 'Controller' = '$stTableController' 
    element.data('$stTableController', stTableControllerMock); 

    // Compile, find the element we're testing, and digest 
    $compile(element)($rootScope.$new()); 
    element = element.find('remove-pag'); 
    $rootScope.$digest(); 

    // Test 
    expect(element.html()).toContain("View as a single page"); 
});

來源

2016-03-02 17:25:38

如何確保控制器注入指令進行測試？

回答

相關問題