angularjs - Karma - 单元测试 Angular JS 指令时 div 的 ui 属性不正确

Question

我正在为一个指令编写测试，该指令基本上扩展到它的容器以达到浏览器窗口的整个宽度。

为了举例说明这一点，我将编写一些示例代码。

HTML 在页面中:

<div style="width: 800px; margin: 0 auto;">
  <full-width></full-width>
</div>

指令 然后更换 fullWidth指令:

<div class="full-width">
  <div ng-transclude=""></div>
</div>

并为元素分配边距，如下所示:

var sideOffset = element[0].offsetLeft*-1;

element.css('margin-left', sideOffset+'px')
element.css('margin-right', sideOffset+'px')

现在，该指令工作得很好，但是当我尝试使用以下方法测试偏移量时:

describe('Directive: fullWidth', function () {

  beforeEach(module('myApp'))

  var element,
      scope

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new()
  }))

  it('should have the same right and left margin', inject(function ($compile) {
    element = angular.element('<tt-full-width-section></tt-full-width-section>');
    element = $compile(element)(scope)

    var leftMargin = element.css('margin-left')
    console.log(leftMargin)
    console.log(element)
  }))
})

我得到一个不错的 0px .同时检查记录的 element[0].offsetLeft结果为 0。

关于我如何(如果可能)告诉 Karma(Jasmine？)渲染 div 以便我可以检查偏移量的任何想法？

基于 daveoncode 建议，我对测试进行了一些更改，我们正在改进。
但是，该指令似乎在测试中不起作用。
我仍然得到 0px 为 margin-left同时有 265px 的 offsetLeft

it('should have the same right and left margin', inject(function ($compile) {
  element = angular.element(
      '  <div style="width:50%; margin: 0 auto;">' +
      '    <full-width></full-width>' +
      '  </div>'
  );
  element = $compile(element)(scope)
  angular.element(document).find('body').append(element);

  var el2 = element.find('div')

  var leftMargin = el2.css('margin-left')
  var rightMargin = el2.css('margin-right')
  console.log(leftMargin, el2)
}

Answer 1

提示 1:

CSS 样式在元素被添加到 DOM 之前不会应用于元素!这不是与 karma 、 Angular 、 Jasmine 或其他什么有关的问题……这就是浏览器引擎的工作原理!浏览器解析 CSS 定义并根据它呈现页面中的元素，但是在 angular 测试中你编写:

var element = angular.element('<my-directive></my-directive>');
$compile(element)(scope);

您正在处理内存中的 DOM 节点，除了您的 JavaScript 代码之外，其他人都不知道这些节点!浏览器引擎应该如何将 CSS 应用于位于 js 变量中的内存节点？它显然不能......它只能遍历页面中的节点树，所以......“修复”很简单:你必须将元素添加到DOM:

angular.element(document).find('body').append(element);

提示 2:

好的，我认为现在您的问题实际上是另一个问题，您正在使用 jQlite .css() 实现，这与 jQuery 不同，它不检索计算样式，而只检索内联样式(因此我担心它无法“翻译” auto 到实际像素数!)...尝试使用此代码段来检索计算出的左边距:

window.getComputedStyle(element, null).marginLeft

(getComputedStyle 应该适用于除 IE 之外的每个浏览器，所以如果您使用 PhantomJS 进行测试，那就没问题了)