Modify mocha-test-clients to use Karma (#149)

mocha-client-tests/README.md

@@ -1,17 +1,40 @@
 #Mocha client tests for WebExtensions
-##Install dependency
-`npm install` - will install all dependencies for running PhantomJS outside of addon
+##Introduction
+This example shows two methods of testing a WebExtension:
+* Running tests from within the addon
+* Running tests from the commandline using Karma
 
-Than please run `cd ./addon/` and `npm install` to install mocha. It give you possibility to run client test inside of addon with mocha UI. If you don't want to have mocha UI you can install [WebConsole-reporter](https://github.com/eeroan/WebConsole-reporter)
+See https://github.com/Standard8/example-webextension for a more complete example of WebExtension test configuration.
 
-##Run with web-ext cli
+##Install Dependencies:
+```
+  npm install
+```
+To run tests from within the addon:
+```
+  cd addon
+  npm install
+```
+
+##Testing within the Addon
+This gives you the possibility to run client tests inside the addon with the mocha UI.
+If you don't want to use the mocha UI, you can install [WebConsole-reporter](https://github.com/eeroan/WebConsole-reporter).
+
+###Run with web-ext cli
 Just run `npm run web-ext` (will work with FF dev edition), if you have error with web-ext cli please add path for FF binary file with `--firefox-binary /path/to/firefox-bin`
 [(web-ext docs)](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference).
 
-When addon will start click on mocha icon in your browser bar to run client tests: 
+When the addon starts, click on the mocha icon in your browser bar to run the tests:
 
 ![addon screenshot](screenshots/addon-button.png "Mocha test addon")
 
-Addon will run test of  `./addon/background.js` in `./addon/tests/lib/background-messaging.test.js`
-##PhantomJs tests
-`npm test` will run simple test of `./addon/background.js` in `./tests/lib/background.test.js`
+This will test  `./addon/background.js` with `./addon/tests/lib/background-messaging.test.js`.
+
+##Testing from the Commandline
+This uses [Karma](http://karma-runner.github.io) to run tests from the commandline. Just type `npm test` to test `./addon/background.js` with `./tests/lib/background.test.js`.
+
+###Debug  Mode
+Use `npm run test:debug` to run Karma in watch mode. Whenever you modify a Javascript file, the tests will automatically rerun.
+
+You can install [karma-notification-reporter](https://www.npmjs.com/package/karma-notification-reporter) to display test results in a desktop notification. You'll need to add `--reporters=dots,notification` to the `test:debug` command line of
+`package.json` to enable it.

mocha-client-tests/addon/background.js

@@ -3,7 +3,7 @@ var Background = {
         if (msg && msg.action && Background.hasOwnProperty(msg.action)) {
             return Background[msg.action](msg, sender, sendResponse);
         } else {
-            console.warning('No handler for message: ' + JSON.stringify(msg));
+            console.warn('No handler for message: ' + JSON.stringify(msg));
         }
     },
     ping: function(msg, sender, sendResponse) {

mocha-client-tests/karma.conf.js

@@ -0,0 +1,73 @@
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      // Test dependencies
+      'node_modules/expect.js/index.js',
+      'node_modules/sinon-chrome/bundle/sinon-chrome-webextensions.min.js',
+
+      // Source
+      'addon/*.js',
+
+      // Tests
+      'tests/lib/*.js'
+    ],
+
+    // The tests below are intended to be run from inside the WebExtension itself,
+    // not from the Karma test suite.
+    exclude: [
+      'addon/tests',
+    ],
+
+    client: {
+      mocha: {
+        // change Karma's debug.html to the mocha web reporter
+        reporter: 'html',
+      },
+    },
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['dots'],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
+    //                  config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable/disable watching file and executing tests when any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Firefox'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity,
+  });
+};

mocha-client-tests/package.json

@@ -4,18 +4,20 @@
   "description": "Example how to run unit tests for WebExtension",
   "main": "index.js",
   "scripts": {
-    "test": "mocha-phantomjs -p ./node_modules/phantomjs-prebuilt/bin/phantomjs -R nyan tests/background.html",
+    "test": "karma start",
+    "test:debug": "karma start --no-single-run --auto-watch",
     "web-ext": "web-ext run  -s ./addon"
   },
   "author": "",
   "license": "MPL-2.0",
   "devDependencies": {
     "chai": "^3.5.0",
-    "chrome-mock": "0.0.9",
-    "mocha": "^3.1.2",
-    "mocha-phantomjs": "^4.1.0",
-    "phantomjs-prebuilt": "^2.1.13",
     "expect.js": "^0.3.1",
+    "karma": "^1.3.0",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-mocha": "^1.3.0",
+    "mocha": "^3.1.2",
+    "sinon-chrome": "^2.1.2",
     "web-ext": "^1.6.0"
   }
 }

mocha-client-tests/tests/background.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Tests for background</title>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="../node_modules/mocha/mocha.css"/>
-</head>
-<body>
-<div id="mocha"></div>
-<script src="../node_modules/mocha/mocha.js"></script>
-<script src="../node_modules/chai/chai.js"></script>
-<script src="../node_modules/expect.js/index.js"></script>
-<script src="../node_modules/chrome-mock/browser.js"></script>
-<script>
-    mocha.ui('bdd');
-    mocha.reporter('html');
-    expect = chai.expect;
-</script>
-
-<script src="../addon/background.js"></script>
-<script src="lib/background.test.js"></script>
-<script>
-    mocha.run();
-</script>
-</body>
-</html>

mocha-client-tests/tests/lib/background.test.js

@@ -1,8 +1,9 @@
 describe('Background', function() {
     describe('ping', function() {
-        it('should return pong in response', function() {
+        it('should return pong in response', function(done) {
             Background.ping(false, false, function(response) {
                 expect(response).to.equal('pong');
+                done();
             });
         });
     });