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

为了举例说明,我将编写一些示例代码.

页面中的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.还检查记录的元素[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)
}