Merge pull request #733 from edx/andya/fix-ora-dev-environment

Make improvements to ORA's development environment

.jshintrc

+// --------------------------------------------------------------------
+// JSHint Configuration
+// --------------------------------------------------------------------
+//
+// http://www.jshint.com/
+// http://jshint.com/docs/options/
+{
+    // == Enforcing Options ===============================================
+    "bitwise"         : false,     // Prohibits the use of bitwise operators such as ^ (XOR), | (OR) and others. Bitwise operators are very rare in JavaScript programs and quite often & is simply a mistyped &&.
+    "camelcase"       : false,     // Allows you to force all variable names to use either camelCase style or UPPER_CASE with underscores.
+    "curly"           : true,      // Requires you to always put curly braces around blocks in loops and conditionals. JavaScript allows you to omit curly braces when the block consists of only one statement
+    "eqeqeq"          : true,      // Prohibits the use of == and != in favor of === and !==.
+    "es3"             : false,     // Tells JSHint that your code needs to adhere to ECMAScript 3 specification. Use this option if you need your program to be executable in older browsers—such as Internet Explorer 6/7/8/9.
+    "forin"           : true,      // Requires all for in loops to filter object's items.
+    "freeze"          : true,      // Prohibits overwriting prototypes of native objects such as Array, Date and so on.
+    "immed"           : true,      // Prohibits the use of immediate function invocations without wrapping them in parentheses.
+    // "indent"       : 4,         // Enforces specific tab width for your code. Has no effect when "white" option is not used.
+    "latedef"         : "nofunc",  // Prohibits the use of a variable before it was defined. Setting this option to "nofunc" will allow function declarations to be ignored.
+    "newcap"          : true,      // Requires you to capitalize names of constructor functions.
+    "noarg"           : true,      // Prohibits the use of arguments.caller and arguments.callee.
+    "noempty"         : true,      // Warns when you have an empty block in your code.
+    "nonbsp"          : true,      // Warns about "non-breaking whitespace" characters.
+    "nonew"           : false,     // Prohibits the use of constructor functions for side-effects.
+    "plusplus"        : false,     // Prohibits the use of unary increment and decrement operators.
+    "quotmark"        : "single",  // Enforces the consistency of quotation marks used throughout your code. It accepts three values: true, "single", and "double".
+    "undef"           : true,      // Prohibits the use of explicitly undeclared variables.
+    "unused"          : true,      // Warns when you define and never use your variables.
+    "strict"          : true,      // Requires all functions to run in ECMAScript 5's strict mode.
+    "trailing"        : true,      // Makes it an error to leave a trailing whitespace in your code.
+    "maxlen"          : 120,       // Lets you set the maximum length of a line.
+    //"maxparams"     : 4,         // Lets you set the max number of formal parameters allowed per function.
+    //"maxdepth"      : 4,         // Lets you control how nested do you want your blocks to be.
+    //"maxstatements" : 4,         // Lets you set the max number of statements allowed per function.
+    //"maxcomplexity" : 4,         // Lets you control cyclomatic complexity throughout your code.
+
+
+    // == Relaxing Options ================================================
+    "asi"           : false,       // Suppresses warnings about missing semicolons.
+    "boss"          : false,       // Suppresses warnings about the use of assignments in cases where comparisons are expected.
+    "debug"         : false,       // Suppresses warnings about the debugger statements in your code.
+    "eqnull"        : false,       // Suppresses warnings about == null comparisons.
+    "esnext"        : false,       // Tells JSHint that your code uses ECMAScript 6 specific syntax.
+    "evil"          : false,       // Suppresses warnings about the use of eval.
+    "expr"          : false,       // Suppresses warnings about the use of expressions where normally you would expect to see assignments or function calls.
+    "funcscope"     : false,       // Suppresses warnings about declaring variables inside of control structures while accessing them later from the outside.
+    "gcl"           : false,       // Makes JSHint compatible with Google Closure Compiler.
+    "globalstrict"  : false,       // Suppresses warnings about the use of global strict mode.
+    "iterator"      : false,       // Suppresses warnings about the __iterator__ property.
+    "lastsemic"     : false,       // Suppresses warnings about missing semicolons, but only when the semicolon is omitted for the last statement in a one-line block.
+    "laxbreak"      : false,       // Suppresses most of the warnings about possibly unsafe line breaks in your code.
+    "laxcomma"      : false,       // Suppresses warnings about comma-first coding style.
+    "loopfunc"      : false,       // Suppresses warnings about functions inside of loops.
+    "maxerr"        : 100,         // Set the maximum amount of warnings JSHint will produce before giving up.
+    "moz"           : false,       // Tells JSHint that your code uses Mozilla JavaScript extensions.
+    "notypeof"      : false,       // Suppresses warnings about invalid typeof operator values.
+    "proto"         : false,       // Suppresses warnings about the __proto__ property.
+    "scripturl"     : false,       // Suppresses warnings about the use of script-targeted URLs—such as javascript:...
+    "smarttabs"     : false,       // Suppresses warnings about mixed tabs and spaces when the latter are used for alignment only.
+    "shadow"        : false,       // Suppresses warnings about variable shadowing i.e. declaring a variable that had been already declared somewhere in the outer scope.
+    "sub"           : false,       // Suppresses warnings about using [] notation when it can be expressed in dot notation.
+    "supernew"      : false,       // Suppresses warnings about "weird" constructions like new function () { ... } and new Object;.
+    "validthis"     : true,       // Suppresses warnings about possible strict violations when the code is running in strict mode and you use this in a non-constructor function.
+    "noyield"       : false,       // Suppresses warnings about generator functions with no yield statement in them.
+
+
+    // == Environments ====================================================
+    //
+    // These options pre-define global variables that are exposed by
+    // popular JavaScript libraries and runtime environments—such as
+    // browser or node.js.
+    "browser"       : true,        // Defines globals exposed by modern browsers: all the way from good old document and navigator to the HTML5 FileReader and other new developments in the browser world.
+    "devel"         : true,        // Defines globals that are usually used for logging poor-man's debugging: console, alert, etc.
+    // The rest should remain `false`. Please see explanation for the "predef" parameter below.
+    "couch"         : false,       // Defines globals exposed by CouchDB.
+    "dojo"          : false,       // Defines globals exposed by the Dojo Toolkit
+    "jquery"        : false,        // Defines globals exposed by the jQuery JavaScript library.
+    "mootools"      : false,       // Defines globals exposed by the MooTools JavaScript framework.
+    "node"          : true,       // Defines globals available when your code is running inside of the Node runtime environment.
+    "nonstandard"   : false,       // Defines non-standard but widely adopted globals such as escape and unescape.
+    "phantom"       : false,        // Defines globals available when your core is running inside of the PhantomJS runtime environment.
+    "prototypejs"   : false,       // Defines globals exposed by the Prototype JavaScript framework.
+    "rhino"         : false,       // Defines globals available when your code is running inside of the Rhino runtime environment.
+    "worker"        : false,       // Defines globals available when your code is running inside of a Web Worker.
+    "wsh"           : false,       // Defines globals available when your code is running as a script for the Windows Script Host.
+    "yui"           : false,       // Defines globals exposed by the YUI JavaScript framework.
+
+
+    // == JSLint Legacy ===================================================
+    //
+    // These options are legacy from JSLint. Aside from bug fixes they will
+    // not be improved in any way and might be removed at any point.
+    // "nomen"         : false,    // Disallows the use of dangling _ in variables.
+    // "onevar"        : false,    // Allows only one var statement per function.
+    // "passfail"      : false,    // Makes JSHint stop on the first error or warning.
+    // "white"         : false,    // make JSHint check your source code against Douglas Crockford's JavaScript coding style.
+
+
+    // == Undocumented Options ============================================
+    //
+    // If you are using some global variable, for example `define`, or `$`, please
+    // make it available within your JS file by passing it to the wrapper anonymous
+    // function like so:
+    //
+    // (function (define, $) {
+    //     'use strict';
+    //     // Your content goes here which uses `define`, and `$`.
+    // }).call(this, window.define, window.jQuery);
+    //
+    // The parameter "predef" should remain empty for this configuration file
+    // to remain as general as possible.
+    "predef": [
+        // jQuery library.
+        "jQuery", "$",
+
+        // Underscore.js library.
+        "_",
+
+        // Backbone.js library.
+        "Backbone",
+
+        // require Library
+        "require",
+        "requirejs",
+        "RequireJS",
+        "define",
+
+        // Jasmine library.
+        "jasmine",
+        "describe", "xdescribe",
+        "it", "xit",
+        "spyOn",
+        "beforeEach",
+        "afterEach",
+        "expect",
+        "waitsFor",
+        "runs",
+
+        // jQuery-Jasmine library.
+        "loadFixtures",
+        "appendLoadFixtures",
+        "readFixtures",
+        "setFixtures",
+        "appendSetFixtures",
+        "spyOnEvent"
+    ]
+}
\ No newline at end of file

