From f4a43a14f5d89bd2b2c6f294d68c984451cb0c19 Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Wed, 25 Nov 2015 11:44:04 +0000
Subject: [PATCH 1/4] Add tests for the client-side part of pywb using Karma

 * Add a Karma configuration for unit/integration tests
   for the client-side pywb code.

 * Add an integration test suite which creates an <iframe> loads
   the client-side rewriting code (wombat.js) in it and
   then executes a test script.

   Since wombat.js monkey-patches the DOM and the exact behavior
   of DOM objects varies between browsers, which we want to test,
   the suite does not mock the DOM but instead runs
   a set of tests in an isolated environment against
   the DOM.

 * Add Travis config to run the Karma tests
---
 .gitignore                 |   3 +
 .travis.yml                |   4 +-
 karma-tests/Makefile       |   4 +
 karma-tests/karma.conf.js  |  68 +++++++++++++++++
 karma-tests/wombat.spec.js | 145 +++++++++++++++++++++++++++++++++++++
 package.json               |  33 +++++++++
 6 files changed, 256 insertions(+), 1 deletion(-)
 create mode 100644 karma-tests/Makefile
 create mode 100644 karma-tests/karma.conf.js
 create mode 100644 karma-tests/wombat.spec.js
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
index d48db0e7..e9ba91e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,6 @@ nosetests.xml
 .pydevproject
 
 .vagrant
+
+# Node
+node_modules/
diff --git a/.travis.yml b/.travis.yml
index 09218b17..ac5cef39 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,9 +15,11 @@ install:
   - pip install boto certauth
   - python setup.py -q install
   - pip install coverage pytest-cov coveralls --use-mirrors
+  - npm install
 
 script:
-    python setup.py test
+  - python setup.py test
+  - cd karma-tests && make test
 
 after_success:
     coveralls
