Merge pull request #10957 from edx/andya/studio-xblock-debugging

Support local debugging of XBlock JavaScript

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

-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

-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

-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"));
+                }
             }
         });