How to setup grunt task for requirejs and qunit

Asked 3/4, 2015 at 15:52 Answered 27/4, 2015 at 8:37

Solved javascript requirejs phantomjs qunit grunt-contrib-qunit

I am trying to setup a QUnit environment using requirejs and grunt-contrib-qunit.

Here is what I have.

gruntfile:

qunit: {
  all: {
    options: {
      urls: [
        'http://localhost:8000/qunit/qunit-test-suite.html'
      ]
    }
  }
},

connect: {
  server: {
    options: {
      port: 8000,
      base: '.'
    }
  }
},

qunit-test-suite.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Tests Suite: travis CI Test</title>
  <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>

  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="../components/libs/qunit/qunit/qunit.js"></script>
  <script>
    QUnit.config.autoload = false;
    QUnit.config.autostart = false;
  </script>

  <script data-main="qunit" src="../components/libs/requirejs/require.js"></script>

</body>
</html>

qunit.js:

require.config({
    baseUrl: "../",
    paths: {
      'jquery': 'components/libs/jquery/dist/jquery.min',

      // Test for Foo
      'foo': 'components/app/foo/foo',
      'test-Foo': 'components/app/foo/test-Foo'
    },
    shim: {
     'QUnit': {
       exports: 'QUnit',
       init: function() {
         QUnit.config.autoload = false;
         QUnit.config.autostart = false;
       }
      }
    }
});

require(['test-Foo'], function (Foo) {
  QUnit.load();
  QUnit.start();
});

test-Foo.js:

define(['foo'], function(Foo) {

  'use strict';

  module("Foo");

  test("Foo return Test", function() {
    equal(Foo.foo(), "foo", "Function should return 'foo'");
    equal(Foo.oof(), "oof", "Function should return 'oof'");
  });

  test("Bar return Test", function() {
    equal(Foo.bar(), "barz", "Function should return 'bar'");
  });

});

Problem is that it all works fine when I open up the test-suite.html in my browser. Once sent to PhantomJS I get the following error:

Running "connect:server" (connect) task
Started connect web server on http://localhost:8000

Running "qunit:all" (qunit) task
Testing http://localhost:8000/qunit/qunit-test-suite.html

>> PhantomJS timed out, possibly due to a missing QUnit start() call.
Warning: 1/1 assertions failed (0ms) Use --force to continue.

Aborted due to warnings.

Full setup: https://github.com/markusfalk/test-travis

Test Run: https://travis-ci.org/markusfalk/test-travis

Thanks for any help :)

Sooty answered 3/4, 2015 at 15:52 Comment(3)

Is the brigde the problem? What could be done about that? https://mcmap.net/q/1167895/-grunt-not-running-qunit-tests-on-phantom But I actually load Qunit within the HTML and not via requireJS – Sooty 6/4, 2015 at 16:30

I have just found out that using [email protected] will make this setup work. Maybe it has to do with the update they have made: v0.6.0 Add noGlobals option, forwarded to QUnit. Report proper exit code to grunt based on failures. Add support for AMD. – Sooty 10/4, 2015 at 6:52

I have reworked the setup to something Jörn Zaefferer had proposed (github.com/markusfalk/test-travis/tree/…) but it still times out (travis-ci.org/markusfalk/test-travis/builds/58909816) – Sooty 17/4, 2015 at 13:43

With the help of Jörn I came up with a working setup. Trick is to setup requireJS before QUnit loads (moved requireJS config to config.js and load it first).

Requirements:

grunt-contrib-qunit v0.7.0
qunit v1.18.0

HTML test suite:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Tests Suite: asdf</title>
    <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
  </head>
  <body>

    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

    <script src="config.js"></script>
    <script data-main="unit" src="../components/libs/requirejs/require.js"></script>

  </body>
</html>

config.js

var requirejs = {
  baseUrl: "../",
  paths: {
    //{{app}}
    'foo': 'components/app/foo/foo',
    'test-foo': 'components/app/foo/test-foo',

    //{{libs}}
    'unit': 'qunit/unit',
    'qunit': 'components/libs/qunit/qunit/qunit',
    'jquery.exists': 'libs/jquery.exists/jquery.exists',
    'jquery': 'components/libs/jquery/dist/jquery.min'
  },
  'shim': {
    'jquery.exists': ['jquery']
  }
};

unit.js

require([
  'qunit',
  'test-foo'
],
function(qunit, TestFoo) {
  TestFoo();
  qunit.start();
});

test-foo.js:

define(['jquery', 'qunit', 'foo'], function($, qunit, Foo) {
  'use strict';
  return function() {
    qunit.module("Foo");
    qunit.test("Foo Test", function() {
      equal(Foo.saySomething(), "Hello", "returns 'Hello'");
    });
  };
});

And finally the module I want to test:

define(['jquery'], function($) {
  'use strict';
  var Foo = {
    saySomething: function() {
      return "Hello";
    }
  };
  return {
    saySomething: Foo.saySomething
  };
});

Sooty answered 27/4, 2015 at 8:37 Comment(0)

Have you tried running grunt with the -v and/or -d flags to get some more verbose output? I did notice that there was something skipped regarding PhantomJS in your travis-ci build.

Writing location.js file

PhantomJS is already installed at /usr/local/phantomjs/bin/phantomjs.

npm WARN excluding symbolic link lib/socket.io-client.js -> io.js

If it's dependant on io.js and the link isn't there, it will fail.

UPDATE: I found the issue using the verbose output. Your test is 404ing because of a filename issue.

["phantomjs","onResourceReceived",{"contentType":"text/html; charset=utf-8","headers":[{"name":"X-Content-Type-Options","value":"nosniff"},{"name":"Content-Type","value":"text/html; charset=utf-8"},{"name":"Content-Length","value":"43"},{"name":"Date","value":"Fri, 10 Apr 2015 06:45:47 GMT"},{"name":"Connection","value":"keep-alive"}],"id":6,"redirectURL":null,"stage":"end","status":404,"statusText":"Not Found","time":"2015-04-10T06:45:47.747Z","url":"http://localhost:10000/components/app/foo/test-Foo.js"}]

You're trying to use the file test-Foo.js. The file is named test-foo.js in your repository. Changing the case should fix the test.

Tunesmith answered 9/4, 2015 at 16:57 Comment(3)

I have added -vd to the travis build but can't really make much sense of it – Sooty 10/4, 2015 at 6:47

I found the answer. Updated my answer to reflect what I found in the verbose output. – Tunesmith 10/4, 2015 at 15:14

Thanks for your efforts but that was not the problem. I have fixed the 404 but still get the same result. – Sooty 11/4, 2015 at 17:52

Apologies in advance if I'm stating the obvious but do you have PhantomJS installed? I can't see it in your packages.json file. You can install it using npm install phantomjs --save-dev in your project root. The save-dev will add it to your packages.json so when you run npm install it will automatically get installed.

Superpatriot answered 8/4, 2015 at 0:35 Comment(1)

I have [email protected] installed which includes phantomjs – Sooty 8/4, 2015 at 8:1

Recommended topics

Hot tags