From 05e963d1e2acc8b43c1ec5d00bd8b3190f6e2725 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 12 Apr 2016 17:17:08 +0100
Subject: [PATCH 01/18] make the UI fadable to help with decluttering

---
 src/components/structures/LeftPanel.js                   | 4 ++--
 src/components/structures/RightPanel.js                  | 4 ++--
 src/skins/vector/css/common.css                          | 9 +++++++++
 .../vector/css/matrix-react-sdk/structures/RoomView.css  | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 0e13f39e4..5c27abc58 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -89,7 +89,7 @@ var LeftPanel = React.createClass({
         var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
 
         var collapseButton;
-        var classes = "mx_LeftPanel";
+        var classes = "mx_LeftPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
@@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 { collapseButton }
                 { callPreview }
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 6c8c09f1b..eab75fe3e 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -158,13 +158,13 @@ module.exports = React.createClass({
 
         }
 
-        var classes = "mx_RightPanel";
+        var classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index c18d05e04..f179a20f6 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -ms-transition: opacity 0.2s ease-in-out;
+    -o-transition: opacity 0.2s ease-in-out;
+}
+
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
    Stop the scrollbar view from pushing out the container's overall sizing, which causes
    flexbox to adapt to the new size and cause the view to keep growing.
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index caaeb43a6..4c014461d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ccc;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;

From b18fcf7f9e1702bd0071acbdeebd6a0fe22cf1a8 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 12 Apr 2016 18:02:03 +0100
Subject: [PATCH 02/18] spinner on saving room settings

---
 .../css/matrix-react-sdk/views/rooms/RoomHeader.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
index a1ad4cde8..eeb45b4d2 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
@@ -53,6 +53,19 @@ limitations under the License.
     flex: 1;
 }
 
+.mx_RoomHeader_spinner {
+    height: 36px;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
 .mx_RoomHeader_textButton {
     height: 36px;
     background-color: #76cfa6;

From b5248c06a72b8c69a6554122d80655712d187cdb Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 13 Apr 2016 00:34:20 +0100
Subject: [PATCH 03/18] fix https://github.com/vector-im/vector-web/issues/987
 for once and for all

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
index 5316663d4..6c0218b53 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@@ -166,6 +166,7 @@ limitations under the License.
     display: block;
     visibility: hidden;
     text-align: right;
+    white-space: nowrap;
 }
 
 .mx_EventTile_last .mx_MessageTimestamp {

From 429d110212d98b59d02b8b5f3a149f3e2dac170b Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 10:15:04 +0100
Subject: [PATCH 04/18] Run some tests under karma

Including a regression test for
https://github.com/vector-im/vector-web/issues/1314
---
 .gitignore                |  17 +--
 jenkins.sh                |   3 +
 karma.conf.js             | 134 ++++++++++++++++++++++
 package.json              |  20 +++-
 test/all-tests.js         |   7 ++
 test/app-tests/joining.js | 165 +++++++++++++++++++++++++++
 test/mock-request.js      | 228 ++++++++++++++++++++++++++++++++++++++
 test/skin-sdk.js          |   8 ++
 test/test-utils.js        |  24 ++++
 9 files changed, 595 insertions(+), 11 deletions(-)
 create mode 100644 karma.conf.js
 create mode 100644 test/all-tests.js
 create mode 100644 test/app-tests/joining.js
 create mode 100644 test/mock-request.js
 create mode 100644 test/skin-sdk.js
 create mode 100644 test/test-utils.js

diff --git a/.gitignore b/.gitignore
index 2bc43f864..df91879d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
-node_modules
-vector/bundle.*
-lib
-.DS_Store
-key.pem
-cert.pem
-vector/components.css
-packages/
+/cert.pem
+/.DS_Store
+/karma-reports
+/key.pem
+/lib
+/node_modules
+/packages/
+/vector/bundle.*
+/vector/components.css
diff --git a/jenkins.sh b/jenkins.sh
index 634703eb2..4e4b7fbbe 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,6 +13,9 @@ npm install
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 
+# run the mocha tests
+npm run test
+
 # build our artifacts; dumps them in ./vector
 npm run build
 
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 000000000..d2bc92558
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,134 @@
+// karma.conf.js - the config file for karma, which runs our tests.
+
+var path = require('path');
+var fs = require('fs');
+var webpack = require('webpack');
+
+/*
+ * We use webpack to build our tests. It's a pain to have to wait for webpack
+ * to build everything; however it's the easiest way to load our dependencies
+ * from node_modules.
+ *
+ * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
+ * the tests for changes, and webpack will rebuild using a cache. This is much quicker
+ * than a clean rebuild.
+ */
+
+// the name of the test file. By default, a special file which runs all tests.
+var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
+
+process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
+process.env.Q_DEBUG = 1;
+
+module.exports = function (config) {
+    config.set({
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['mocha'],
+
+        // list of files / patterns to load in the browser
+        files: [
+            testFile,
+            {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
+        ],
+
+        // redirect img links to the karma server
+        proxies: {
+            "/img/": "/base/vector/img/",
+        },
+        
+        // preprocess matching files before serving them to the browser
+        // available preprocessors:
+        // https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'test/**/*.js': ['webpack', 'sourcemap']
+        },
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress', 'junit'],
+
+        // 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',
+            //'PhantomJS',
+        ],
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        // singleRun: false,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity,
+
+        junitReporter: {
+            outputDir: 'karma-reports',
+        },
+
+        webpack: {
+            module: {
+                loaders: [
+                    { test: /\.json$/, loader: "json" },
+                    {
+                        test: /\.js$/, loader: "babel",
+                        include: [path.resolve('./src'),
+                                  path.resolve('./test'),
+                                 ],
+                        query: {
+                            // we're using babel 5, for consistency with
+                            // the release build, which doesn't use the
+                            // presets.
+                            // presets: ['react', 'es2015'],
+                        },
+                    },
+                ],
+                noParse: [
+                    // don't parse the languages within highlight.js. They
+                    // cause stack overflows
+                    // (https://github.com/webpack/webpack/issues/1721), and
+                    // there is no need for webpack to parse them - they can
+                    // just be included as-is.
+                    /highlight\.js\/lib\/languages/,
+
+                    // also disable parsing for sinon, because it
+                    // tries to do voodoo with 'require' which upsets
+                    // webpack (https://github.com/webpack/webpack/issues/304)
+                    /sinon\/pkg\/sinon\.js$/,
+                ],
+            },
+            resolve: {
+                alias: {
+                    // alias any requires to the react module to the one in our path, otherwise
+                    // we tend to get the react source included twice when using npm link.
+                    react: path.resolve('./node_modules/react'),
+                    
+                    sinon: 'sinon/pkg/sinon.js',
+                },
+                root: [
+                    path.resolve('./src'),
+                    path.resolve('./test'),
+                ],
+            },
+            devtool: 'inline-source-map',
+        },
+    });
+};
diff --git a/package.json b/package.json
index 223672b8d..51bacdced 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,9 @@
     "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "prepublish": "npm run build:css && npm run build:compile",
+    "test": "karma start --single-run=true --browsers PhantomJS",
+    "test:multi": "karma start"
   },
   "dependencies": {
     "babel-polyfill": "^6.5.0",
@@ -41,7 +43,7 @@
     "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
-    "react": "^0.14.2",
+    "react": "^0.14.8",
     "react-dnd": "^2.0.2",
     "react-dnd-html5-backend": "^2.0.0",
     "react-dom": "^0.14.2",
@@ -54,11 +56,23 @@
     "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
     "css-raw-loader": "^0.1.1",
+    "expect": "^1.16.0",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-cli": "^0.1.2",
+    "karma-junit-reporter": "^0.4.1",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.7",
+    "react-addons-test-utils": "^0.14.8",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.13"
+    "webpack": "^1.12.14"
   }
 }
