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:
Daniel Friedman
2014-07-08 12:55:23 -04:00
committed by cahrens
parent d6475f4558
commit 24e5837389
2 changed files with 54 additions and 15 deletions

View File

@@ -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});
});
});

View File

@@ -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();
}
}
});