diff --git a/karma-tests/Makefile b/karma-tests/Makefile
new file mode 100644
index 00000000..bb80eeec
--- /dev/null
+++ b/karma-tests/Makefile
@@ -0,0 +1,4 @@
+NODE_BIN_DIR=../node_modules/.bin
+
+test:
+	$(NODE_BIN_DIR)/karma start --single-run
diff --git a/karma-tests/karma.conf.js b/karma-tests/karma.conf.js
new file mode 100644
index 00000000..61127d7d
--- /dev/null
+++ b/karma-tests/karma.conf.js
@@ -0,0 +1,68 @@
+var WOMBAT_JS_PATH = 'pywb/static/wombat.js';
+
+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', 'chai'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      {
+        pattern: WOMBAT_JS_PATH,
+        watched: true,
+        included: false,
+        served: true,
+      },
+      'karma-tests/*.spec.js',
+    ],
+
+
+    // 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: ['progress'],
+
+
+    // 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 whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultanous
+    concurrency: Infinity
+  })
+}
diff --git a/karma-tests/wombat.spec.js b/karma-tests/wombat.spec.js
new file mode 100644
index 00000000..a1b681af
--- /dev/null
+++ b/karma-tests/wombat.spec.js
@@ -0,0 +1,145 @@
+var WOMBAT_SRC = '../pywb/static/wombat.js';
+
+// creates a new document in an <iframe> and runs
+// a WombatJS test case in it.
+//
+// A new <iframe> is used for each test so that each
+// case is run with fresh Document and Window objects,
+// since Wombat monkey-patches many Document and Window
+// functions
+//
+function runWombatTest(testCase, done) {
+    // create an <iframe>
+    var testFrame = document.createElement('iframe');
+    testFrame.src = '/dummy.html';
+    document.body.appendChild(testFrame);
+
+    testFrame.contentWindow.addEventListener('load', function () {
+        var testDocument = testFrame.contentDocument;
+
+        function runFunctionInIFrame(func) {
+            testFrame.contentWindow.eval('(' + func.toString() + ')()');
+        }
+
+        // expose an error reporting function to the <iframe>
+        window.reportError = function(ex) {
+            done(new Error(ex));
+        };
+
+        // expose chai assertions to the <iframe>
+        window.assert = assert;
+
+        runFunctionInIFrame(function () {
+            // re-assign the iframe's console object to the parent window's
+            // console so that messages are intercepted by Karma
+            // and output to wherever it is configured to send
+            // console logs (typically stdout)
+            console = window.parent.console;
+            window.onerror = function (message, url, line, col, error) {
+                if (error) {
+                    console.log(error.stack);
+                }
+                reportError(new Error(message));
+            };
+
+            // expose chai's assertion testing API to the test script
+            assert = window.parent.assert;
+            reportError = window.parent.reportError;
+        });
+
+        try {
+            runFunctionInIFrame(testCase.initScript);
+        } catch (e) {
+            throw new Error('Configuring Wombat failed: ' + e.toString());
+        }
+
+        try {
+            testFrame.contentWindow.eval(testCase.wombatScript);
+            runFunctionInIFrame(function () {
+                new window._WBWombat(wbinfo);
+            });
+        } catch (e) {
+            throw new Error('Initializing WombatJS failed: ' + e.toString());
+        }
+
+        if (testCase.html) {
+            testDocument.body.innerHTML = testCase.html;
+        }
+
+        if (testCase.testScript) {
+            try {
+                runFunctionInIFrame(testCase.testScript);
+            } catch (e) {
+                throw new Error('Test script failed: ' + e.toString());
+            }
+        }
+
+        testFrame.remove();
+        done();
+    });
+}
+
+describe('WombatJS', function () {
+    var wombatScript;
+
+    before(function (done) {
+        // load the source of the WombatJS content
+        // rewriting script
+        var req = new XMLHttpRequest();
+        req.open('GET', '/base/pywb/static/wombat.js');
+        req.onload = function () {
+            wombatScript = req.responseText;
+            done();
+        };
+        req.send();
+    });
+
+    it('should load', function (done) {
+        runWombatTest({
+            initScript: function () {
+                wbinfo = {
+                    wombat_opts: {},
+                };
+            },
+            wombatScript: wombatScript,
+        }, done);
+    });
+
+    it('should rewrite document.baseURI', function (done) {
+        runWombatTest({
+            initScript: function () {
+                wbinfo = {
+                    wombat_opts: {},
+                    prefix: window.location.origin,
+                    wombat_ts: '',
+                };
+            },
+            wombatScript: wombatScript,
+            testScript: function () {
+                var baseURI = document.baseURI;
+                if (typeof baseURI !== 'string') {
+                    throw new Error('baseURI is not a string');
+                }
+                assert.equal(baseURI, 'http:///dummy.html');
+            },
+        }, done);
+    });
+
+    it('should rewrite links in dynamically injected <a> tags', function (done) {
+        runWombatTest({
+            initScript: function () {
+                wbinfo = {
+                    wombat_opts: {},
+                    prefix: window.location.origin,
+                    wombat_ts: '',
+                };
+            },
+            wombatScript: wombatScript,
+            html: '<a href="foobar.html" id="link">A link</a>',
+            testScript: function () {
+                var link = document.getElementById('link');
+                assert.equal(link.href, 'http:///foobar.html');
+            },
+        }, done);
+    });
+});
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..a24da2a1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "pywb",
+  "version": "1.0.0",
+  "description": "Web archival replay tools",
+  "main": "index.js",
+  "directories": {
+    "doc": "doc",
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ikreymer/pywb.git"
+  },
+  "author": "",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/ikreymer/pywb/issues"
+  },
+  "homepage": "https://github.com/ikreymer/pywb#readme",
+  "devDependencies": {
+    "chai": "^3.4.1",
+    "karma": "^0.13.15",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.2.1",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-html2js-preprocessor": "^0.1.0",
+    "karma-mocha": "^0.2.1",
+    "mocha": "^2.3.4"
+  }
+}

From a4d05d469f0c3986b900eba37228155065567955 Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Wed, 25 Nov 2015 12:18:56 +0000
Subject: [PATCH 2/4] Add configuration for running client tests using Sauce
 Labs

This gives us the capability to test the client-side JS
rewriting against a suite of different browsers on different
platforms.

Note that getting Karma running on Travis CI requires some
additional configuration documented at
github.com/karma-runner/karma-sauce-launcher/issues/73
which is not made clear in the original documentation.

In order to run the Karma tests, the Sauce Labs username
and access keys need to be passed in via the SAUCE_USERNAME
and SAUCE_ACCESS_KEYS env vars.
---
 .travis.yml                |  2 +-
 karma-tests/karma.conf.js  | 84 ++++++++++++++++++++++++--------------
 karma-tests/wombat.spec.js |  3 ++
 package.json               |  1 +
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index ac5cef39..728e6689 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,7 +6,7 @@ python:
 
 os:
   - linux
-#  - osx
+
 
 sudo: false
 
