Run test suite using karma

jashkenas · Feb 20, 2015 · f02ba1f · f02ba1f
1 parent 89b1c58
commit f02ba1f
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 139 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,3 +3,16 @@ node_js:
   - '0.10'
 notifications:
   email: false
+addons:
+  firefox: '31.0'
+install:
+  - sudo apt-get install chromium-browser
+  - npm install -g karma-cli
+  - npm install
+  - npm install karma-firefox-launcher karma-chrome-launcher
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+script:
+  - karma start --browsers Firefox,PhantomJS,Chrome_sandbox
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,54 @@
+// Note some browser launchers should be installed before using karma start.
+// For example:
+// npm install karma-firefox-launcher
+// karma start --browsers=Firefox
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['qunit'],
+
+    // list of files / patterns to load in the browser
+    files: [
+        'test/vendor/jquery.js',
+        'test/vendor/json2.js',
+        'test/vendor/underscore.js',
+        'backbone.js',
+        'test/setup/*.js',
+        'test/*.js'
+    ],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+    // web server port
+    port: 9877,
+
+    // 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 whenever any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // See http://stackoverflow.com/a/27873086/1517919
+    customLaunchers: {
+        Chrome_sandbox: {
+            base: 'Chrome',
+            flags: ['--no-sandbox']
+        }
+    }
+  });
+};
diff --git a/package.json b/package.json
@@ -8,13 +8,15 @@
     "underscore"  : ">=1.6.0"
   },
   "devDependencies": {
-    "phantomjs": "1.9.7-8",
+    "coffee-script": "1.7.1",
     "docco": "0.6.3",
-    "coffee-script": "1.7.1"
+    "karma": "^0.12.31",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "karma-qunit": "^0.1.4"
   },
   "main": "backbone.js",
   "scripts": {
-    "test": "phantomjs test/vendor/runner.js test/index.html?noglobals=true && coffee test/model.coffee",
+    "test": "./node_modules/karma/bin/karma start && coffee test/model.coffee",
     "build": "uglifyjs backbone.js --mangle --source-map backbone-min.map -o backbone-min.js",
     "doc": "docco backbone.js && docco examples/todos/todos.js examples/backbone.localStorage.js",
     "lint": "jsl -nofilelisting -nologo -conf docs/jsl.conf -process backbone.js"
@@ -29,4 +31,4 @@
   "files": [
     "backbone.js", "backbone-min.js", "backbone-min.map", "LICENSE"
   ]
-}
+}
diff --git a/test/index.html b/test/index.html
@@ -1,23 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset='utf8'>
   <title>Backbone Test Suite</title>
   <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen">
 </head>
 <body>
-  <div id="qunit"></div>
-  <div id="qunit-fixture">
-    <div id='testElement'>
-      <h1>Test</h1>
-    </div>
-  </div>
+  <script src="setup/dom-setup.js"></script>
   <script src="vendor/json2.js"></script>
   <script src="vendor/jquery.js"></script>
   <script src="vendor/qunit.js"></script>
   <script src="vendor/underscore.js"></script>
   <script src="../backbone.js"></script>
-  <script src="environment.js"></script>
+  <script src="setup/environment.js"></script>
   <script src="noconflict.js"></script>
   <script src="events.js"></script>
   <script src="model.js"></script>

diff --git a/test/setup/dom-setup.js b/test/setup/dom-setup.js
@@ -0,0 +1,6 @@
+$('body').append(
+    '<div id="qunit"></div>' +
+    '<div id="qunit-fixture">' +
+        '<div id="testElement"><h1>Test</h1></div>' +
+    '</div>'
+);
diff --git a/test/environment.js → test/setup/environment.js b/test/environment.js → test/setup/environment.js
diff --git a/test/vendor/runner.js b/test/vendor/runner.js