Makefile

@@ -48,3 +48,6 @@ install: install-wheels install-python install-js install-nltk-data install-test
 
 test:
 	./scripts/test.sh
+
+test-js:
+	./scripts/test-js.sh

karma.conf.js

@@ -11,7 +11,7 @@ module.exports = function(config) {
       'karma-coverage',
       'karma-jasmine',
       'karma-chrome-launcher',
-      'karma-phantomjs-launcher',
+      'karma-phantomjs-launcher'
     ],
 
     // frameworks to use
@@ -36,7 +36,7 @@ module.exports = function(config) {
       {
         pattern: 'fixtures/*.html',
         served: true, included: false
-      },
+      }
     ],
 
 

openassessment/xblock/openassessmentblock.py

@@ -4,10 +4,12 @@ import copy
 import datetime as dt
 import json
 import logging
+import os
 import pkg_resources
 
 import pytz
 
+from django.conf import settings
 from django.template.context import Context
 from django.template.loader import get_template
 from webob import Response
@@ -16,6 +18,7 @@ from lazy import lazy
 from xblock.core import XBlock
 from xblock.fields import List, Scope, String, Boolean, Integer
 from xblock.fragment import Fragment
+
 from openassessment.xblock.grade_mixin import GradeMixin
 from openassessment.xblock.leaderboard_mixin import LeaderboardMixin
 from openassessment.xblock.defaults import * # pylint: disable=wildcard-import, unused-wildcard-import