diff --git a/karma-tests/karma.conf.js b/karma-tests/karma.conf.js
index 61127d7d..b40190f2 100644
--- a/karma-tests/karma.conf.js
+++ b/karma-tests/karma.conf.js
@@ -1,18 +1,56 @@
+if (!process.env['SAUCE_USERNAME'] || !process.env['SAUCE_ACCESS_KEY']) {
+    console.error('Sauce Labs account details not set, skipping Karma tests');
+    process.exit(0);
+}
+
+var sauceLabsConfig = {
+    testName: 'PyWB Client Tests',
+};
+
+// see https://github.com/karma-runner/karma-sauce-launcher/issues/73
+if (process.env.TRAVIS_JOB_NUMBER) {
+    sauceLabsConfig.startConnect = false;
+    sauceLabsConfig.tunnelIdentifier = process.env.TRAVIS_JOB_NUMBER;
+}
+
 var WOMBAT_JS_PATH = 'pywb/static/wombat.js';
 
+var customLaunchers = {
+    sl_chrome: {
+        base: 'SauceLabs',
+        browserName: 'chrome',
+    },
+
+    sl_firefox: {
+        base: 'SauceLabs',
+        browserName: 'firefox',
+    },
+
+/*  Safari and Edge are currently broken in
+    pywb.
+
+    See: https://github.com/ikreymer/pywb/issues/148 (Edge)
+         https://github.com/ikreymer/pywb/issues/147 (Safari)
+
+    sl_safari: {
+        base: 'SauceLabs',
+        browserName: 'safari',
+        platform: 'OS X 10.11',
+        version: '9.0',
+    },
+    sl_edge: {
+        base: 'SauceLabs',
+        browserName: 'MicrosoftEdge',
+    },
+*/
+};
+
 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', 'chai'],
 
-
-    // list of files / patterns to load in the browser
     files: [
       {
         pattern: WOMBAT_JS_PATH,
@@ -23,46 +61,30 @@ module.exports = function(config) {
       'karma-tests/*.spec.js',
     ],
 
-
-    // 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: ['progress'],
 
-
-    // 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 whenever any file changes
     autoWatch: true,
 
+    sauceLabs: sauceLabsConfig,
 
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
+    // use an extended timeout for capturing Sauce Labs
+    // browsers in case the service is busy
+    captureTimeout: 3 * 60000,
 
+    customLaunchers: customLaunchers,
+
+    browsers: Object.keys(customLaunchers),
 
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
     singleRun: false,
 
-    // Concurrency level
-    // how many browser should be started simultanous
     concurrency: Infinity
   })
-}
+};
diff --git a/karma-tests/wombat.spec.js b/karma-tests/wombat.spec.js
index a1b681af..7012da83 100644
--- a/karma-tests/wombat.spec.js
+++ b/karma-tests/wombat.spec.js
@@ -1,4 +1,5 @@
 var WOMBAT_SRC = '../pywb/static/wombat.js';
+var DEFAULT_TIMEOUT = 20000;
 
 // creates a new document in an <iframe> and runs
 // a WombatJS test case in it.
@@ -80,6 +81,8 @@ function runWombatTest(testCase, done) {
 }
 
 describe('WombatJS', function () {
+    this.timeout(DEFAULT_TIMEOUT);
+
     var wombatScript;
 
     before(function (done) {
diff --git a/package.json b/package.json
index a24da2a1..241a71ba 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "karma-firefox-launcher": "^0.1.7",
     "karma-html2js-preprocessor": "^0.1.0",
     "karma-mocha": "^0.2.1",
+    "karma-sauce-launcher": "^0.3.0",
     "mocha": "^2.3.4"
   }
 }

From 011487604e47fa664c67865f67ccba8c5626204d Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Wed, 25 Nov 2015 14:32:52 +0000
Subject: [PATCH 3/4] Add editorconfig file that documents JS conventions in
 this repo

Existing JS files in this repo use Python-esque spacing
and naming conventions (4 spaces, snake_cased) rather than
JS conventions (2 spaces, camelCased).
---
 .editorconfig | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..20fd7a19
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,3 @@
+[*.js]
+indent_style=space
+indent_size=4

From c38ca5cdd4ed1803ab30c141ffeea04c8fd37d94 Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Wed, 25 Nov 2015 12:49:59 +0000
Subject: [PATCH 4/4] Add Python and node_module caching

Speed up Travis CI rebuilds by caching pip
and npm dependencies.
---
 .travis.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 728e6689..5ce965b5 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,6 +7,10 @@ python:
 os:
   - linux
 
+cache:
+  directories:
+    - $HOME/.cache/pip
+    - node_modules
 
 sudo: false