title: qunit test that styles get applied to target elements
body: <p>I'm doing my first set of javascript unit tests against a plugin I'm writing.
  It's based on a jquery ui widget and looks like this</p>
  
  <pre><code>$.widget("my.carousel", {
   // Set up the widget
          _create: function () {
              var self = this;
              _items = $(this.element).children();
              _totalItems = _items.length;
              _items.each(function(index) {
                  $(this).addClass('my-carousel-item');
                  if (index &gt; 0) {
                      $(this).effect("scale", { percent: 50 });
                  }
              });
  }
  </code></pre>
  
  <p>So when it gets applied to an element it gets all of it's children and scales them to 50% apart from the first.</p>
  
  <p>In my qunit tests I have</p>
  
  <pre><code>$(document).ready(function () {
  
      test('my-carousel-items are scaled to a given percentage if they are not the current item', function () {
              //setup
              var list = $('&lt;div id="testDiv" /&gt;');
              for (var i = 0; i &lt; 5; i++) {
                  $('&lt;div style="height:40px; background-color:red; margin-bottom:5px;"&gt;').appendTo(list);
              }
              $('#testArea').append(list);
  
              var carousel = list.carousel();
  
              expect(5);
              carousel.children().each(function(index) {
                  if (index == 0)
                      equals($(this).css('height'), 40);
                  else
                      equals($(this).css('height'), 20);
              });
          });
  });
  </code></pre>
  
  <p>Altough this does actually display correctly (the height value of the elements is 20px) the results of the test fail. I assume it's because the scale effect is applied after the test has run. If anyone has any advice to give i'd welcome it.</p>
  
  <p><img src="https://i.stack.imgur.com/1Xl0F.jpg" alt="qunit results"></p>