web pack port of quiz statistics

refs CNVS-25916

remove dynamic requirements for env configs,
use separate jsx loader for client apps,
update client app plugin to use old react version,
rewrite selenium spec to be an integration test
rather than executing arbitrary javascript,
and MAJORLY refactor loading patterns of client apps
to avoid sharing code with differences delineated
by opaque require re-writes.

Also moved some code that was in "common" client
app but only used by one actual client app down
into the app that uses it (simplifies dependency
tracing).

TEST PLAN:
 1) make sure quiz statistics still works ok under
    require js build, no behavior should have changed
 2) also make sure quiz log auding works under require-js

Change-Id: I0e5ee3eda9da16e0ad48cf858761735c71df801c
Reviewed-on: https://gerrit.instructure.com/69804
Tested-by: Jenkins
Reviewed-by: Ryan Taylor <[email protected]>
QA-Review: Michael Hargiss <[email protected]>
Product-Review: Ethan Vizitei <[email protected]>

client_apps/canvas_quizzes/apps/common/js/config.js

@@ -1,96 +1,96 @@
 define(function(require, exports, module) {
   var _ = require('lodash');
-  var config = require('app/config/environments/production');
-  var callbacks = [];
-  var loaded;
+    var config = require('app/config/environments/production');
+    var callbacks = [];
+    var loaded;
 
-  if (!config) {
-    config = {};
-  }
+    if (!config) {
+      config = {};
+    }
+
+    config.onLoad = function(callback) {
+      if (loaded) {
+        callback();
+      }
+      else {
+        callbacks.push(callback);
+      }
+    };
+
+    //>>excludeStart("production", pragmas.production);
+    var env = module.config().environment || 'development';
+    var extend = _.extend;
+    var onLoad = function() {
+      console.log('\tLoaded', env, 'config.');
+      loaded = true;
+
+      while (callbacks.length) {
+        callbacks.shift()();
+      }
+    };
+
+    console.log('Environment:', env);
 
-  config.onLoad = function(callback) {
-    if (loaded) {
-      callback();
+    // Install test config:
+    if (env === 'test') {
+      require([ 'app/config/environments/test' ], function(testConfig) {
+        extend(config, testConfig);
+        onLoad();
+      }, onLoad);
     }
     else {
-      callbacks.push(callback);
-    }
-  };
+      var loadLocalConfig = function() {
+        // Install development and local config:
+        require([ 'app/config/environments/development_local' ], function(localConfig) {
+          extend(config, localConfig);
+          onLoad();
+        }, function(e) {
+          if (e.requireType === 'scripterror') {
+            onLoad();
 
-  //>>excludeStart("production", pragmas.production);
-  var env = module.config().environment || 'development';
-  var extend = _.extend;
-  var onLoad = function() {
-    console.log('\tLoaded', env, 'config.');
-    loaded = true;
+            // don't whine if the files don't exist:
+            console.info(
+              'Hint: you can set up your own private, development-only configuration in',
+              '"config/environments/development_local.js".');
+          } else {
+            throw e;
+          }
+        });
+      };
 
-    while (callbacks.length) {
-      callbacks.shift()();
-    }
-  };
+      var global = window;
+      var DEBUG = {};
 
-  console.log('Environment:', env);
+      // You can use this in development_local.js to expose certain modules that
+      // are hard to reach from the console. Example:
+      //
+      //   DEBUG.expose('stores/reports', 'reportStore');
+      //   DEBUG.reportStore; // ReportStore
+      DEBUG.expose = function(script, varName) {
+        require([ script ], function(__script__) {
+          DEBUG[varName] = __script__;
+        });
+      };
 
-  // Install test config:
-  if (env === 'test') {
-    require([ 'app/config/environments/test' ], function(testConfig) {
-      extend(config, testConfig);
-      onLoad();
-    }, onLoad);
-  }
-  else {
-    var loadLocalConfig = function() {
-      // Install development and local config:
-      require([ 'app/config/environments/development_local' ], function(localConfig) {
-        extend(config, localConfig);
-        onLoad();
+      global.DEBUG = global.d = DEBUG;
+
+      require([ 'app/config/environments/development' ], function(devConfig) {
+        extend(config, devConfig);
+        loadLocalConfig();
       }, function(e) {
+        // don't whine if the files don't exist:
         if (e.requireType === 'scripterror') {
-          onLoad();
-
-          // don't whine if the files don't exist:
           console.info(
-            'Hint: you can set up your own private, development-only configuration in',
-            '"config/environments/development_local.js".');
+            'Hint: you can set up a development-only configuration in',
+            '"config/environments/development.js".');
+
+          loadLocalConfig();
         } else {
           throw e;
         }
       });
-    };
-
-    var global = window;
-    var DEBUG = {};
-
-    // You can use this in development_local.js to expose certain modules that
-    // are hard to reach from the console. Example:
-    //
-    //   DEBUG.expose('stores/reports', 'reportStore');
-    //   DEBUG.reportStore; // ReportStore
-    DEBUG.expose = function(script, varName) {
-      require([ script ], function(__script__) {
-        DEBUG[varName] = __script__;
-      });
-    };
-
-    global.DEBUG = global.d = DEBUG;
-
-    require([ 'app/config/environments/development' ], function(devConfig) {
-      extend(config, devConfig);
-      loadLocalConfig();
-    }, function(e) {
-      // don't whine if the files don't exist:
-      if (e.requireType === 'scripterror') {
-        console.info(
-          'Hint: you can set up a development-only configuration in',
-          '"config/environments/development.js".');
-
-        loadLocalConfig();
-      } else {
-        throw e;
-      }
-    });
-  }
-  //>>excludeEnd("production");
+    }
+    //>>excludeEnd("production");
 
-  return config;
-});
+    return config;
+});

