title: Karma - incorrect ui properties of div while unit-testing Angular JS directive
body: <p>I'm writing tests for a directive that basically expand over it's container to reach the full width of the browser window.  </p>
  
  <p>To exemplify this I'll write some sample code.  </p>
  
  <p><strong>HTML</strong> in the page:</p>
  
  <pre><code>&lt;div style="width: 800px; margin: 0 auto;"&gt;
    &lt;full-width&gt;&lt;/full-width&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <strong>directive</strong> then replace the <code>fullWidth</code> directive with:</p>
  
  <pre><code>&lt;div class="full-width"&gt;
    &lt;div ng-transclude=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And assign margins to the element, like this:</p>
  
  <pre><code>var sideOffset = element[0].offsetLeft*-1;
  
  element.css('margin-left', sideOffset+'px')
  element.css('margin-right', sideOffset+'px')
  </code></pre>
  
  <p><br />
  Now, the directive works perfectly fine, but when I try to test the offset with:  </p>
  
  <pre><code>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('&lt;tt-full-width-section&gt;&lt;/tt-full-width-section&gt;');
      element = $compile(element)(scope)
  
      var leftMargin = element.css('margin-left')
      console.log(leftMargin)
      console.log(element)
    }))
  })
  </code></pre>
  
  <p>I get a <em>nice</em> <code>0px</code>. Also inspecting the logged <code>element[0].offsetLeft</code> results in 0.</p>
  
  <p>Any idea on how can I (if possible) tell Karma (Jasmine?) to render the div so I can check the offset?</p>
  
  <hr>
  
  <p>Based on <strong>daveoncode</strong> suggestion, I made some changes to the test, and we're improving.
  However, the directive doesn't seems to work in the test.<br>
  I still get 0px as <code>margin-left</code> while having 265px of <code>offsetLeft</code></p>
  
  <pre><code>it('should have the same right and left margin', inject(function ($compile) {
    element = angular.element(
        '  &lt;div style="width:50%; margin: 0 auto;"&gt;' +
        '    &lt;full-width&gt;&lt;/full-width&gt;' +
        '  &lt;/div&gt;'
    );
    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)
  }
  </code></pre>