diff --git a/test/all-tests.js b/test/all-tests.js
new file mode 100644
index 000000000..ec3008208
--- /dev/null
+++ b/test/all-tests.js
@@ -0,0 +1,7 @@
+// all-tests.js
+//
+// Our master test file: uses the webpack require API to find our test files
+// and run them
+
+var context = require.context('./app-tests', true, /\.jsx?$/);
+context.keys().forEach(context);
diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
new file mode 100644
index 000000000..d25c35906
--- /dev/null
+++ b/test/app-tests/joining.js
@@ -0,0 +1,165 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* joining.js: tests for the various paths when joining a room */
+
+require('skin-sdk');
+
+var jssdk = require('matrix-js-sdk');
+
+var sdk = require('matrix-react-sdk');
+var peg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var MatrixChat = sdk.getComponent('structures.MatrixChat');
+var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
+var RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
+var RoomView = sdk.getComponent('structures.RoomView');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ReactTestUtils = require('react-addons-test-utils');
+var expect = require('expect');
+var q = require('q');
+
+var test_utils = require('../test-utils');
+var MockHttpBackend = require('../mock-request');
+
+var HS_URL='http://localhost';
+var IS_URL='http://localhost';
+var USER_ID='@me:localhost';
+var ACCESS_TOKEN='access_token';
+
+describe('joining a room', function () {
+    describe('over federation', function () {
+        var parentDiv;
+        var httpBackend;
+        var matrixChat;
+        
+        beforeEach(function() {
+            test_utils.beforeEach(this);
+            httpBackend = new MockHttpBackend();
+            jssdk.request(httpBackend.requestFn);
+            parentDiv = document.createElement('div');
+            document.body.appendChild(parentDiv);
+        });
+
+        afterEach(function() {
+            if (parentDiv) {
+                ReactDOM.unmountComponentAtNode(parentDiv);
+                document.body.removeChild(parentDiv);
+                parentDiv = null;
+            }
+            httpBackend.verifyNoOutstandingRequests();
+        });
+        
+        it('should not get stuck at a spinner', function(done) {
+            var ROOM_ALIAS = '#alias:localhost';
+            var ROOM_ID = '!id:localhost';
+            
+            httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
+                .respond(200, {});
+            if (test_utils.browserSupportsWebRTC()) {
+                httpBackend.when('GET', '/voip/turnServer').respond(200, {});
+            }
+            httpBackend.when('GET', '/pushrules').respond(200, {});
+            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
+            httpBackend.when('GET', '/sync').respond(200, {});
+            httpBackend.when('GET', '/publicRooms').respond(200, {chunk: []});
+
+            // start with a logged-in client
+            peg.replaceUsingAccessToken(HS_URL, IS_URL, USER_ID, ACCESS_TOKEN);
+            
+            var mc = <MatrixChat config={{}}/>;
+            matrixChat = ReactDOM.render(mc, parentDiv);
+
+            // switch to the Directory
+            dis.dispatch({
+                action: 'view_room_directory',
+            });
+
+            var roomView;
+            httpBackend.flush().then(() => {
+                var roomDir = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomDirectory);
+
+                // enter an alias in the input, and simulate enter
+                var input = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    roomDir, 'input');
+                input.value = ROOM_ALIAS;
+                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
+
+                // that should create a roomview which will start a peek; wait
+                // for the peek.
+                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ALIAS)+"/initialSync")
+                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // we should now have a roomview, with a preview bar
+                roomView = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomView);
+
+                var previewBar = ReactTestUtils.findRenderedComponentWithType(
+                    roomView, RoomPreviewBar);
+
+                var joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    previewBar, 'a');
+
+                ReactTestUtils.Simulate.click(joinLink);
+
+                // that will fire off a request to check our displayname, followed by a
+                // join request
+                httpBackend.when('GET', '/profile/'+encodeURIComponent(USER_ID))
+                    .respond(200, {displayname: 'boris'});
+                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
+                    .respond(200, {room_id: ROOM_ID});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // the roomview should now be loading
+                expect(roomView.state.room).toBe(null);
+                expect(roomView.state.joining).toBe(true);
+
+                // there should be a spinner
+                ReactTestUtils.findRenderedDOMComponentWithClass(
+                    roomView, "mx_Spinner");
+
+                // now send the room down the /sync pipe
+                httpBackend.when('GET', '/sync').
+                    respond(200, {
+                        rooms: {
+                            join: {
+                                [ROOM_ID]: {
+                                    state: {},
+                                    timeline: {
+                                        events: [],
+                                        limited: true,
+                                    },
+                                },
+                            },
+                        },
+                    });
+                return httpBackend.flush();
+            }).then(() => {
+                // now the room should have loaded
+                expect(roomView.state.room).toExist();
+                expect(roomView.state.joining).toBe(false);
+            }).done(done, done);
+        });
+    });
+});
diff --git a/test/mock-request.js b/test/mock-request.js
new file mode 100644
index 000000000..8510ad545
--- /dev/null
+++ b/test/mock-request.js
@@ -0,0 +1,228 @@
+"use strict";
+var q = require("q");
+var expect = require('expect');
+
+/**
+ * Construct a mock HTTP backend, heavily inspired by Angular.js.
+ * @constructor
+ */
+function HttpBackend() {
+    this.requests = [];
+    this.expectedRequests = [];
+    var self = this;
+    // the request function dependency that the SDK needs.
+    this.requestFn = function(opts, callback) {
+        var realReq = new Request(opts.method, opts.uri, opts.body, opts.qs);
+        realReq.callback = callback;
+        console.log("HTTP backend received request: %s %s", opts.method, opts.uri);
+        self.requests.push(realReq);
+
+        var abort = function() {
+            var idx = self.requests.indexOf(realReq);
+            if (idx >= 0) {
+                console.log("Aborting HTTP request: %s %s", opts.method, opts.uri);
+                self.requests.splice(idx, 1);
+            }
+        }
+        return {
+            abort: abort
+        };
+    };
+}
+HttpBackend.prototype = {
+    /**
+     * Respond to all of the requests (flush the queue).
+     * @param {string} path The path to flush (optional) default: all.
+     * @param {integer} numToFlush The number of things to flush (optional), default: all.
+     * @return {Promise} resolved when there is nothing left to flush.
+     */
+    flush: function(path, numToFlush) {
+        var defer = q.defer();
+        var self = this;
+        var flushed = 0;
+        var triedWaiting = false;
+        console.log(
+            "HTTP backend flushing... (path=%s  numToFlush=%s)", path, numToFlush
+        );
+        var tryFlush = function() {
+            // if there's more real requests and more expected requests, flush 'em.
+            console.log(
+                "  trying to flush queue => reqs=%s expected=%s [%s]",
+                self.requests.length, self.expectedRequests.length, path
+            );
+            if (self._takeFromQueue(path)) {
+                // try again on the next tick.
+                console.log("  flushed. Trying for more. [%s]", path);
+                flushed += 1;
+                if (numToFlush && flushed === numToFlush) {
+                    console.log("  [%s] Flushed assigned amount: %s", path, numToFlush);
+                    defer.resolve();
+                }
+                else {
+                    setTimeout(tryFlush, 0);
+                }
+            }
+            else if (flushed === 0 && !triedWaiting) {
+                // we may not have made the request yet, wait a generous amount of
+                // time before giving up.
+                setTimeout(tryFlush, 5);
+                triedWaiting = true;
+            }
+            else {
+                console.log("  no more flushes. [%s]", path);
+                defer.resolve();
+            }
+        };
+
+        setTimeout(tryFlush, 0);
+
+        return defer.promise;
+    },
+
+    /**
+     * Attempts to resolve requests/expected requests.
+     * @param {string} path The path to flush (optional) default: all.
+     * @return {boolean} true if something was resolved.
+     */
+    _takeFromQueue: function(path) {
+        var req = null;
+        var i, j;
+        var matchingReq, expectedReq, testResponse = null;
+        for (i = 0; i < this.requests.length; i++) {
+            req = this.requests[i];
+            for (j = 0; j < this.expectedRequests.length; j++) {
+                expectedReq = this.expectedRequests[j];
+                if (path && path !== expectedReq.path) { continue; }
+                if (expectedReq.method === req.method &&
+                        req.path.indexOf(expectedReq.path) !== -1) {
+                    if (!expectedReq.data || (JSON.stringify(expectedReq.data) ===
+                            JSON.stringify(req.data))) {
+                        matchingReq = expectedReq;
+                        this.expectedRequests.splice(j, 1);
+                        break;
+                    }
+                }
+            }
+
+            if (matchingReq) {
+                // remove from request queue
+                this.requests.splice(i, 1);
+                i--;
+
+                for (j = 0; j < matchingReq.checks.length; j++) {
+                    matchingReq.checks[j](req);
+                }
+                testResponse = matchingReq.response;
+                console.log("    responding to %s", matchingReq.path);
+                var body = testResponse.body;
+                if (Object.prototype.toString.call(body) == "[object Function]") {
+                    body = body(req.path, req.data);
+                }
+                req.callback(
+                    testResponse.err, testResponse.response, body
+                );
+                matchingReq = null;
+            }
+        }
+        if (testResponse) {  // flushed something
+            return true;
+        }
+        return false;
+    },
+
+    /**
+     * Makes sure that the SDK hasn't sent any more requests to the backend.
+     */
+    verifyNoOutstandingRequests: function() {
+        var firstOutstandingReq = this.requests[0] || {};
+        expect(this.requests.length).toEqual(0,
+            "Expected no more HTTP requests but received request to " +
+            firstOutstandingReq.path
+        );
+    },
+
+    /**
+     * Makes sure that the test doesn't have any unresolved requests.
+     */
+    verifyNoOutstandingExpectation: function() {
+        var firstOutstandingExpectation = this.expectedRequests[0] || {};
+        expect(this.expectedRequests.length).toEqual(
+            0,
+            "Expected to see HTTP request for "
+                + firstOutstandingExpectation.method
+                + " " + firstOutstandingExpectation.path
+        );
+    },
+
+    /**
+     * Create an expected request.
+     * @param {string} method The HTTP method
+     * @param {string} path The path (which can be partial)
+     * @param {Object} data The expected data.
+     * @return {Request} An expected request.
+     */
+    when: function(method, path, data) {
+        var pendingReq = new Request(method, path, data);
+        this.expectedRequests.push(pendingReq);
+        return pendingReq;
+    }
+};
+
+function Request(method, path, data, queryParams) {
+    this.method = method;
+    this.path = path;
+    this.data = data;
+    this.queryParams = queryParams;
+    this.callback = null;
+    this.response = null;
+    this.checks = [];
+}
+Request.prototype = {
+    /**
+     * Execute a check when this request has been satisfied.
+     * @param {Function} fn The function to execute.
+     * @return {Request} for chaining calls.
+     */
+    check: function(fn) {
+        this.checks.push(fn);
+        return this;
+    },
+
+    /**
+     * Respond with the given data when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Object|Function} data The HTTP JSON body. If this is a function,
+     * it will be invoked when the JSON body is required (which should be returned).
+     */
+    respond: function(code, data) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: data,
+            err: null
+        };
+    },
+
+    /**
+     * Fail with an Error when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Error} err The error to throw (e.g. Network Error)
+     */
+    fail: function(code, err) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: null,
+            err: err
+        };
+    },
+};
+
+/**
+ * The HttpBackend class.
+ */
+module.exports = HttpBackend;
diff --git a/test/skin-sdk.js b/test/skin-sdk.js
new file mode 100644
index 000000000..a5a7233c3
--- /dev/null
+++ b/test/skin-sdk.js
@@ -0,0 +1,8 @@
+/*
+ * skin-sdk.js
+ *
+ * Skins the react-sdk with the vector components
+ */
+
+var sdk = require('matrix-react-sdk');
+sdk.loadSkin(require('component-index'));
diff --git a/test/test-utils.js b/test/test-utils.js
new file mode 100644
index 000000000..ad58b8059
--- /dev/null
+++ b/test/test-utils.js
@@ -0,0 +1,24 @@
+"use strict";
+
+var q = require('q');
+
+/**
+ * Perform common actions before each test case, e.g. printing the test case
+ * name to stdout.
+ * @param {Mocha.Context} context  The test context
+ */
+module.exports.beforeEach = function(context) {
+    var desc = context.currentTest.fullTitle();
+    console.log();
+    console.log(desc);
+    console.log(new Array(1 + desc.length).join("="));
+};
+
+/**
+ * returns true if the current environment supports webrtc
+ */
+module.exports.browserSupportsWebRTC = function() {
+    var n = global.window.navigator;
+    return n.getUserMedia || n.webkitGetUserMedia ||
+        n.mozGetUserMedia;
+};

From a512e600a7e43d99fd83b64cf41aaf0d88194b8f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 11:16:38 +0100
Subject: [PATCH 05/18] tests: Don't add the div to the DOM

---
 test/app-tests/joining.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