client_apps/canvas_quizzes/apps/common/js/core/adapter.js

@@ -1,39 +1,40 @@
 define(function(require) {
   var rawAjax = require('../util/xhr_request');
-  var config = require('../config');
   var RSVP = require('rsvp');
 
-  var Adapter = {
-    request: function(options) {
-      var ajax = config.ajax || rawAjax;
+  var Adapter = function(inputConfig) {
+    this.config = inputConfig;
+  };
 
-      options.headers = options.headers || {};
-      options.headers['Content-Type'] = 'application/json';
-      options.headers.Accept = 'application/vnd.api+json';
+  Adapter.prototype.request = function(options) {
+    var ajax = this.config.ajax || rawAjax;
 
-      if (config.apiToken) {
-        options.headers.Authorization = 'Bearer ' + config.apiToken;
-      }
+    options.headers = options.headers || {};
+    options.headers['Content-Type'] = 'application/json';
+    options.headers.Accept = 'application/vnd.api+json';
 
-      if (options.type !== 'GET' && options.data) {
-        options.data = JSON.stringify(options.data);
-      }
+    if (this.config.apiToken) {
+      options.headers.Authorization = 'Bearer ' + this.config.apiToken;
+    }
 
-      //>>excludeStart("production", pragmas.production);
-      if (config.fakeXHRDelay) {
-        var svc = RSVP.defer();
+    if (options.type !== 'GET' && options.data) {
+      options.data = JSON.stringify(options.data);
+    }
 
-        setTimeout(function() {
-          RSVP.Promise.cast(ajax(options)).then(svc.resolve, svc.reject);
-        }, config.fakeXHRDelay);
+    //>>excludeStart("production", pragmas.production);
+    if (this.config.fakeXHRDelay) {
+      var svc = RSVP.defer();
 
-        return svc.promise;
-      }
-      //>>excludeEnd("production");
+      setTimeout(function() {
+        RSVP.Promise.cast(ajax(options)).then(svc.resolve, svc.reject);
+      }, this.config.fakeXHRDelay);
 
-      return RSVP.Promise.cast(ajax(options));
+      return svc.promise;
     }
-  };
+    //>>excludeEnd("production");
+
+    return RSVP.Promise.cast(ajax(options));
+  }
 
   return Adapter;
-});
+});