@@ -256,6 +259,18 @@ class OpenAssessmentBlock(
         )
         return student_item_dict
 
+    def add_javascript_files(self, fragment, item):
+        """
+        Add all the JavaScript files from a directory to the specified fragment
+        """
+        if pkg_resources.resource_isdir(__name__, item):
+            for child_item in pkg_resources.resource_listdir(__name__, item):
+                path = os.path.join(item, child_item)
+                if not pkg_resources.resource_isdir(__name__, path):
+                    fragment.add_javascript_url(self.runtime.local_resource_url(self, path))
+        else:
+            fragment.add_javascript_url(self.runtime.local_resource_url(self, item))
+
     def student_view(self, context=None):
         """The main view of OpenAssessmentBlock, displayed when viewing courses.
 
@@ -290,17 +305,25 @@ class OpenAssessmentBlock(
         }
         template = get_template("openassessmentblock/oa_base.html")
         context = Context(context_dict)
-        frag = Fragment(template.render(context))
+        fragment = Fragment(template.render(context))
 
         i18n_service = self.runtime.service(self, 'i18n')
         if hasattr(i18n_service, 'get_language_bidi') and i18n_service.get_language_bidi():
-            frag.add_css(load("static/css/openassessment-rtl.css"))
+            css_url = "static/css/openassessment-rtl.css"
         else:
-            frag.add_css(load("static/css/openassessment-ltr.css"))
+            css_url = "static/css/openassessment-ltr.css"
 
-        frag.add_javascript(load("static/js/openassessment-lms.min.js"))
-        frag.initialize_js('OpenAssessmentBlock')
-        return frag
+        if settings.DEBUG:
+            fragment.add_css_url(self.runtime.local_resource_url(self, css_url))
+            self.add_javascript_files(fragment, "static/js/src/oa_shared.js")
+            self.add_javascript_files(fragment, "static/js/src/oa_server.js")
+            self.add_javascript_files(fragment, "static/js/src/lms")
+        else:
+            # TODO: load CSS and JavaScript as URLs once they can be served by the CDN
+            fragment.add_css(load(css_url))
+            fragment.add_javascript(load("static/js/openassessment-lms.min.js"))
+        fragment.initialize_js('OpenAssessmentBlock')
+        return fragment
 
 
     @property

openassessment/xblock/studio_mixin.py

@@ -5,20 +5,22 @@ import copy
 import logging
 import pkg_resources
 from uuid import uuid4
+from xml import UpdateFromXmlError
 
+from django.conf import settings
 from django.template import Context
 from django.template.loader import get_template
 from voluptuous import MultipleInvalid
 from xblock.core import XBlock
 from xblock.fields import List, Scope
 from xblock.fragment import Fragment
+
 from openassessment.xblock.defaults import DEFAULT_EDITOR_ASSESSMENTS_ORDER, DEFAULT_RUBRIC_FEEDBACK_TEXT
 from openassessment.xblock.validation import validator
 from openassessment.xblock.data_conversion import create_rubric_dict, make_django_template_key, update_assessments_format
 from openassessment.xblock.schema import EDITOR_UPDATE_SCHEMA
 from openassessment.xblock.resolve_dates import resolve_dates
 from openassessment.xblock.xml import serialize_examples_to_xml_str, parse_examples_from_xml_str
-from xml import UpdateFromXmlError
 
 logger = logging.getLogger(__name__)
 
@@ -63,10 +65,16 @@ class StudioMixin(object):
         rendered_template = get_template(
             'openassessmentblock/edit/oa_edit.html'
         ).render(Context(self.editor_context()))
-        frag = Fragment(rendered_template)
-        frag.add_javascript(pkg_resources.resource_string(__name__, "static/js/openassessment-studio.min.js"))
-        frag.initialize_js('OpenAssessmentEditor')
-        return frag
+        fragment = Fragment(rendered_template)
+        if settings.DEBUG:
+            self.add_javascript_files(fragment, "static/js/src/oa_shared.js")
+            self.add_javascript_files(fragment, "static/js/src/oa_server.js")
+            self.add_javascript_files(fragment, "static/js/src/studio")
+        else:
+            # TODO: switch to add_javascript_url once XBlock resources are loaded from the CDN
+            fragment.add_javascript(pkg_resources.resource_string(__name__, "static/js/openassessment-studio.min.js"))
+        fragment.initialize_js('OpenAssessmentEditor')
+        return fragment
 
     def editor_context(self):
         """

