kpqqfg
Last Updated: February 25, 2016
·
7.661K
· tomas2387
40276387b66caf2bbf4e1b764da1b807

Test a requirejs project using mocha-phantomjs, chai and sinon

I was trying this week to configure and test a requirejs project. It uses mocha-phantomjs to execute the tests; chai as the assertion library; and sinon.js to mock or stub dependencies.

I tried this how-to test requirejs with mocha-phantomjs and grunt , but didn't get enough info about how to add chai and sinon.

I finally conclude that the best and easiest way to accomplish that is like this:

  • sinon.js included in a script tag in the testRunner.html
  • chai.js included in the asynchronous module definition by requirejs.

testRunner.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/node_modules/mocha/mocha.css" />
</head>
<body>
    <div id="mocha"></div>
    <script src="lib/node_modules/sinon/pkg/sinon.js"></script>
    <script src="lib/node_modules/mocha/mocha.js"></script>
    <script>
        mocha.ui('tdd');
    </script>
    <script src="../scripts/require.js" data-main="test.config.js" ></script>
</body>
</html>

test.config.js

require.config({
    baseUrl: "../scripts/src",
    paths: {
        chai: '../../test/lib/node_modules/chai/chai'
    }
});

require([
    '../../test/src/UserMediaTest'
], function() {
    if (typeof mochaPhantomJS !== "undefined") { mochaPhantomJS.run(); }
    else { mocha.run(); }
});

UserMediaTest.js

chai can be added in the asynchronous module definition, but for some reason, sinon can't. Requirejs won't define it. Thats why its added in a script tag in the testRunner.html

define(['chai', 'UserMedia','NavigatorWrapper'], function(chai, UserMedia, NavigatorWrapper) {
    suite('NavigatorWrapper.hasGetUserMedia', function() {
        var sut, mockNavigator, instanceNavigator;
        setup(function() {
            instanceNavigator = new NavigatorWrapper();
            mockNavigator = sinon.mock(instanceNavigator);
            sut = new UserMedia(instanceNavigator);
         });

         ....

        });
});

You can see more in https://github.com/tomas2387/webrtcApp

Say Thanks
Respond

3 Responses
Add your response

11582
9825be25f35a1eb7d13a873b661709f2

Hello!
I think that TDD test-runner should be done in more transparent way.
While learning sinon I found that its author wrote the book http://tddjs.com/
I am agree with Christian Johansen about test-runner concept - it should be fully automated and scalable, it should totally exclude F5 from usual workflow and should provide quick access to all sensible information in same place.
While Christian writing about jsTestDriver which requires Java, today available great test-runer "karma" http://karma-runner.github.io/0.10/index.html

I have wrote boilerplate which integrates karma, mocha, chai, sinon for testing and RequireJS for making architecture. You may checkout it here: https://github.com/x2es/boilerplate-karma-mocha-chai-requirejs

over 1 year ago ·
11592
40276387b66caf2bbf4e1b764da1b807

Nice!
What is that "karma-sound" folder? It really speaks-out when a test pass?? LOL

I have to try that

over 1 year ago ·
11676
9825be25f35a1eb7d13a873b661709f2

karma-sound folder is left for demonstrate how to make custom sound configuration in karma.conf.js instead of default sounds from karma-mp3-reporter @see karma.conf.js

over 1 year ago ·