Support local debugging of XBlock JavaScript

It turns out that loading JavaScript with $.getScript
causes Chrome to treat the file as an XHR request
and not JS. I've switched over to using RequireJS
to load the URL which already has the ability to
dynamically load files and have the browser
recognize them.

cms/static/coffee/spec/views/module_edit_spec.coffee

@@ -1,4 +1,6 @@
-define ["jquery", "js/spec_helpers/edit_helpers", "coffee/src/views/module_edit", "js/models/module_info", "xmodule"], ($, edit_helpers, ModuleEdit, ModuleModel) ->
+define ["jquery", "common/js/components/utils/view_utils", "js/spec_helpers/edit_helpers",
+        "coffee/src/views/module_edit", "js/models/module_info", "xmodule"],
+  ($, ViewUtils, edit_helpers, ModuleEdit, ModuleModel) ->
 
     describe "ModuleEdit", ->
       beforeEach ->
@@ -60,7 +62,7 @@ define ["jquery", "js/spec_helpers/edit_helpers", "coffee/src/views/module_edit"
             spyOn(@moduleEdit, 'loadDisplay')
             spyOn(@moduleEdit, 'delegateEvents')
             spyOn($.fn, 'append')
-            spyOn($, 'getScript').andReturn($.Deferred().resolve().promise())
+            spyOn(ViewUtils, 'loadJavaScript').andReturn($.Deferred().resolve().promise());
 
             window.MockXBlock = (runtime, element) ->
               return { }
@@ -150,7 +152,7 @@ define ["jquery", "js/spec_helpers/edit_helpers", "coffee/src/views/module_edit"
             expect($('head').append).toHaveBeenCalledWith("<script>inline-js</script>")
 
           it "loads js urls from fragments", ->
-            expect($.getScript).toHaveBeenCalledWith("js-url")
+            expect(ViewUtils.loadJavaScript).toHaveBeenCalledWith("js-url")
 
           it "loads head html", ->
             expect($('head').append).toHaveBeenCalledWith("head-html")

cms/static/js/spec/views/xblock_spec.js

@@ -1,7 +1,7 @@
-define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/xblock", "js/models/xblock_info",
-    "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
-    function ($, AjaxHelpers, URI, XBlockView, XBlockInfo) {
-
+define(["jquery", "URI", "common/js/spec_helpers/ajax_helpers", "common/js/components/utils/view_utils",
+        "js/views/xblock", "js/models/xblock_info", "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
+    function ($, URI, AjaxHelpers, ViewUtils, XBlockView, XBlockInfo) {
+        "use strict";
         describe("XBlockView", function() {
             var model, xblockView, mockXBlockHtml;
 
@@ -89,11 +89,11 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/xbloc
 
                 it('aborts rendering when a dependent script fails to load', function() {
                     var requests = AjaxHelpers.requests(this),
-                        mockJavaScriptUrl = "mock.js",
+                        missingJavaScriptUrl = "no_such_file.js",
                         promise;
-                    spyOn($, 'getScript').andReturn($.Deferred().reject().promise());
+                    spyOn(ViewUtils, 'loadJavaScript').andReturn($.Deferred().reject().promise());
                     promise = postXBlockRequest(requests, [
-                        ["hash5", { mimetype: "application/javascript", kind: "url", data: mockJavaScriptUrl }]
+                        ["hash5", { mimetype: "application/javascript", kind: "url", data: missingJavaScriptUrl }]
                     ]);
                     expect(promise.isRejected()).toBe(true);
                 });
@@ -104,7 +104,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/xbloc
                     postXBlockRequest(AjaxHelpers.requests(this), []);
                     xblockView.$el.find(".notification-action-button").click();
                     expect(notifySpy).toHaveBeenCalledWith("add-missing-groups", model.get("id"));
-                })
+                });
             });
         });
     });

cms/static/js/views/xblock.js

@@ -1,5 +1,6 @@
-define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
-    function ($, _, BaseView, XBlock) {
+define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/views/baseview", "xblock/runtime.v1"],
+    function ($, _, ViewUtils, BaseView, XBlock) {
+        'use strict';
 
         var XBlockView = BaseView.extend({
             // takes XBlockInfo as a model
@@ -83,7 +84,7 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
              * may have thrown JavaScript errors after rendering in which case the xblock parameter
              * will be null.
              */
-            xblockReady: function(xblock) {
+            xblockReady: function(xblock) {  // jshint ignore:line
                 // Do nothing
             },
 
@@ -95,7 +96,7 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
              * represents this process.
              * @param fragment The fragment returned from the xblock_handler
              * @param element The element into which to render the fragment (defaults to this.$el)
-             * @returns {jQuery promise} A promise representing the rendering process
+             * @returns {Promise} A promise representing the rendering process
              */
             renderXBlockFragment: function(fragment, element) {
                 var html = fragment.html,
@@ -131,7 +132,7 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
              * Dynamically loads all of an XBlock's dependent resources. This is an asynchronous
              * process so a promise is returned.
              * @param resources The resources to be rendered
-             * @returns {jQuery promise} A promise representing the rendering process
+             * @returns {Promise} A promise representing the rendering process
              */
             addXBlockFragmentResources: function(resources) {
                 var self = this,
@@ -171,7 +172,7 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
             /**
              * Loads the specified resource into the page.
              * @param resource The resource to be loaded.
-             * @returns {jQuery promise} A promise representing the loading of the resource.
+             * @returns {Promise} A promise representing the loading of the resource.
              */
             loadResource: function(resource) {
                 var head = $('head'),
@@ -189,8 +190,7 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
                     if (kind === "text") {
                         head.append("<script>" + data + "</script>");
                     } else if (kind === "url") {
-                        // Return a promise for the script resolution
-                        return $.getScript(data);
+                        return ViewUtils.loadJavaScript(data);
                     }
                 } else if (mimetype === "text/html") {
                     if (placement === "head") {
@@ -202,11 +202,11 @@ define(["jquery", "underscore", "js/views/baseview", "xblock/runtime.v1"],
             },
 
             fireNotificationActionEvent: function(event) {
-               var eventName = $(event.currentTarget).data("notification-action");
-               if (eventName) {
-                   event.preventDefault();
-                   this.notifyRuntime(eventName, this.model.get("id"));
-               }
+                var eventName = $(event.currentTarget).data("notification-action");
+                if (eventName) {
+                    event.preventDefault();
+                    this.notifyRuntime(eventName, this.model.get("id"));
+                }
             }
         });