Skip to content

E
edx-platform
Commit cc24ca55 by Andy Armstrong
Options

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.
parent c14c146d
Showing with 53 additions and 28 deletions
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") {
......
common/static/common/js/components/utils/view_utils.js
/**
* Provides useful utilities for views.
*/
;(function (define) {
;(function (define, require) {
'use strict';
define(["jquery", "underscore", "gettext", "common/js/components/views/feedback_notification",
"common/js/components/views/feedback_prompt"],
function ($, _, gettext, NotificationView, PromptView) {
var toggleExpandCollapse, showLoadingIndicator, hideLoadingIndicator, confirmThenRunOperation,
runOperationShowingMessage, withDisabledElement, disableElementWhileRunning,
getScrollOffset, setScrollOffset, setScrollTop, redirect, reload, hasChangedAttributes, deleteNotificationHandler,
validateRequiredField, validateURLItemEncoding, validateTotalKeyLength, checkTotalKeyLengthViolations;
getScrollOffset, setScrollOffset, setScrollTop, redirect, reload, hasChangedAttributes,
deleteNotificationHandler, validateRequiredField, validateURLItemEncoding,
validateTotalKeyLength, checkTotalKeyLengthViolations, loadJavaScript;
// see https://openedx.atlassian.net/browse/TNL-889 for what is it and why it's 65
var MAX_SUM_KEY_LENGTH = 65;
......@@ -241,13 +243,32 @@
checkTotalKeyLengthViolations = function(selectors, classes, key_field_selectors, message_tpl) {
if (!validateTotalKeyLength(key_field_selectors)) {
$(selectors.errorWrapper).addClass(classes.shown).removeClass(classes.hiding);
$(selectors.errorMessage).html('<p>' + _.template(message_tpl, {limit: MAX_SUM_KEY_LENGTH}) + '</p>');
$(selectors.errorMessage).html(
'<p>' + _.template(message_tpl, {limit: MAX_SUM_KEY_LENGTH}) + '</p>'
);
$(selectors.save).addClass(classes.disabled);
} else {
$(selectors.errorWrapper).removeClass(classes.shown).addClass(classes.hiding);
}
};
/**
* Dynamically loads the specified JavaScript file.
* @param url The URL to a JavaScript file.
* @returns {Promise} A promise indicating when the URL has been loaded.
*/
loadJavaScript = function(url) {
var deferred = $.Deferred();
require([url],
function() {
deferred.resolve();
},
function() {
deferred.reject();
});
return deferred.promise();
};
return {
'toggleExpandCollapse': toggleExpandCollapse,
'showLoadingIndicator': showLoadingIndicator,
......@@ -266,7 +287,8 @@
'validateRequiredField': validateRequiredField,
'validateURLItemEncoding': validateURLItemEncoding,
'validateTotalKeyLength': validateTotalKeyLength,
'checkTotalKeyLengthViolations': checkTotalKeyLengthViolations
'checkTotalKeyLengthViolations': checkTotalKeyLengthViolations,
'loadJavaScript': loadJavaScript
};
});
}).call(this, define || RequireJS.define);
}).call(this, define || RequireJS.define, require || RequireJS.require);
common/static/common/js/spec/components/view_utils_spec.js
;(function (define) {
'use strict';
define(["jquery", "underscore", "common/js/components/utils/view_utils", "common/js/spec_helpers/view_helpers", 'jasmine-stealth'],
function ($, _, ViewUtils, ViewHelpers) {
define(["jquery", "underscore", "backbone", "common/js/components/utils/view_utils",
"common/js/spec_helpers/view_helpers", "jasmine-stealth"],
function ($, _, Backbone, ViewUtils, ViewHelpers) {
describe("ViewUtils", function() {
describe("disabled element while running", function() {
......@@ -18,7 +19,7 @@ define(["jquery", "underscore", "common/js/components/utils/view_utils", "common
expect(link).not.toHaveClass("is-disabled");
});
it("uses withDisabledElement wrapper to disable element while running a Backbone event handler", function() {
it("disables elements within withDisabledElement", function() {
var link,
eventCallback,
event,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment