run all 'test.html' files in a directory - mocha-phantomjs

Question

I have a module, I am testing this module using mocha-phantomjs. I created package.json file

{
  "name"        : "demo-test",
  "scripts": {
    "test": "npm run test-debug",
    "test-debug": "mocha-phantomjs ./test/Test1.html"
  },
  "dependencies" : {
    "mocha"     : "1.13.x",
    "commander" : "1.2.x",
    "which"     : "~1.0.5",
    "mocha-phantomjs": "3.3.2"
  },
  "devDependencies" : {
    "chai"          : "1.8.x",
    "coffee-script" : "1.6.x",
    "requirejs"     : "2.1.x",
    "jquery"        : "2.1.0"
  }
}

Then I run npm install and then npm test to run the test. It works fine and run the tests of test1.html. Now I want that all the files (test1, test2, ...) under test directory get executed on running npm test.

I can run all html files by calling then individually in package.json file but if there is a way to load all Html files.

Answer 1

Typically, you would pass a Tests.html file to your mocha-phantomjs runner that would load up all of the test files that you want to run using script tags.

Tests.html would contain:

<script src="controller-tests/one-controller-test.js"></script>
<script src="controller-tests/another-controller-test.js"></script>
<script src="controller-tests/yet-another-controller-test.js"></script>
<script src="service-tests/one-service-test.js"></script>
<script src="service-tests/another-service-test.js"></script>
<script src="service-tests/yet-another-service-test.js"></script>

Alternatively, if you are using RequireJS or another AMD library, you could load one test-init.js file and, within that file, require-in all of the test files individually or in a nested manner as follows:

Tests.html

<script src="test-init.js"></script>

test-init.js

require('controller-tests/init.js');
require('service-tests/init.js');

controller-tests/init.js

require('one-controller-test.js');
require('another-controller-test.js');
require('yet-another-controller-test.js');

service-tests/init.js

require('one-service-test.js');
require('another-service-test.js');
require('yet-another-service-test.js');

Answer 2

I agree with DanAri.

I use the same bootloader and testing setup.

Mocha BDD

Presumably, by default, running Mocha in "BDD" mode looks for html files in a "test" directory in the root of a project. It starts by looking for a file named "test.html". "test/test.html" is the default path target for Mocha to use as a fixture file.

Regarding RequireJS/AMD

Regarding client-side (AMD) flavor RequireJS, I use a binary branching pattern.

-index.html
  |
  -/js/rjsMain.js
-test/test.html
  |
  -/js/rjsTest.js

I separated my RequireJS configuration section into a new file (I call mine "rjsConfig.js"). This file contains the path aliases, dependency shims, et cetera.

So, then my RequireJS "data-main" file "/js/rjsMain.js" looks like this:

require(['rjsConfig'], function () {
    require(['app/main'], function () {});
});

I then duplicated the Require "main.js" file to add an alternate entry point for my Mocha fixture file .

The reason for this is so that you don't have to maintain two separate configuration files for Require. It's nice to have one shared file.

PhantomJS

Getting PhantomJS to actually load and interact with content that is loaded asynchronously? That is another matter. It can be quite tricky.

Fortunately, I found a file that does the trick.

It doesn't have a very good name, but - for me at least - "load_ajax.js" is the secret sauce you need to get it to work.

https://gist.github.com/kalharbi/fc9d4f71b5e2a8f485cc

You need to customize it to run against your local routes.