Fix whitespace problems in xblock string field editor.
Whitespace is now trimmed from input. If after trimming input is empty (pure whitespace or the empty string), the field is not updated.
This commit is contained in:
@@ -86,7 +86,7 @@ define(["jquery", "underscore", "underscore.string", "js/spec_helpers/create_sin
|
||||
|
||||
describe("Editing the container", function() {
|
||||
var updatedDisplayName = 'Updated Test Container',
|
||||
inlineEditDisplayName, displayNameElement, displayNameInput;
|
||||
expectEditCanceled, inlineEditDisplayName, displayNameElement, displayNameInput;
|
||||
|
||||
beforeEach(function() {
|
||||
displayNameElement = containerPage.$('.page-header-title');
|
||||
@@ -104,6 +104,25 @@ define(["jquery", "underscore", "underscore.string", "js/spec_helpers/create_sin
|
||||
displayNameInput.val(newTitle);
|
||||
};
|
||||
|
||||
expectEditCanceled = function(options) {
|
||||
var initialRequests;
|
||||
renderContainerPage(mockContainerXBlockHtml, options.that);
|
||||
initialRequests = requests.length;
|
||||
inlineEditDisplayName(options.newTitle);
|
||||
if (options.pressEscape) {
|
||||
displayNameInput.simulate("keydown", { keyCode: $.simulate.keyCode.ESCAPE });
|
||||
displayNameInput.simulate("keyup", { keyCode: $.simulate.keyCode.ESCAPE });
|
||||
} else {
|
||||
displayNameInput.change();
|
||||
}
|
||||
// No requests should be made when the edit is cancelled client-side
|
||||
expect(initialRequests).toBe(requests.length);
|
||||
expect(displayNameInput).toHaveClass('is-hidden');
|
||||
expect(displayNameElement).not.toHaveClass('is-hidden');
|
||||
expect(displayNameInput.val()).toBe(initialDisplayName);
|
||||
expect(containerPage.model.get('display_name')).toBe(initialDisplayName);
|
||||
};
|
||||
|
||||
it('can edit itself', function() {
|
||||
var editButtons;
|
||||
renderContainerPage(mockContainerXBlockHtml, this);
|
||||
@@ -167,18 +186,30 @@ define(["jquery", "underscore", "underscore.string", "js/spec_helpers/create_sin
|
||||
expect(containerPage.model.get('display_name')).toBe(initialDisplayName);
|
||||
});
|
||||
|
||||
it('can cancel an inline edit', function() {
|
||||
var numRequests;
|
||||
it('trims whitespace from the display name', function() {
|
||||
renderContainerPage(mockContainerXBlockHtml, this);
|
||||
inlineEditDisplayName(updatedDisplayName);
|
||||
numRequests = requests.length;
|
||||
displayNameInput.simulate("keydown", { keyCode: $.simulate.keyCode.ESCAPE });
|
||||
displayNameInput.simulate("keyup", { keyCode: $.simulate.keyCode.ESCAPE });
|
||||
expect(requests.length).toBe(numRequests);
|
||||
inlineEditDisplayName(updatedDisplayName + ' ');
|
||||
displayNameInput.change();
|
||||
// This is the response for the change operation.
|
||||
create_sinon.respondWithJson(requests, { });
|
||||
// This is the response for the subsequent fetch operation.
|
||||
create_sinon.respondWithJson(requests, {"display_name": updatedDisplayName});
|
||||
expect(displayNameInput).toHaveClass('is-hidden');
|
||||
expect(displayNameElement).not.toHaveClass('is-hidden');
|
||||
expect(displayNameElement.text().trim()).toBe(initialDisplayName);
|
||||
expect(containerPage.model.get('display_name')).toBe(initialDisplayName);
|
||||
expect(displayNameElement.text()).toBe(updatedDisplayName);
|
||||
expect(containerPage.model.get('display_name')).toBe(updatedDisplayName);
|
||||
});
|
||||
|
||||
it('does not change the title when input is the empty string', function() {
|
||||
expectEditCanceled({newTitle: '', pressEscape: false, that: this});
|
||||
});
|
||||
|
||||
it('does not change the title when input is whitespace-only', function() {
|
||||
expectEditCanceled({newTitle: ' ', pressEscape: false, that: this});
|
||||
});
|
||||
|
||||
it('can cancel an inline edit', function() {
|
||||
expectEditCanceled({newTitle: updatedDisplayName, pressEscape: true, that: this});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -68,11 +68,20 @@ define(["jquery", "gettext", "js/views/baseview"],
|
||||
this.getInput().addClass('is-hidden');
|
||||
},
|
||||
|
||||
cancelInput: function() {
|
||||
this.getInput().val(this.model.get(this.fieldName));
|
||||
this.hideInput();
|
||||
},
|
||||
|
||||
updateField: function() {
|
||||
var xblockInfo = this.model,
|
||||
newValue = this.getInput().val(),
|
||||
requestData = this.createUpdateRequestData(newValue),
|
||||
fieldName = this.fieldName;
|
||||
newValue = this.getInput().val().trim(),
|
||||
oldValue = xblockInfo.get(this.fieldName),
|
||||
requestData = this.createUpdateRequestData(newValue);
|
||||
if (newValue === '' || newValue === oldValue) {
|
||||
this.cancelInput();
|
||||
return;
|
||||
}
|
||||
this.runOperationShowingMessage(gettext('Saving…'),
|
||||
function() {
|
||||
return xblockInfo.save(requestData);
|
||||
@@ -92,8 +101,7 @@ define(["jquery", "gettext", "js/views/baseview"],
|
||||
|
||||
handleKeyUp: function(event) {
|
||||
if (event.keyCode === 27) { // Revert the changes if the user hits escape
|
||||
this.getInput().val(this.model.get(this.fieldName));
|
||||
this.hideInput();
|
||||
this.cancelInput();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user