index d25c35906..0f6cf91b8 100644
--- a/test/app-tests/joining.js
+++ b/test/app-tests/joining.js
@@ -53,13 +53,16 @@ describe('joining a room', function () {
             httpBackend = new MockHttpBackend();
             jssdk.request(httpBackend.requestFn);
             parentDiv = document.createElement('div');
-            document.body.appendChild(parentDiv);
+
+            // uncomment this to actually add the div to the UI, to help with
+            // debugging (but slow things down)
+            // document.body.appendChild(parentDiv);
         });
 
         afterEach(function() {
             if (parentDiv) {
                 ReactDOM.unmountComponentAtNode(parentDiv);
-                document.body.removeChild(parentDiv);
+                parentDiv.remove();
                 parentDiv = null;
             }
             httpBackend.verifyNoOutstandingRequests();

From 5794c30def9c5c47ce31b714eb23409571416ba4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 13 Apr 2016 11:35:53 +0100
Subject: [PATCH 06/18] Devices should be below 'advanced'

---
 src/components/views/settings/Notifications.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 749bc9ae7..6831d7888 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -1046,12 +1046,11 @@ module.exports = React.createClass({
                         </table>
                     </div>
 
-                    <h3>Devices</h3>
-
-                    { devicesSection }
-
                     { advancedSettings }
 
+                    <h3>Devices</h3>
+                    { devicesSection }
+
                 </div>
 
             </div>

From 50f94eb0402da92f8d6051ea53e4ee2d63a9663a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 13 Apr 2016 13:33:16 +0100
Subject: [PATCH 07/18] stop guests rom trying to blunder into non-guest rooms

---
 src/components/structures/RoomDirectory.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index 5c6042c24..f3614092b 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -79,6 +79,17 @@ module.exports = React.createClass({
         }
         var oob_data = {};
         if (room) {
+            if (MatrixClientPeg.get().isGuest()) {
+                if (!room.world_readable && !room.guest_can_join) {
+                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+                    Modal.createDialog(NeedToRegisterDialog, {
+                        title: "Failed to join the room",
+                        description: "This room is inaccessible to guests. You may be able to join if you register."
+                    });
+                    return;
+                }
+            }
+
             oob_data = {
                 avatarUrl: room.avatar_url,
                 // XXX: This logic is duplicated from the JS SDK which

From 69ce3c43cf71243c7e115834bbd3d7fe0ce7d787 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 17:17:45 +0100
Subject: [PATCH 08/18] Revert "Merge branch 'develop' into rav/karma"

The karma tests don't pass yet, and aren't ready to land on develop.

This reverts commit 438453e61af74d38c7de57ac2d63317ed1f4a1ed, reversing
changes made to 50f94eb0402da92f8d6051ea53e4ee2d63a9663a.
---
 .gitignore                |  17 ++-
 jenkins.sh                |   3 -
 karma.conf.js             | 134 ----------------------
 package.json              |  20 +---
 test/all-tests.js         |   7 --
 test/app-tests/joining.js | 168 ----------------------------
 test/mock-request.js      | 228 --------------------------------------
 test/skin-sdk.js          |   8 --
 test/test-utils.js        |  24 ----
 9 files changed, 11 insertions(+), 598 deletions(-)
 delete mode 100644 karma.conf.js
 delete mode 100644 test/all-tests.js
 delete mode 100644 test/app-tests/joining.js
 delete mode 100644 test/mock-request.js
 delete mode 100644 test/skin-sdk.js
 delete mode 100644 test/test-utils.js

diff --git a/.gitignore b/.gitignore
index df91879d0..2bc43f864 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,8 @@
-/cert.pem
-/.DS_Store
-/karma-reports
-/key.pem
-/lib
-/node_modules
-/packages/
-/vector/bundle.*
-/vector/components.css
+node_modules
+vector/bundle.*
+lib
+.DS_Store
+key.pem
+cert.pem
+vector/components.css
+packages/
diff --git a/jenkins.sh b/jenkins.sh
index 4e4b7fbbe..634703eb2 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,9 +13,6 @@ npm install
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 
-# run the mocha tests
-npm run test
-
 # build our artifacts; dumps them in ./vector
 npm run build
 
diff --git a/karma.conf.js b/karma.conf.js
deleted file mode 100644
index d2bc92558..000000000
--- a/karma.conf.js
+++ /dev/null
@@ -1,134 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var fs = require('fs');
-var webpack = require('webpack');
-
-/*
- * We use webpack to build our tests. It's a pain to have to wait for webpack
- * to build everything; however it's the easiest way to load our dependencies
- * from node_modules.
- *
- * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
- * the tests for changes, and webpack will rebuild using a cache. This is much quicker
- * than a clean rebuild.
- */
-
-// the name of the test file. By default, a special file which runs all tests.
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-process.env.Q_DEBUG = 1;
-
-module.exports = function (config) {
-    config.set({
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            testFile,
-            {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
-        ],
-
-        // redirect img links to the karma server
-        proxies: {
-            "/img/": "/base/vector/img/",
-        },
-        
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'test/**/*.js': ['webpack', 'sourcemap']
-        },
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress', 'junit'],
-
-        // 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',
-            //'PhantomJS',
-        ],
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        // singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity,
-
-        junitReporter: {
-            outputDir: 'karma-reports',
-        },
-
-        webpack: {
-            module: {
-                loaders: [
-                    { test: /\.json$/, loader: "json" },
-                    {
-                        test: /\.js$/, loader: "babel",
-                        include: [path.resolve('./src'),
-                                  path.resolve('./test'),
-                                 ],
-                        query: {
-                            // we're using babel 5, for consistency with
-                            // the release build, which doesn't use the
-                            // presets.
-                            // presets: ['react', 'es2015'],
-                        },
-                    },
-                ],
-                noParse: [
-                    // don't parse the languages within highlight.js. They
-                    // cause stack overflows
-                    // (https://github.com/webpack/webpack/issues/1721), and
-                    // there is no need for webpack to parse them - they can
-                    // just be included as-is.
-                    /highlight\.js\/lib\/languages/,
-
-                    // also disable parsing for sinon, because it
-                    // tries to do voodoo with 'require' which upsets
-                    // webpack (https://github.com/webpack/webpack/issues/304)
-                    /sinon\/pkg\/sinon\.js$/,
-                ],
-            },
-            resolve: {
-                alias: {
-                    // alias any requires to the react module to the one in our path, otherwise
-                    // we tend to get the react source included twice when using npm link.
-                    react: path.resolve('./node_modules/react'),
-                    
-                    sinon: 'sinon/pkg/sinon.js',
-                },
-                root: [
-                    path.resolve('./src'),
-                    path.resolve('./test'),
-                ],
-            },
-            devtool: 'inline-source-map',
-        },
-    });
-};
diff --git a/package.json b/package.json
index 51bacdced..223672b8d 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,7 @@
     "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile",
-    "test": "karma start --single-run=true --browsers PhantomJS",
-    "test:multi": "karma start"
+    "prepublish": "npm run build:css && npm run build:compile"
   },
   "dependencies": {
     "babel-polyfill": "^6.5.0",
@@ -43,7 +41,7 @@
     "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
-    "react": "^0.14.8",
+    "react": "^0.14.2",
     "react-dnd": "^2.0.2",
     "react-dnd-html5-backend": "^2.0.0",
     "react-dom": "^0.14.2",
@@ -56,23 +54,11 @@
     "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
     "css-raw-loader": "^0.1.1",
-    "expect": "^1.16.0",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
-    "karma-junit-reporter": "^0.4.1",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.7",
-    "react-addons-test-utils": "^0.14.8",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.14"
+    "webpack": "^1.12.13"
   }
 }
diff --git a/test/all-tests.js b/test/all-tests.js
deleted file mode 100644
index ec3008208..000000000
--- a/test/all-tests.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// all-tests.js
-//
-// Our master test file: uses the webpack require API to find our test files
-// and run them
-
-var context = require.context('./app-tests', true, /\.jsx?$/);
-context.keys().forEach(context);
diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
deleted file mode 100644
index 0f6cf91b8..000000000
--- a/test/app-tests/joining.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/* joining.js: tests for the various paths when joining a room */
-
-require('skin-sdk');
-
-var jssdk = require('matrix-js-sdk');
-
-var sdk = require('matrix-react-sdk');
-var peg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var MatrixChat = sdk.getComponent('structures.MatrixChat');
-var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
-var RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
-var RoomView = sdk.getComponent('structures.RoomView');
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var ReactTestUtils = require('react-addons-test-utils');
-var expect = require('expect');
-var q = require('q');
-
-var test_utils = require('../test-utils');
-var MockHttpBackend = require('../mock-request');
-
-var HS_URL='http://localhost';
-var IS_URL='http://localhost';
-var USER_ID='@me:localhost';
-var ACCESS_TOKEN='access_token';
-
-describe('joining a room', function () {
-    describe('over federation', function () {
-        var parentDiv;
-        var httpBackend;
-        var matrixChat;
-        
-        beforeEach(function() {
-            test_utils.beforeEach(this);
-            httpBackend = new MockHttpBackend();
-            jssdk.request(httpBackend.requestFn);
-            parentDiv = document.createElement('div');
-
-            // uncomment this to actually add the div to the UI, to help with
-            // debugging (but slow things down)
-            // document.body.appendChild(parentDiv);
-        });
-
-        afterEach(function() {
-            if (parentDiv) {
-                ReactDOM.unmountComponentAtNode(parentDiv);
-                parentDiv.remove();
-                parentDiv = null;
-            }
-            httpBackend.verifyNoOutstandingRequests();
-        });
-        
-        it('should not get stuck at a spinner', function(done) {
-            var ROOM_ALIAS = '#alias:localhost';
-            var ROOM_ID = '!id:localhost';
-            
-            httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
-                .respond(200, {});
-            if (test_utils.browserSupportsWebRTC()) {
-                httpBackend.when('GET', '/voip/turnServer').respond(200, {});
-            }
-            httpBackend.when('GET', '/pushrules').respond(200, {});
-            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
-            httpBackend.when('GET', '/sync').respond(200, {});
-            httpBackend.when('GET', '/publicRooms').respond(200, {chunk: []});
-
-            // start with a logged-in client
-            peg.replaceUsingAccessToken(HS_URL, IS_URL, USER_ID, ACCESS_TOKEN);
-            
-            var mc = <MatrixChat config={{}}/>;
-            matrixChat = ReactDOM.render(mc, parentDiv);
-
-            // switch to the Directory
-            dis.dispatch({
-                action: 'view_room_directory',
-            });
-
-            var roomView;
-            httpBackend.flush().then(() => {
-                var roomDir = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomDirectory);
-
-                // enter an alias in the input, and simulate enter
-                var input = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    roomDir, 'input');
-                input.value = ROOM_ALIAS;
-                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
-
-                // that should create a roomview which will start a peek; wait
-                // for the peek.
-                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ALIAS)+"/initialSync")
-                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
-                return httpBackend.flush();
-            }).then(() => {
-                httpBackend.verifyNoOutstandingExpectation();
-
-                // we should now have a roomview, with a preview bar
-                roomView = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomView);
-
-                var previewBar = ReactTestUtils.findRenderedComponentWithType(
-                    roomView, RoomPreviewBar);
-
-                var joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    previewBar, 'a');
-
-                ReactTestUtils.Simulate.click(joinLink);
-
-                // that will fire off a request to check our displayname, followed by a
-                // join request
-                httpBackend.when('GET', '/profile/'+encodeURIComponent(USER_ID))
-                    .respond(200, {displayname: 'boris'});
-                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
-                    .respond(200, {room_id: ROOM_ID});
-                return httpBackend.flush();
-            }).then(() => {
-                httpBackend.verifyNoOutstandingExpectation();
-
-                // the roomview should now be loading
-                expect(roomView.state.room).toBe(null);
-                expect(roomView.state.joining).toBe(true);
-
-                // there should be a spinner
-                ReactTestUtils.findRenderedDOMComponentWithClass(
-                    roomView, "mx_Spinner");
-
-                // now send the room down the /sync pipe
-                httpBackend.when('GET', '/sync').
-                    respond(200, {
-                        rooms: {
-                            join: {
-                                [ROOM_ID]: {
-                                    state: {},
-                                    timeline: {
-                                        events: [],
-                                        limited: true,
-                                    },
-                                },
-                            },
-                        },
-                    });
-                return httpBackend.flush();
-            }).then(() => {
-                // now the room should have loaded
-                expect(roomView.state.room).toExist();
-                expect(roomView.state.joining).toBe(false);
-            }).done(done, done);
-        });
-    });
-});
diff --git a/test/mock-request.js b/test/mock-request.js
deleted file mode 100644
index 8510ad545..000000000
--- a/test/mock-request.js
+++ /dev/null
@@ -1,228 +0,0 @@
-"use strict";
-var q = require("q");
-var expect = require('expect');
-
-/**
- * Construct a mock HTTP backend, heavily inspired by Angular.js.
- * @constructor
- */
-function HttpBackend() {
-    this.requests = [];
-    this.expectedRequests = [];
-    var self = this;
-    // the request function dependency that the SDK needs.
-    this.requestFn = function(opts, callback) {
-        var realReq = new Request(opts.method, opts.uri, opts.body, opts.qs);
-        realReq.callback = callback;
-        console.log("HTTP backend received request: %s %s", opts.method, opts.uri);
-        self.requests.push(realReq);
-
-        var abort = function() {
-            var idx = self.requests.indexOf(realReq);
-            if (idx >= 0) {
-                console.log("Aborting HTTP request: %s %s", opts.method, opts.uri);
-                self.requests.splice(idx, 1);
-            }
-        }
-        return {
-            abort: abort
-        };
-    };
-}
-HttpBackend.prototype = {
-    /**
-     * Respond to all of the requests (flush the queue).
-     * @param {string} path The path to flush (optional) default: all.
-     * @param {integer} numToFlush The number of things to flush (optional), default: all.
-     * @return {Promise} resolved when there is nothing left to flush.
-     */
-    flush: function(path, numToFlush) {
-        var defer = q.defer();
-        var self = this;
-        var flushed = 0;
-        var triedWaiting = false;
-        console.log(
-            "HTTP backend flushing... (path=%s  numToFlush=%s)", path, numToFlush
-        );
-        var tryFlush = function() {
-            // if there's more real requests and more expected requests, flush 'em.
-            console.log(
-                "  trying to flush queue => reqs=%s expected=%s [%s]",
-                self.requests.length, self.expectedRequests.length, path
-            );
-            if (self._takeFromQueue(path)) {
-                // try again on the next tick.
-                console.log("  flushed. Trying for more. [%s]", path);
-                flushed += 1;
-                if (numToFlush && flushed === numToFlush) {
-                    console.log("  [%s] Flushed assigned amount: %s", path, numToFlush);
-                    defer.resolve();
-                }
-                else {
-                    setTimeout(tryFlush, 0);
-                }
-            }
-            else if (flushed === 0 && !triedWaiting) {
-                // we may not have made the request yet, wait a generous amount of
-                // time before giving up.
-                setTimeout(tryFlush, 5);
-                triedWaiting = true;
-            }
-            else {
-                console.log("  no more flushes. [%s]", path);
-                defer.resolve();
-            }
-        };
-
-        setTimeout(tryFlush, 0);
-
-        return defer.promise;
-    },
-
-    /**
-     * Attempts to resolve requests/expected requests.
-     * @param {string} path The path to flush (optional) default: all.
-     * @return {boolean} true if something was resolved.
-     */
-    _takeFromQueue: function(path) {
-        var req = null;
-        var i, j;
-        var matchingReq, expectedReq, testResponse = null;
-        for (i = 0; i < this.requests.length; i++) {
-            req = this.requests[i];
-            for (j = 0; j < this.expectedRequests.length; j++) {
-                expectedReq = this.expectedRequests[j];
-                if (path && path !== expectedReq.path) { continue; }
-                if (expectedReq.method === req.method &&
-                        req.path.indexOf(expectedReq.path) !== -1) {
-                    if (!expectedReq.data || (JSON.stringify(expectedReq.data) ===
-                            JSON.stringify(req.data))) {
-                        matchingReq = expectedReq;
-                        this.expectedRequests.splice(j, 1);
-                        break;
-                    }
-                }
-            }
-
-            if (matchingReq) {
-                // remove from request queue
-                this.requests.splice(i, 1);
-                i--;
-
-                for (j = 0; j < matchingReq.checks.length; j++) {
-                    matchingReq.checks[j](req);
-                }
-                testResponse = matchingReq.response;
-                console.log("    responding to %s", matchingReq.path);
-                var body = testResponse.body;
-                if (Object.prototype.toString.call(body) == "[object Function]") {
-                    body = body(req.path, req.data);
-                }
-                req.callback(
-                    testResponse.err, testResponse.response, body
-                );
-                matchingReq = null;
-            }
-        }
-        if (testResponse) {  // flushed something
-            return true;
-        }
-        return false;
-    },
-
-    /**
-     * Makes sure that the SDK hasn't sent any more requests to the backend.
-     */
-    verifyNoOutstandingRequests: function() {
-        var firstOutstandingReq = this.requests[0] || {};
-        expect(this.requests.length).toEqual(0,
-            "Expected no more HTTP requests but received request to " +
-            firstOutstandingReq.path
-        );
-    },
-
-    /**
-     * Makes sure that the test doesn't have any unresolved requests.
-     */
-    verifyNoOutstandingExpectation: function() {
-        var firstOutstandingExpectation = this.expectedRequests[0] || {};
-        expect(this.expectedRequests.length).toEqual(
-            0,
-            "Expected to see HTTP request for "
-                + firstOutstandingExpectation.method
-                + " " + firstOutstandingExpectation.path
-        );
-    },
-
-    /**
-     * Create an expected request.
-     * @param {string} method The HTTP method
-     * @param {string} path The path (which can be partial)
-     * @param {Object} data The expected data.
-     * @return {Request} An expected request.
-     */
-    when: function(method, path, data) {
-        var pendingReq = new Request(method, path, data);
-        this.expectedRequests.push(pendingReq);
-        return pendingReq;
-    }
-};
-
-function Request(method, path, data, queryParams) {
-    this.method = method;
-    this.path = path;
-    this.data = data;
-    this.queryParams = queryParams;
-    this.callback = null;
-    this.response = null;
-    this.checks = [];
-}
-Request.prototype = {
-    /**
-     * Execute a check when this request has been satisfied.
-     * @param {Function} fn The function to execute.
-     * @return {Request} for chaining calls.
-     */
-    check: function(fn) {
-        this.checks.push(fn);
-        return this;
-    },
-
-    /**
-     * Respond with the given data when this request is satisfied.
-     * @param {Number} code The HTTP status code.
-     * @param {Object|Function} data The HTTP JSON body. If this is a function,
-     * it will be invoked when the JSON body is required (which should be returned).
-     */
-    respond: function(code, data) {
-        this.response = {
-            response: {
-                statusCode: code,
-                headers: {}
-            },
-            body: data,
-            err: null
-        };
-    },
-
-    /**
-     * Fail with an Error when this request is satisfied.
-     * @param {Number} code The HTTP status code.
-     * @param {Error} err The error to throw (e.g. Network Error)
-     */
-    fail: function(code, err) {
-        this.response = {
-            response: {
-                statusCode: code,
-                headers: {}
-            },
-            body: null,
-            err: err
-        };
-    },
-};
-
-/**
- * The HttpBackend class.
- */
-module.exports = HttpBackend;
diff --git a/test/skin-sdk.js b/test/skin-sdk.js
deleted file mode 100644
index a5a7233c3..000000000
--- a/test/skin-sdk.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * skin-sdk.js
- *
- * Skins the react-sdk with the vector components
- */
-
-var sdk = require('matrix-react-sdk');
-sdk.loadSkin(require('component-index'));
diff --git a/test/test-utils.js b/test/test-utils.js
deleted file mode 100644
index ad58b8059..000000000
--- a/test/test-utils.js
+++ /dev/null
@@ -1,24 +0,0 @@
-"use strict";
-
-var q = require('q');
-
-/**
- * Perform common actions before each test case, e.g. printing the test case
- * name to stdout.
- * @param {Mocha.Context} context  The test context
- */
-module.exports.beforeEach = function(context) {
-    var desc = context.currentTest.fullTitle();
-    console.log();
-    console.log(desc);
-    console.log(new Array(1 + desc.length).join("="));
-};
-
-/**
- * returns true if the current environment supports webrtc
- */
-module.exports.browserSupportsWebRTC = function() {
-    var n = global.window.navigator;
-    return n.getUserMedia || n.webkitGetUserMedia ||
-        n.mozGetUserMedia;
-};

