Search code examples
jqueryqunitgruntjs

Grunt qunit fails but browser version works just fine


I'm using latest versions of grunt, qunit with the folowing test:

  module('jQuery#FilteringTool', {

    setup: function() {
      this.elems = $('#qunit-fixture').children();
      $(this.elems).FilteringTool();
    }
  });

  asyncTest('load remote content', function(){
    var $this = this;
    window.setTimeout( function(){
      ok( $('#qunit-fixture .carouselItem').length > 0, "items are in place" );
      start();
    }, 50 );

  });

The plugin FilterinTool works fine, running tests in the browser works fine but running tests whithin grunt will fail. I'm fairly new to TDD world, and i don't understand what the hell i'm doing wrong?

Tested code is this:

(function( $, document ){
  var FilteringTool = {
    init: function( el, o ){
      var $this = this;
      $this.el = $( el );
      $this.ajaxUrl = $(el).data('ajax-url');
      $this.loadItems();
    } // init

    ,loadItems: function(params){
      var $this = this;
      $.getJSON( $this.ajaxUrl, $.proxy( $this.populateFields, $this ) );
    }//loadItems

    ,populateFields: function( data ){
      var $this = this;
      $('.filtered-items', $this.el).append( data.html );
    }//populateFields
  };

  $.fn.FilteringTool = function() {
    return this.each(function(){
      var obj = Object.create( FilteringTool );
      obj.init( this );
    });
  };
})( jQuery, document );

and fixtures:

  <div id="qunit-fixture">
    <div class="carouselWrapper loading" data-ajax-url="../../../fixtures/wines-carousel.ajax.php">
      <div class="carousel">
        <div class="filtered-items"></div>
      </div><!-- /.carousel -->
    </div><!-- /.carouselWrapper -->
  </div>

Solution

  • The problem was that i was trying to load a php file from local. Me dumb :) Fixed with a full URL for data-ajax-url.