使用phantomjs运行功能性qUnit测试

Question

I'm trying to test a bunch of pages for functionality (eg simulating clicks, checking classes append etc.) and figured that phantomjs would be a good host for my tests.

Though I can't for the life in me figure out how to combine qunit and phantomjs. (I'm also trying to run it through Grunt's qunit module)

I thought I could do something like this and kind of mix phantom and qunit syntax...

var page = require('webpage').create();
page.viewportSize = { width: 1280, height: 1024 };
page.onConsoleMessage = function (msg) {
    console.log(msg);
};

page.open('home.html', function () {
    module("tests");
    test('test', 1, function(){
        $('#button').on('click', function(){
            ok(true, 'button was clicked!');
        });
        $('#button').trigger('click');
    });
});

But obviously that's really wrong.

Is it a case of injecting my page contents into the qunit-fixture div in my test.html file? Or am I going about it completely the wrong way?

Answer 1

The grunt-contrib-qunit module actually installs phantomjs as a dependency. When you set up the grunt task to run your qunit tests, it will spawn a phantomjs instance. So for example, I set up my grunt tasks like so:

...
qunit: {
  nav: [ "tests/nav.html", "tests/footer.html" ],
  search: [ "tests/search-tests.html" ]
}

And then run my tests like so:

grunt qunit:search

Or to run all tests:

grunt qunit