From 322af6513d57af8b30c566758c63bb17d4c562e6 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 10:15:04 +0100
Subject: [PATCH 09/18] Run some tests under karma

Including a regression test for
https://github.com/vector-im/vector-web/issues/1314
---
 .gitignore                |  17 +--
 jenkins.sh                |   3 +
 karma.conf.js             | 134 ++++++++++++++++++++++
 package.json              |  20 +++-
 test/all-tests.js         |   7 ++
 test/app-tests/joining.js | 165 +++++++++++++++++++++++++++
 test/mock-request.js      | 228 ++++++++++++++++++++++++++++++++++++++
 test/skin-sdk.js          |   8 ++
 test/test-utils.js        |  24 ++++
 9 files changed, 595 insertions(+), 11 deletions(-)
 create mode 100644 karma.conf.js
 create mode 100644 test/all-tests.js
 create mode 100644 test/app-tests/joining.js
 create mode 100644 test/mock-request.js
 create mode 100644 test/skin-sdk.js
 create mode 100644 test/test-utils.js

diff --git a/.gitignore b/.gitignore
index 2bc43f864..df91879d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
-node_modules
-vector/bundle.*
-lib
-.DS_Store
-key.pem
-cert.pem
-vector/components.css
-packages/
+/cert.pem
+/.DS_Store
+/karma-reports
+/key.pem
+/lib
+/node_modules
+/packages/
+/vector/bundle.*
+/vector/components.css
diff --git a/jenkins.sh b/jenkins.sh
index 634703eb2..4e4b7fbbe 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -13,6 +13,9 @@ npm install
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 
+# run the mocha tests
+npm run test
+
 # build our artifacts; dumps them in ./vector
 npm run build
 
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 000000000..d2bc92558
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,134 @@
+// karma.conf.js - the config file for karma, which runs our tests.
+
+var path = require('path');
+var fs = require('fs');
+var webpack = require('webpack');
+
+/*
+ * We use webpack to build our tests. It's a pain to have to wait for webpack
+ * to build everything; however it's the easiest way to load our dependencies
+ * from node_modules.
+ *
+ * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
+ * the tests for changes, and webpack will rebuild using a cache. This is much quicker
+ * than a clean rebuild.
+ */
+
+// the name of the test file. By default, a special file which runs all tests.
+var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
+
+process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
+process.env.Q_DEBUG = 1;
+
+module.exports = function (config) {
+    config.set({
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['mocha'],
+
+        // list of files / patterns to load in the browser
+        files: [
+            testFile,
+            {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
+        ],
+
+        // redirect img links to the karma server
+        proxies: {
+            "/img/": "/base/vector/img/",
+        },
+        
+        // preprocess matching files before serving them to the browser
+        // available preprocessors:
+        // https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'test/**/*.js': ['webpack', 'sourcemap']
+        },
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress', 'junit'],
+
+        // 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',
+            //'PhantomJS',
+        ],
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        // singleRun: false,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity,
+
+        junitReporter: {
+            outputDir: 'karma-reports',
+        },
+
+        webpack: {
+            module: {
+                loaders: [
+                    { test: /\.json$/, loader: "json" },
+                    {
+                        test: /\.js$/, loader: "babel",
+                        include: [path.resolve('./src'),
+                                  path.resolve('./test'),
+                                 ],
+                        query: {
+                            // we're using babel 5, for consistency with
+                            // the release build, which doesn't use the
+                            // presets.
+                            // presets: ['react', 'es2015'],
+                        },
+                    },
+                ],
+                noParse: [
+                    // don't parse the languages within highlight.js. They
+                    // cause stack overflows
+                    // (https://github.com/webpack/webpack/issues/1721), and
+                    // there is no need for webpack to parse them - they can
+                    // just be included as-is.
+                    /highlight\.js\/lib\/languages/,
+
+                    // also disable parsing for sinon, because it
+                    // tries to do voodoo with 'require' which upsets
+                    // webpack (https://github.com/webpack/webpack/issues/304)
+                    /sinon\/pkg\/sinon\.js$/,
+                ],
+            },
+            resolve: {
+                alias: {
+                    // alias any requires to the react module to the one in our path, otherwise
+                    // we tend to get the react source included twice when using npm link.
+                    react: path.resolve('./node_modules/react'),
+                    
+                    sinon: 'sinon/pkg/sinon.js',
+                },
+                root: [
+                    path.resolve('./src'),
+                    path.resolve('./test'),
+                ],
+            },
+            devtool: 'inline-source-map',
+        },
+    });
+};
diff --git a/package.json b/package.json
index 223672b8d..51bacdced 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,9 @@
     "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "prepublish": "npm run build:css && npm run build:compile",