scripts/test-js.sh

@@ -3,7 +3,7 @@
 cd `dirname $BASH_SOURCE` && cd ..
 
 echo "Generating HTML fixtures for JavaScript tests..."
-export DJANGO_SETTINGS_MODULE="settings.test"
+export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test"}
 ./scripts/render_templates.py openassessment/xblock/static/js/fixtures/templates.json
 
 echo "Running JavaScript tests..."

scripts/test-python.sh

@@ -6,5 +6,5 @@ cd `dirname $BASH_SOURCE` && cd ..
 git clean -xfd "./storage/test/"
 
 echo "Running Python tests..."
-export DJANGO_SETTINGS_MODULE="settings.test"
+export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test"}
 python manage.py test $1

scripts/test.sh

@@ -4,6 +4,7 @@
 set -e
 
 cd `dirname $BASH_SOURCE` && cd ..
+export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test_with_coverage"}
 ./scripts/test-python.sh $1
 ./scripts/test-js.sh
 ./scripts/build-docs.sh

scripts/workbench.sh

@@ -9,7 +9,7 @@ make install-js
 make javascript
 
 # Configure Django settings
-export DJANGO_SETTINGS_MODULE="settings.dev"
+export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.dev"}
 
 # Create the database
 echo "Updating the database..."

settings/test.py

@@ -15,10 +15,6 @@ TEST_APPS = (
 # Configure nose
 NOSE_ARGS = [
     "-a !acceptance",
-    '--with-coverage',
-    '--cover-package=' + ",".join(TEST_APPS),
-    '--cover-branches',
-    '--cover-erase',
     ]
 
 DATABASES = {

settings/test_with_coverage.py

+"""
+Django settings for running tests with coverage.
+"""
+
+# Inherit from the test settings
+from .test import *     # pylint:disable=W0614,W0401
+
+# Configure nose so that tests are run with coverage
+NOSE_ARGS = [
+    "-a !acceptance",
+    '--with-coverage',
+    '--cover-package=' + ",".join(TEST_APPS),
+    '--cover-branches',
+    '--cover-erase',
+    ]