client_apps/canvas_quizzes/apps/common/js/core/dispatcher.js

@@ -1,12 +1,11 @@
 define(function(require) {
   var RSVP = require('rsvp');
-  var config = require('../config');
   var singleton;
   var callbacks = {};
   var gActionIndex = 0;
 
-  var Dispatcher = function() {
-    return this;
+  var Dispatcher = function(inputConfig) {
+    this.config = inputConfig;
   };
 
   Dispatcher.prototype.dispatch = function(action, params) {
@@ -19,7 +18,7 @@ define(function(require) {
     }
     else {
       console.assert(false, 'No action handler registered to:', action);
-      config.onError('No action handler registered to:', action);
+      this.config.onError('No action handler registered to:', action);
       service.reject('Unknown action "' + action + '"');
     }
 
@@ -37,7 +36,5 @@ define(function(require) {
     callbacks[action] = callback;
   };
 
-  singleton = new Dispatcher();
-
-  return singleton;
-});
+  return Dispatcher;
+});

client_apps/canvas_quizzes/apps/common/js/core/store.js

@@ -1,9 +1,8 @@
 define(function(require) {
   var _ = require('lodash');
-  var Dispatcher = require('./dispatcher');
   var extend = _.extend;
 
-  var Store = function(key, proto) {
+  var Store = function(key, proto, Dispatcher) {
     var emitChange = this.emitChange.bind(this);
 
     extend(this, proto || {});
@@ -77,4 +76,4 @@ define(function(require) {
   });
 
   return Store;
-});
+});

client_apps/canvas_quizzes/apps/events/js/actions.js

@@ -1,5 +1,5 @@
 define(function(require) {
-  var Dispatcher = require('canvas_quizzes/core/dispatcher');
+  var Dispatcher = require('./core/dispatcher');
   var EventStore = require('./stores/events');
   var Actions = {};
 
@@ -16,4 +16,4 @@ define(function(require) {
   };
 
   return Actions;
-});
+});

client_apps/canvas_quizzes/apps/events/js/config/environments/test.js

@@ -2,7 +2,9 @@ define(function(require) {
   var $ = require('canvas_packages/jquery');
 
   // We're already logging errors in config/initializers/rsvp.js
-  jasmine.RSVP.logRSVPErrors = false;
+  if(typeof(jasmine) !== "undefined" && typeof(jasmine !== undefined)){
+    jasmine.RSVP.logRSVPErrors = false;
+  }
 
   return {
     ajax: $.ajax,

client_apps/canvas_quizzes/apps/events/js/config/initializers/backbone.js

@@ -1,6 +1,10 @@
 define(function(require) {
-  var Adapter = require('canvas_quizzes/core/adapter');
+  var config = require('../../config');
+  var CoreAdapter = require('canvas_quizzes/core/adapter');
+  var Adapter = new CoreAdapter(config);
   var Backbone = require('canvas_packages/backbone');
 
-  Backbone.ajax = Adapter.request;
-});
+  Backbone.ajax = function(options){
+    return Adapter.request(options);
+  };
+});

client_apps/canvas_quizzes/apps/events/js/core/dispatcher.js

@@ -0,0 +1,7 @@
+define(function(require) {
+  var CoreDispatcher = require('canvas_quizzes/core/dispatcher');
+  var config = require("../config");
+
+  singleton = new CoreDispatcher(config);
+  return singleton;
+});

client_apps/canvas_quizzes/apps/events/js/stores/events.js

@@ -1,7 +1,7 @@
 define(function(require) {
   var Store = require('canvas_quizzes/core/store');
+  var Dispatcher = require('../core/dispatcher');
   var Environment = require('canvas_quizzes/core/environment');
-  var ajax = require('canvas_quizzes/core/adapter').request;
   var Config = require('../config');
   var EventCollection = require('../collections/events');
   var QuestionCollection = require('../collections/questions');
@@ -155,5 +155,5 @@ define(function(require) {
         this.load();
       }
     }
-  });
+  }, Dispatcher);
 });