+    "test": "karma start --single-run=true --browsers PhantomJS",
+    "test:multi": "karma start"
   },
   "dependencies": {
     "babel-polyfill": "^6.5.0",
@@ -41,7 +43,7 @@
     "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
-    "react": "^0.14.2",
+    "react": "^0.14.8",
     "react-dnd": "^2.0.2",
     "react-dnd-html5-backend": "^2.0.0",
     "react-dom": "^0.14.2",
@@ -54,11 +56,23 @@
     "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
     "css-raw-loader": "^0.1.1",
+    "expect": "^1.16.0",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-cli": "^0.1.2",
+    "karma-junit-reporter": "^0.4.1",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.7",
+    "react-addons-test-utils": "^0.14.8",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.13"
+    "webpack": "^1.12.14"
   }
 }
diff --git a/test/all-tests.js b/test/all-tests.js
new file mode 100644
index 000000000..ec3008208
--- /dev/null
+++ b/test/all-tests.js
@@ -0,0 +1,7 @@
+// all-tests.js
+//
+// Our master test file: uses the webpack require API to find our test files
+// and run them
+
+var context = require.context('./app-tests', true, /\.jsx?$/);
+context.keys().forEach(context);
diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
new file mode 100644
index 000000000..d25c35906
--- /dev/null
+++ b/test/app-tests/joining.js
@@ -0,0 +1,165 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* joining.js: tests for the various paths when joining a room */
+
+require('skin-sdk');
+
+var jssdk = require('matrix-js-sdk');
+
+var sdk = require('matrix-react-sdk');
+var peg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var MatrixChat = sdk.getComponent('structures.MatrixChat');
+var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
+var RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
+var RoomView = sdk.getComponent('structures.RoomView');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ReactTestUtils = require('react-addons-test-utils');
+var expect = require('expect');
+var q = require('q');
+
+var test_utils = require('../test-utils');
+var MockHttpBackend = require('../mock-request');
+
+var HS_URL='http://localhost';
+var IS_URL='http://localhost';
+var USER_ID='@me:localhost';
+var ACCESS_TOKEN='access_token';
+
+describe('joining a room', function () {
+    describe('over federation', function () {
+        var parentDiv;
+        var httpBackend;
+        var matrixChat;
+        
+        beforeEach(function() {
+            test_utils.beforeEach(this);
+            httpBackend = new MockHttpBackend();
+            jssdk.request(httpBackend.requestFn);
+            parentDiv = document.createElement('div');
+            document.body.appendChild(parentDiv);
+        });
+
+        afterEach(function() {
+            if (parentDiv) {
+                ReactDOM.unmountComponentAtNode(parentDiv);
+                document.body.removeChild(parentDiv);
+                parentDiv = null;
+            }
+            httpBackend.verifyNoOutstandingRequests();
+        });
+        
+        it('should not get stuck at a spinner', function(done) {
+            var ROOM_ALIAS = '#alias:localhost';
+            var ROOM_ID = '!id:localhost';
+            
+            httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
+                .respond(200, {});
+            if (test_utils.browserSupportsWebRTC()) {
+                httpBackend.when('GET', '/voip/turnServer').respond(200, {});
+            }
+            httpBackend.when('GET', '/pushrules').respond(200, {});
+            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
+            httpBackend.when('GET', '/sync').respond(200, {});
+            httpBackend.when('GET', '/publicRooms').respond(200, {chunk: []});
+
+            // start with a logged-in client
+            peg.replaceUsingAccessToken(HS_URL, IS_URL, USER_ID, ACCESS_TOKEN);
+            
+            var mc = <MatrixChat config={{}}/>;
+            matrixChat = ReactDOM.render(mc, parentDiv);
+
+            // switch to the Directory
+            dis.dispatch({
+                action: 'view_room_directory',
+            });
+
+            var roomView;
+            httpBackend.flush().then(() => {
+                var roomDir = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomDirectory);
+
+                // enter an alias in the input, and simulate enter
+                var input = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    roomDir, 'input');
+                input.value = ROOM_ALIAS;
+                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
+
+                // that should create a roomview which will start a peek; wait
+                // for the peek.
+                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ALIAS)+"/initialSync")
+                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // we should now have a roomview, with a preview bar
+                roomView = ReactTestUtils.findRenderedComponentWithType(
+                    matrixChat, RoomView);
+
+                var previewBar = ReactTestUtils.findRenderedComponentWithType(
+                    roomView, RoomPreviewBar);
+
+                var joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
+                    previewBar, 'a');
+
+                ReactTestUtils.Simulate.click(joinLink);
+
+                // that will fire off a request to check our displayname, followed by a
+                // join request
+                httpBackend.when('GET', '/profile/'+encodeURIComponent(USER_ID))
+                    .respond(200, {displayname: 'boris'});
+                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
+                    .respond(200, {room_id: ROOM_ID});
+                return httpBackend.flush();
+            }).then(() => {
+                httpBackend.verifyNoOutstandingExpectation();
+
+                // the roomview should now be loading
+                expect(roomView.state.room).toBe(null);
+                expect(roomView.state.joining).toBe(true);
+
+                // there should be a spinner
+                ReactTestUtils.findRenderedDOMComponentWithClass(
+                    roomView, "mx_Spinner");
+
+                // now send the room down the /sync pipe
+                httpBackend.when('GET', '/sync').
+                    respond(200, {
+                        rooms: {
+                            join: {
+                                [ROOM_ID]: {
+                                    state: {},
+                                    timeline: {
+                                        events: [],
+                                        limited: true,
+                                    },
+                                },
+                            },
+                        },
+                    });
+                return httpBackend.flush();
+            }).then(() => {
+                // now the room should have loaded
+                expect(roomView.state.room).toExist();
+                expect(roomView.state.joining).toBe(false);
+            }).done(done, done);
+        });
+    });
+});
diff --git a/test/mock-request.js b/test/mock-request.js
new file mode 100644
index 000000000..8510ad545
--- /dev/null
+++ b/test/mock-request.js
@@ -0,0 +1,228 @@
+"use strict";
+var q = require("q");
+var expect = require('expect');
+
+/**
+ * Construct a mock HTTP backend, heavily inspired by Angular.js.
+ * @constructor
+ */
+function HttpBackend() {
+    this.requests = [];
+    this.expectedRequests = [];
+    var self = this;
+    // the request function dependency that the SDK needs.
+    this.requestFn = function(opts, callback) {
+        var realReq = new Request(opts.method, opts.uri, opts.body, opts.qs);
+        realReq.callback = callback;
+        console.log("HTTP backend received request: %s %s", opts.method, opts.uri);
+        self.requests.push(realReq);
+
+        var abort = function() {
+            var idx = self.requests.indexOf(realReq);
+            if (idx >= 0) {
+                console.log("Aborting HTTP request: %s %s", opts.method, opts.uri);
+                self.requests.splice(idx, 1);
+            }
+        }
+        return {
+            abort: abort
+        };
+    };
+}
+HttpBackend.prototype = {
+    /**
+     * Respond to all of the requests (flush the queue).
+     * @param {string} path The path to flush (optional) default: all.
+     * @param {integer} numToFlush The number of things to flush (optional), default: all.
+     * @return {Promise} resolved when there is nothing left to flush.
+     */
+    flush: function(path, numToFlush) {
+        var defer = q.defer();
+        var self = this;
+        var flushed = 0;
+        var triedWaiting = false;
+        console.log(
+            "HTTP backend flushing... (path=%s  numToFlush=%s)", path, numToFlush
+        );
+        var tryFlush = function() {
+            // if there's more real requests and more expected requests, flush 'em.
+            console.log(
+                "  trying to flush queue => reqs=%s expected=%s [%s]",
+                self.requests.length, self.expectedRequests.length, path
+            );
+            if (self._takeFromQueue(path)) {
+                // try again on the next tick.
+                console.log("  flushed. Trying for more. [%s]", path);
+                flushed += 1;
+                if (numToFlush && flushed === numToFlush) {
+                    console.log("  [%s] Flushed assigned amount: %s", path, numToFlush);
+                    defer.resolve();
+                }
+                else {
+                    setTimeout(tryFlush, 0);
+                }
+            }
+            else if (flushed === 0 && !triedWaiting) {
+                // we may not have made the request yet, wait a generous amount of
+                // time before giving up.
+                setTimeout(tryFlush, 5);
+                triedWaiting = true;
+            }
+            else {
+                console.log("  no more flushes. [%s]", path);
+                defer.resolve();
+            }
+        };
+
+        setTimeout(tryFlush, 0);
+
+        return defer.promise;
+    },
+
+    /**
+     * Attempts to resolve requests/expected requests.
+     * @param {string} path The path to flush (optional) default: all.
+     * @return {boolean} true if something was resolved.
+     */
+    _takeFromQueue: function(path) {
+        var req = null;
+        var i, j;
+        var matchingReq, expectedReq, testResponse = null;
+        for (i = 0; i < this.requests.length; i++) {
+            req = this.requests[i];
+            for (j = 0; j < this.expectedRequests.length; j++) {
+                expectedReq = this.expectedRequests[j];
+                if (path && path !== expectedReq.path) { continue; }
+                if (expectedReq.method === req.method &&
+                        req.path.indexOf(expectedReq.path) !== -1) {
+                    if (!expectedReq.data || (JSON.stringify(expectedReq.data) ===
+                            JSON.stringify(req.data))) {
+                        matchingReq = expectedReq;
+                        this.expectedRequests.splice(j, 1);
+                        break;
+                    }
+                }
+            }
+
+            if (matchingReq) {
+                // remove from request queue
+                this.requests.splice(i, 1);
+                i--;
+
+                for (j = 0; j < matchingReq.checks.length; j++) {
+                    matchingReq.checks[j](req);
+                }
+                testResponse = matchingReq.response;
+                console.log("    responding to %s", matchingReq.path);
+                var body = testResponse.body;
+                if (Object.prototype.toString.call(body) == "[object Function]") {
+                    body = body(req.path, req.data);
+                }
+                req.callback(
+                    testResponse.err, testResponse.response, body
+                );
+                matchingReq = null;
+            }
+        }
+        if (testResponse) {  // flushed something
+            return true;
+        }
+        return false;
+    },
+
+    /**
+     * Makes sure that the SDK hasn't sent any more requests to the backend.
+     */
+    verifyNoOutstandingRequests: function() {
+        var firstOutstandingReq = this.requests[0] || {};
+        expect(this.requests.length).toEqual(0,
+            "Expected no more HTTP requests but received request to " +
+            firstOutstandingReq.path
+        );
+    },
+
+    /**
+     * Makes sure that the test doesn't have any unresolved requests.
+     */
+    verifyNoOutstandingExpectation: function() {
+        var firstOutstandingExpectation = this.expectedRequests[0] || {};
+        expect(this.expectedRequests.length).toEqual(
+            0,
+            "Expected to see HTTP request for "
+                + firstOutstandingExpectation.method
+                + " " + firstOutstandingExpectation.path
+        );
+    },
+
+    /**
+     * Create an expected request.
+     * @param {string} method The HTTP method
+     * @param {string} path The path (which can be partial)
+     * @param {Object} data The expected data.
+     * @return {Request} An expected request.
+     */
+    when: function(method, path, data) {
+        var pendingReq = new Request(method, path, data);
+        this.expectedRequests.push(pendingReq);
+        return pendingReq;
+    }
+};
+
+function Request(method, path, data, queryParams) {
+    this.method = method;
+    this.path = path;
+    this.data = data;
+    this.queryParams = queryParams;
+    this.callback = null;
+    this.response = null;
+    this.checks = [];
+}
+Request.prototype = {
+    /**
+     * Execute a check when this request has been satisfied.
+     * @param {Function} fn The function to execute.
+     * @return {Request} for chaining calls.
+     */
+    check: function(fn) {
+        this.checks.push(fn);
+        return this;
+    },
+
+    /**
+     * Respond with the given data when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Object|Function} data The HTTP JSON body. If this is a function,
+     * it will be invoked when the JSON body is required (which should be returned).
+     */
+    respond: function(code, data) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: data,
+            err: null
+        };
+    },
+
+    /**
+     * Fail with an Error when this request is satisfied.
+     * @param {Number} code The HTTP status code.
+     * @param {Error} err The error to throw (e.g. Network Error)
+     */
+    fail: function(code, err) {
+        this.response = {
+            response: {
+                statusCode: code,
+                headers: {}
+            },
+            body: null,
+            err: err
+        };
+    },
+};
+
+/**
+ * The HttpBackend class.
+ */
+module.exports = HttpBackend;
diff --git a/test/skin-sdk.js b/test/skin-sdk.js
new file mode 100644
index 000000000..a5a7233c3
--- /dev/null
+++ b/test/skin-sdk.js
@@ -0,0 +1,8 @@
+/*
+ * skin-sdk.js
+ *
+ * Skins the react-sdk with the vector components
+ */
+
+var sdk = require('matrix-react-sdk');
+sdk.loadSkin(require('component-index'));
diff --git a/test/test-utils.js b/test/test-utils.js
new file mode 100644
index 000000000..ad58b8059
--- /dev/null
+++ b/test/test-utils.js
@@ -0,0 +1,24 @@
+"use strict";
+
+var q = require('q');
+
+/**
+ * Perform common actions before each test case, e.g. printing the test case
+ * name to stdout.
+ * @param {Mocha.Context} context  The test context
+ */
+module.exports.beforeEach = function(context) {
+    var desc = context.currentTest.fullTitle();
+    console.log();
+    console.log(desc);
+    console.log(new Array(1 + desc.length).join("="));
+};
+
+/**
+ * returns true if the current environment supports webrtc
+ */
+module.exports.browserSupportsWebRTC = function() {
+    var n = global.window.navigator;
+    return n.getUserMedia || n.webkitGetUserMedia ||
+        n.mozGetUserMedia;
+};

