javascript - 对包装 slickgrid 的 Angular Directive(指令)进行单元测试

Question

我想测试我的 Angular Directive(指令)，它是 slickgrid 的包装器。

'use strict';
describe('Unit: Grid Directive', function() {
  var $scope;
  var element;

  beforeEach(module('grid'));
  beforeEach(inject(function($compile, $rootScope) {
    $scope = $rootScope;    
    element = angular.element('<grid class="slickgrid-table" id="miscGrid" query="query"/>');
    $scope.query = { symbol: 'AAAA' };
    $compile(element)($scope);
    $scope.$digest();
  }));

问题在于 slickgrid 使用 jquery 来查找应插入网格的位置的 id。

Error: SlickGrid requires a valid container, #miscGrid does not exist in the DOM.

我的问题是，我怎样才能让它发挥作用？如何“欺骗” slickgrid 使其意识到我尝试编译的元素是有效容器？

Answer 1

我发现在大多数情况下将元素附加到 DOM 中比欺骗任何东西更容易。根据项目 github 的示例，无论如何，控件都需要位于 DOM 中才能正确初始化 ( http://mleibman.github.io/SlickGrid/examples/example-explicit-initialization.html )

我倾向于将以下几行放在任何指令规范中

var sandbox;
beforeEach(function() { sandbox = angular.element('<div>'); angular.element(document.body).append(sandbox); });
afterEach(function() { sandbox.remove(); sandbox = null; });

然后只需在编译之前将指令附加到沙箱即可。