对包装 slickgrid 的角度指令进行单元测试答案

【问题标题】：Unit testing an angular directive wrapping slickgrid对包装 slickgrid 的角度指令进行单元测试
【发布时间】：2013-10-16 05:14:56
【问题描述】：

我想测试我的 angular 指令，它是 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 以意识到我正在尝试编译的元素是一个有效的容器？

【问题讨论】：

标签： javascript unit-testing angularjs angularjs-directive slickgrid

【解决方案1】：

比起欺骗任何东西，我发现在大多数情况下，将元素附加到 DOM 更容易。根据项目 gitithub 中的示例，控件需要在 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; });

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

【讨论】：