From 181a6a61ff81f492826fde990976196ef837cc0d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 11:16:38 +0100
Subject: [PATCH 10/18] tests: Don't add the div to the DOM

---
 test/app-tests/joining.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
index d25c35906..0f6cf91b8 100644
--- a/test/app-tests/joining.js
+++ b/test/app-tests/joining.js
@@ -53,13 +53,16 @@ describe('joining a room', function () {
             httpBackend = new MockHttpBackend();
             jssdk.request(httpBackend.requestFn);
             parentDiv = document.createElement('div');
-            document.body.appendChild(parentDiv);
+
+            // uncomment this to actually add the div to the UI, to help with
+            // debugging (but slow things down)
+            // document.body.appendChild(parentDiv);
         });
 
         afterEach(function() {
             if (parentDiv) {
                 ReactDOM.unmountComponentAtNode(parentDiv);
-                document.body.removeChild(parentDiv);
+                parentDiv.remove();
                 parentDiv = null;
             }
             httpBackend.verifyNoOutstandingRequests();

From bf31d6d5fa4758739fb11c4b0ab269684ce94f98 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 17:41:23 +0100
Subject: [PATCH 11/18] Karma test tweaks

* Make sure we only get one js-sdk (and update runtime config to match)
* Don't verifyNoOutstandingRequests (since it is hard to be certain which we
  will get, and makes the tests too dependent on implementation-specifics).
* Disable color for npm test, to avoid confusing Jenkins
---
 karma.conf.js             | 3 +++
 package.json              | 2 +-
 test/app-tests/joining.js | 4 ----
 webpack.config.js         | 3 +++
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index d2bc92558..6620ca65b 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -120,6 +120,9 @@ module.exports = function (config) {
                     // alias any requires to the react module to the one in our path, otherwise
                     // we tend to get the react source included twice when using npm link.
                     react: path.resolve('./node_modules/react'),
+
+                    // same goes for js-sdk
+                    "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
                     
                     sinon: 'sinon/pkg/sinon.js',
                 },
diff --git a/package.json b/package.json
index 51bacdced..15620b588 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
     "prepublish": "npm run build:css && npm run build:compile",
-    "test": "karma start --single-run=true --browsers PhantomJS",
+    "test": "karma start --single-run=true --browsers PhantomJS --colors=false",
     "test:multi": "karma start"
   },
   "dependencies": {
diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
index 0f6cf91b8..1b47889a1 100644
--- a/test/app-tests/joining.js
+++ b/test/app-tests/joining.js
@@ -65,7 +65,6 @@ describe('joining a room', function () {
                 parentDiv.remove();
                 parentDiv = null;
             }
-            httpBackend.verifyNoOutstandingRequests();
         });
         
         it('should not get stuck at a spinner', function(done) {
@@ -74,9 +73,6 @@ describe('joining a room', function () {
             
             httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
                 .respond(200, {});
-            if (test_utils.browserSupportsWebRTC()) {
-                httpBackend.when('GET', '/voip/turnServer').respond(200, {});
-            }
             httpBackend.when('GET', '/pushrules').respond(200, {});
             httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
             httpBackend.when('GET', '/sync').respond(200, {});
diff --git a/webpack.config.js b/webpack.config.js
index 32b7e3e13..dfe127d6f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,9 @@ module.exports = {
             // we tend to get the react source included twice when using npm link.
             react: path.resolve('./node_modules/react'),
 
+            // same goes for js-sdk
+            "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
+
             // matrix-js-sdk will use olm if it is available,
             // but does not explicitly depend on it. Pull it
             // in from node_modules if it's there.

From cb3ae0e0692036938cb1782d721a9ddfe87d9ade Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 18:13:57 +0100
Subject: [PATCH 12/18] Disable autoWatch for npm test

... we're only going to run the tests once, so there is no need to tell webpack
to watch the sources. This saves a spurious repack.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 15620b588..fa92ba9dd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
     "prepublish": "npm run build:css && npm run build:compile",
-    "test": "karma start --single-run=true --browsers PhantomJS --colors=false",
+    "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
     "test:multi": "karma start"
   },
   "dependencies": {

From 29ff9c11a8f1389ee141c487d805b50e8da378c8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 18:22:05 +0100
Subject: [PATCH 13/18] Final karma tweaks

* fix a comment
* drop redundant import
---
 karma.conf.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index 6620ca65b..b97273796 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,7 +1,6 @@
 // karma.conf.js - the config file for karma, which runs our tests.
 
 var path = require('path');
-var fs = require('fs');
 var webpack = require('webpack');
 
 /*
@@ -9,7 +8,7 @@ var webpack = require('webpack');
  * to build everything; however it's the easiest way to load our dependencies
  * from node_modules.
  *
- * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
+ * If you run karma in multi-run mode (with `npm run test:multi`), it will watch
  * the tests for changes, and webpack will rebuild using a cache. This is much quicker
  * than a clean rebuild.
  */

From ff5dff45f540756c425ae6159edf1284f684db2d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 17:16:03 +0100
Subject: [PATCH 14/18] Start Notifications component refactor

Factor some things out of the mega Notifications component, and add a dummy
unit test to show willing
---
 .../views/settings/Notifications.js           | 227 ++----------------
 src/notifications/NotificationUtils.js        |  89 +++++++
 src/notifications/PushRuleVectorState.js      |  78 ++++++
 .../VectorPushRulesDefinitions.js             | 104 ++++++++
 src/notifications/index.js                    |  23 ++
 test/all-tests.js                             |  10 +-
 .../notifications/PushRuleVectorState-test.js |  30 +++
 7 files changed, 348 insertions(+), 213 deletions(-)
 create mode 100644 src/notifications/NotificationUtils.js
 create mode 100644 src/notifications/PushRuleVectorState.js
 create mode 100644 src/notifications/VectorPushRulesDefinitions.js
 create mode 100644 src/notifications/index.js
 create mode 100644 test/unit-tests/notifications/PushRuleVectorState-test.js

diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 6831d7888..2518c420a 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -22,174 +22,14 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
 var Modal = require('matrix-react-sdk/lib/Modal');
 
-/**
- * Enum for state of a push rule as defined by the Vector UI.
- * @readonly
- * @enum {string}
- */
-var PushRuleVectorState = {
-    /** The push rule is disabled */
-    OFF: "off",
-    /** The user will receive push notification for this rule */
-    ON: "on",
-    /** The user will receive push notification for this rule with sound and
-        highlight if this is legitimate */
-    LOUD: "loud",
-};
+var notifications = require('../../../notifications');
 
-// Encodes a dictionary of {
-//   "notify": true/false,
-//   "sound": string or undefined,
-//   "highlight: true/false,
-// }
-// to a list of push actions.
-function encodeActions(action) {
-    var notify = action.notify;
-    var sound = action.sound;
-    var highlight = action.highlight;
-    if (notify) {
-        var actions = ["notify"];
-        if (sound) {
-            actions.push({"set_tweak": "sound", "value": sound});
-        }
-        if (highlight) {
-            actions.push({"set_tweak": "highlight"});
-        } else {
-            actions.push({"set_tweak": "highlight", "value": false});
-        }
-        return actions;
-    } else {
-        return ["dont_notify"];
-    }
-}
+// TODO: this "view" component still has far to much application logic in it,
+// which should be factored out to other files.
 
-// Decode a list of actions to a dictionary of {
-//   "notify": true/false,
-//   "sound": string or undefined,
-//   "highlight: true/false,
-// }
-// If the actions couldn't be decoded then returns null.
-function decodeActions(actions) {
-    var notify = false;
-    var sound = null;
-    var highlight = false;
-
-    for (var i = 0; i < actions.length; ++i) {
-        var action = actions[i];
-        if (action === "notify") {
-            notify = true;
-        } else if (action === "dont_notify") {
-            notify = false;
-        } else if (typeof action === 'object') {
-            if (action.set_tweak === "sound") {
-                sound = action.value
-            } else if (action.set_tweak === "highlight") {
-                highlight = action.value;
-            } else {
-                // We don't understand this kind of tweak, so give up.
-                return null;
-            }
-        } else {
-            // We don't understand this kind of action, so give up.
-            return null;
-        }
-    }
-
-    if (highlight === undefined) {
-        // If a highlight tweak is missing a value then it defaults to true.
-        highlight = true;
-    }
-
-    var result = {notify: notify, highlight: highlight};
-    if (sound !== null) {
-        result.sound = sound;
-    }
-    return result;
-}
-
-var ACTION_NOTIFY = encodeActions({notify: true});
-var ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({notify: true, sound: "default"});
-var ACTION_NOTIFY_RING_SOUND = encodeActions({notify: true, sound: "ring"});
-var ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({notify: true, sound: "default", highlight: true});
-var ACTION_DONT_NOTIFY = encodeActions({notify: false});
-var ACTION_DISABLED = null;
-
-
-/**
- * The descriptions of rules managed by the Vector UI.
- */
-var VectorPushRulesDefinitions = {
-
-     // Messages containing user's display name
-     // (skip contains_user_name which is too geeky)
-     ".m.rule.contains_display_name": {
-        kind: "underride",
-        description: "Messages containing my name",
-        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
-            on: ACTION_NOTIFY,
-            loud: ACTION_HIGHLIGHT_DEFAULT_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Messages just sent to the user in a 1:1 room
-    ".m.rule.room_one_to_one": {
-        kind: "underride",
-        description: "Messages in one-to-one chats",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY
-        }
-    },
-
-    // Messages just sent to a group chat room
-    // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
-    // By opposition, all other room messages are from group chat rooms.
-    ".m.rule.message": {
-        kind: "underride",
-        description: "Messages in group chats",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY
-        }
-    },
-
-    // Invitation for the user
-    ".m.rule.invite_for_me": {
-        kind: "underride",
-        description: "When I'm invited to a room",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Incoming call
-    ".m.rule.call": {
-        kind: "underride",
-        description: "Call invitation",
-        vectorStateToActions: {
-            on: ACTION_NOTIFY,
-            loud: ACTION_NOTIFY_RING_SOUND,
-            off: ACTION_DISABLED
-        }
-    },
-
-    // Notifications from bots
-    ".m.rule.suppress_notices": {
-        kind: "override",
-        description: "Messages sent by bot",
-        vectorStateToActions: {
-            // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
-            on: ACTION_DISABLED,
-            loud: ACTION_NOTIFY_DEFAULT_SOUND,
-            off: ACTION_DONT_NOTIFY,
-        }
-    }
-};
+var NotificationUtils = notifications.NotificationUtils;
+var VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
+var PushRuleVectorState = notifications.PushRuleVectorState;
 
 /**
  * Rules that Vector used to set in order to override the actions of default rules.
@@ -206,9 +46,9 @@ var LEGACY_RULES = {
 };
 
 function portLegacyActions(actions) {
-    var decoded = decodeActions(actions);
+    var decoded = NotificationUtils.decodeActions(actions);
     if (decoded !== null) {
-        return encodeActions(decoded);
+        return NotificationUtils.encodeActions(decoded);
     } else {
         // We don't recognise one of the actions here, so we don't try to
         // canonicalise them.
@@ -216,7 +56,6 @@ function portLegacyActions(actions) {
     }
 }
 
-
 module.exports = React.createClass({
     displayName: 'Notififications',
 
@@ -330,40 +169,6 @@ module.exports = React.createClass({
         }
     },
 
-    _actionsFor: function(pushRuleVectorState) {
-        if (pushRuleVectorState === PushRuleVectorState.ON) {
-            return ACTION_NOTIFY;
-        }
-        else if (pushRuleVectorState === PushRuleVectorState.LOUD) {
-            return ACTION_HIGHLIGHT_DEFAULT_SOUND;
-        }
-    },
-
-    // Determine whether a content rule is in the PushRuleVectorState.ON category or in PushRuleVectorState.LOUD
-    // regardless of its enabled state. Returns undefined if it does not match these categories.
-    _contentRuleVectorStateKind: function(rule) {
-        var stateKind;
-
-        // Count tweaks to determine if it is a ON or LOUD rule
-        var tweaks = 0;
-        for (var j in rule.actions) {
-            var action = rule.actions[j];
-            if (action.set_tweak === 'sound' ||
-                (action.set_tweak === 'highlight' &&  action.value)) {
-                tweaks++;
-            }
-        }
-        switch (tweaks) {
-            case 0:
-                stateKind = PushRuleVectorState.ON;
-                break;
-            case 2:
-                stateKind = PushRuleVectorState.LOUD;
-                break;
-        }
-        return stateKind;
-    },
-
     _setPushRuleVectorState: function(rule, newPushRuleVectorState) {
         if (rule && rule.vectorState !== newPushRuleVectorState) {
 
@@ -379,7 +184,7 @@ module.exports = React.createClass({
             if (rule.rule) {
                 var actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];
 
-                if (actions === ACTION_DISABLED) {
+                if (!actions) {
                     // The new state corresponds to disabling the rule.
                     deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false));
                 }
@@ -425,7 +230,7 @@ module.exports = React.createClass({
             switch (newPushRuleVectorState) {
                 case PushRuleVectorState.ON:
                     if (rule.actions.length !== 1) {
-                        actions = this._actionsFor(PushRuleVectorState.ON);
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.ON);
                     }
 
                     if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
@@ -435,7 +240,7 @@ module.exports = React.createClass({
 
                 case PushRuleVectorState.LOUD:
                     if (rule.actions.length !== 3) {
-                        actions = this._actionsFor(PushRuleVectorState.LOUD);
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.LOUD);
                     }
 
                     if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
@@ -521,7 +326,7 @@ module.exports = React.createClass({
                 // when creating the new rule.
                 // Thus, this new rule will join the 'vectorContentRules' set.
                 if (self.state.vectorContentRules.rules.length) {
-                    pushRuleVectorStateKind = self._contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
+                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
                 }
                 else {
                     // ON is default
@@ -536,13 +341,13 @@ module.exports = React.createClass({
                     if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
                         deferreds.push(cli.addPushRule
                         ('global', 'content', keyword, {
-                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
                            pattern: keyword
                         }));
                     }
                     else {
                         deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
-                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
                            pattern: keyword
                         }));
                     }
@@ -645,7 +450,7 @@ module.exports = React.createClass({
                         }
                     }
                     else if (kind === 'content') {
-                        switch (self._contentRuleVectorStateKind(r)) {
+                        switch (PushRuleVectorState.contentRuleVectorStateKind(r)) {
                             case PushRuleVectorState.ON:
                                 if (r.enabled) {
                                     contentRules.on.push(r);
@@ -757,7 +562,7 @@ module.exports = React.createClass({
                             var state = PushRuleVectorState[stateKey];
                             var vectorStateToActions = ruleDefinition.vectorStateToActions[state];
 
-                            if (vectorStateToActions === ACTION_DISABLED) {
+                            if (!vectorStateToActions) {
                                 // No defined actions means that this vector state expects a disabled default hs rule
                                 if (rule.enabled === false) {
                                     vectorState = state;
diff --git a/src/notifications/NotificationUtils.js b/src/notifications/NotificationUtils.js
new file mode 100644
index 000000000..c8aeb4685
--- /dev/null
+++ b/src/notifications/NotificationUtils.js
@@ -0,0 +1,89 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+module.exports = {
+    // Encodes a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // to a list of push actions.
+    encodeActions: function(action) {
+        var notify = action.notify;
+        var sound = action.sound;
+        var highlight = action.highlight;
+        if (notify) {
+            var actions = ["notify"];
+            if (sound) {
+                actions.push({"set_tweak": "sound", "value": sound});
+            }
+            if (highlight) {
+                actions.push({"set_tweak": "highlight"});
+            } else {
+                actions.push({"set_tweak": "highlight", "value": false});
+            }
+            return actions;
+        } else {
+            return ["dont_notify"];
+        }
+    },
+
+    // Decode a list of actions to a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // If the actions couldn't be decoded then returns null.
+    decodeActions: function(actions) {
+        var notify = false;
+        var sound = null;
+        var highlight = false;
+
+        for (var i = 0; i < actions.length; ++i) {
+            var action = actions[i];
+            if (action === "notify") {
+                notify = true;
+            } else if (action === "dont_notify") {
+                notify = false;
+            } else if (typeof action === 'object') {
+                if (action.set_tweak === "sound") {
+                    sound = action.value
+                } else if (action.set_tweak === "highlight") {
+                    highlight = action.value;
+                } else {
+                    // We don't understand this kind of tweak, so give up.
+                    return null;
+                }
+            } else {
+                // We don't understand this kind of action, so give up.
+                return null;
+            }
+        }
+
+        if (highlight === undefined) {
+            // If a highlight tweak is missing a value then it defaults to true.
+            highlight = true;
+        }
+
+        var result = {notify: notify, highlight: highlight};
+        if (sound !== null) {
+            result.sound = sound;
+        }
+        return result;
+    },
+};
diff --git a/src/notifications/PushRuleVectorState.js b/src/notifications/PushRuleVectorState.js
new file mode 100644
index 000000000..5c6934aae
--- /dev/null
+++ b/src/notifications/PushRuleVectorState.js
@@ -0,0 +1,78 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+/**
+ * Enum for state of a push rule as defined by the Vector UI.
+ * @readonly
+ * @enum {string}
+ */
+module.exports = {
+    /** The push rule is disabled */
+    OFF: "off",
+
+    /** The user will receive push notification for this rule */
+    ON: "on",
+
+    /** The user will receive push notification for this rule with sound and
+        highlight if this is legitimate */
+    LOUD: "loud",
+
+    /**
+     * Convert a PushRuleVectorState to a list of actions
+     *
+     * @return [object] list of push-rule actions
+     */
+    actionsFor: function(pushRuleVectorState) {
+        if (pushRuleVectorState === this.ON) {
+            return ACTION_NOTIFY;
+        }
+        else if (pushRuleVectorState === this.LOUD) {
+            return ACTION_HIGHLIGHT_DEFAULT_SOUND;
+        }
+    },
+
+    /**
+     * Convert a pushrule's actions to a PushRuleVectorState.
+     *
+     * Determines whether a content rule is in the PushRuleVectorState.ON
+     * category or in PushRuleVectorState.LOUD, regardless of its enabled
+     * state. Returns undefined if it does not match these categories.
+     */
+    contentRuleVectorStateKind: function(rule) {
+        var stateKind;
+
+        // Count tweaks to determine if it is a ON or LOUD rule
+        var tweaks = 0;
+        for (var j in rule.actions) {
+            var action = rule.actions[j];
+            if (action.set_tweak === 'sound' ||
+                (action.set_tweak === 'highlight' && action.value)) {
+                tweaks++;
+            }
+        }
+        switch (tweaks) {
+            case 0:
+                stateKind = this.ON;
+                break;
+            case 2:
+                stateKind = this.LOUD;
+                break;
+        }
+        return stateKind;
+    },
+};
diff --git a/src/notifications/VectorPushRulesDefinitions.js b/src/notifications/VectorPushRulesDefinitions.js
new file mode 100644
index 000000000..8e2a0a659
--- /dev/null
+++ b/src/notifications/VectorPushRulesDefinitions.js
@@ -0,0 +1,104 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var NotificationUtils = require('./NotificationUtils');
+
+var encodeActions = NotificationUtils.encodeActions;
+var decodeActions = NotificationUtils.decodeActions;
+
+const ACTION_NOTIFY = encodeActions({notify: true});
+const ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({notify: true, sound: "default"});
+const ACTION_NOTIFY_RING_SOUND = encodeActions({notify: true, sound: "ring"});
+const ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({notify: true, sound: "default", highlight: true});
+const ACTION_DONT_NOTIFY = encodeActions({notify: false});
+const ACTION_DISABLED = null;
+
+/**
+ * The descriptions of rules managed by the Vector UI.
+ */
+module.exports = {
+    // Messages containing user's display name
+    // (skip contains_user_name which is too geeky)
+    ".m.rule.contains_display_name": {
+        kind: "underride",
+        description: "Messages containing my name",
+        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
+            on: ACTION_NOTIFY,
+            loud: ACTION_HIGHLIGHT_DEFAULT_SOUND,
+            off: ACTION_DISABLED
+        }
+    },
+
+    // Messages just sent to the user in a 1:1 room
+    ".m.rule.room_one_to_one": {
+        kind: "underride",
+        description: "Messages in one-to-one chats",
+        vectorStateToActions: {
+            on: ACTION_NOTIFY,
+            loud: ACTION_NOTIFY_DEFAULT_SOUND,
+            off: ACTION_DONT_NOTIFY
+        }
+    },
+
+    // Messages just sent to a group chat room
+    // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
+    // By opposition, all other room messages are from group chat rooms.
+    ".m.rule.message": {
+        kind: "underride",
+        description: "Messages in group chats",
+        vectorStateToActions: {
+            on: ACTION_NOTIFY,
+            loud: ACTION_NOTIFY_DEFAULT_SOUND,
+            off: ACTION_DONT_NOTIFY
+        }
+    },
+
+    // Invitation for the user
+    ".m.rule.invite_for_me": {
+        kind: "underride",
+        description: "When I'm invited to a room",
+        vectorStateToActions: {
+            on: ACTION_NOTIFY,
+            loud: ACTION_NOTIFY_DEFAULT_SOUND,
+            off: ACTION_DISABLED
+        }
+    },
+
+    // Incoming call
+    ".m.rule.call": {
+        kind: "underride",
+        description: "Call invitation",
+        vectorStateToActions: {
+            on: ACTION_NOTIFY,
+            loud: ACTION_NOTIFY_RING_SOUND,
+            off: ACTION_DISABLED
+        }
+    },
+
+    // Notifications from bots
+    ".m.rule.suppress_notices": {
+        kind: "override",
+        description: "Messages sent by bot",
+        vectorStateToActions: {
+            // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
+            on: ACTION_DISABLED,
+            loud: ACTION_NOTIFY_DEFAULT_SOUND,
+            off: ACTION_DONT_NOTIFY,
+        }
+    }
+};
diff --git a/src/notifications/index.js b/src/notifications/index.js
new file mode 100644
index 000000000..9672b67c3
--- /dev/null
+++ b/src/notifications/index.js
@@ -0,0 +1,23 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+module.exports = {
+    NotificationUtils: require('./NotificationUtils'),
+    PushRuleVectorState: require('./PushRuleVectorState'),
+    VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'),
+};
diff --git a/test/all-tests.js b/test/all-tests.js
index ec3008208..2ed169329 100644
--- a/test/all-tests.js
+++ b/test/all-tests.js
@@ -3,5 +3,11 @@
 // Our master test file: uses the webpack require API to find our test files
 // and run them
 
-var context = require.context('./app-tests', true, /\.jsx?$/);
-context.keys().forEach(context);
+// ideally these unit tests could be run under nodejs rather than in a browser
+// via karma, but having two separate test frameworks in the same project
+// seems confusing
+var unit_tests = require.context('./unit-tests', true, /\.js$/);
+unit_tests.keys().forEach(unit_tests);
+
+var app_tests = require.context('./app-tests', true, /\.jsx?$/);
+app_tests.keys().forEach(app_tests);
diff --git a/test/unit-tests/notifications/PushRuleVectorState-test.js b/test/unit-tests/notifications/PushRuleVectorState-test.js
new file mode 100644
index 000000000..48084f08d
--- /dev/null
+++ b/test/unit-tests/notifications/PushRuleVectorState-test.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var notifications = require('notifications');
+
+var prvs = notifications.PushRuleVectorState;
+
+var expect = require('expect');
+
+describe("PushRuleVectorState", function() {
+    describe("contentRuleVectorStateKind", function() {
+        it("should understand normal notifications", function () {
+            expect(prvs.contentRuleVectorStateKind(["notify"])).
+                toEqual(prvs.ON);
+        });
+    });
+});

From 77355cbeb49fff223260b51cb9a6c5d8704ce14d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 21:01:24 +0100
Subject: [PATCH 15/18] Add some debug to help with FF restore bug

(https://github.com/vector-im/vector-web/issues/1354)
---
 src/vector/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/vector/index.js b/src/vector/index.js
index b7ff42cf0..37ee15927 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -104,6 +104,7 @@ function parseQs(location) {
 // Here, we do some crude URL analysis to allow
 // deep-linking.
 function routeUrl(location) {
+    console.log("Routing URL "+window.location);
     var params = parseQs(location);
     var loginToken = params.loginToken;
     if (loginToken) {
@@ -158,6 +159,7 @@ var makeRegistrationUrl = function() {
 
 window.addEventListener('hashchange', onHashChange);
 window.onload = function() {
+    console.log("window.onload");
     if (!validBrowser) {
         return;
     }
@@ -172,6 +174,7 @@ window.onload = function() {
 }
 
 function loadApp() {
+    console.log("Vector starting at "+window.location);
     if (validBrowser) {
         var MatrixChat = sdk.getComponent('structures.MatrixChat');
         var fragParts = parseQsFromFragment(window.location);

From 035b15f330b65dedf24050639c5fbffc4b1a38a2 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 13 Apr 2016 22:18:26 +0100
Subject: [PATCH 16/18] Moar debug for ff session restore issue

---
 src/vector/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vector/index.js b/src/vector/index.js
index 37ee15927..6dd975d2a 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -135,6 +135,7 @@ var lastLoadedScreen = null;
 // This will be called whenever the SDK changes screens,
 // so a web page can update the URL bar appropriately.
 var onNewScreen = function(screen) {
+    console.log("newscreen "+screen);
     if (!loaded) {
         lastLoadedScreen = screen;
     } else {

From 5cdd234bf27f89341b3d3b6747aaa5cda0e4658a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 14 Apr 2016 15:05:36 +0100
Subject: [PATCH 17/18] Do less mangling of jenkins builds

This turns off uglification, and turns on the react sanity checks.
---
 jenkins.sh   | 2 +-
 package.json | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/jenkins.sh b/jenkins.sh
index 4e4b7fbbe..f60bec38b 100755
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -17,7 +17,7 @@ npm install
 npm run test
 
 # build our artifacts; dumps them in ./vector
-npm run build
+npm run build:dev
 
 # gzip up ./vector
 rm vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
diff --git a/package.json b/package.json
index fa92ba9dd..6c85f552e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
     "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
+    "build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
     "build": "npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
     "package": "scripts/package.sh",
     "start:js": "webpack -w src/vector/index.js vector/bundle.js",
     "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",

From 4eb762d52bf43ad303cb8cf2c9efea7657d77c0d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 14 Apr 2016 18:15:51 +0100
Subject: [PATCH 18/18] spell out that images are clickable

---
 .../css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
index 8a92ae4ce..933724241 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
@@ -29,6 +29,7 @@ limitations under the License.
     flex: 0 0 100px;
     margin-left: 15px;
     text-align: center;
+    cursor: pointer;
 }
 
 .mx_LinkPreviewWidget_caption {