Skip to content

E
edx-platform
Commit b779b8a6 by Andy Armstrong
Options

Add unit tests for custom tabs and modal titles

parent 5ab159b0
Showing with 111 additions and 43 deletions
cms/static/js/spec/views/modals/edit_xblock_spec.js
define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers", define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers",
"js/views/modals/edit_xblock", "js/models/xblock_info"], "js/views/modals/edit_xblock", "js/models/xblock_info"],
function ($, _, create_sinon, edit_helpers, EditXBlockModal, XBlockInfo) { function ($, _, create_sinon, edit_helpers, EditXBlockModal, XBlockInfo) {
describe("EditXBlockModal", function() { describe("EditXBlockModal", function() {
...@@ -20,7 +20,13 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers ...@@ -20,7 +20,13 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
}); });
}); });
describe("Editing an xblock", function() { afterEach(function() {
if (modal && edit_helpers.isShowingModal(modal)) {
edit_helpers.cancelModal(modal);
}
});
describe("XBlock Editor", function() {
var mockXBlockEditorHtml; var mockXBlockEditorHtml;
mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore'); mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore');
...@@ -43,15 +49,20 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers ...@@ -43,15 +49,20 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
expect(modal.$('.wrapper-modal-window')).not.toHaveClass('is-shown'); expect(modal.$('.wrapper-modal-window')).not.toHaveClass('is-shown');
}); });
it('shows the correct title', function() {
var requests = create_sinon.requests(this);
modal = showModal(requests, mockXBlockEditorHtml);
expect(modal.$('.modal-window-title').text()).toBe('Editing: Component');
});
it('does not show any editor mode buttons', function() { it('does not show any editor mode buttons', function() {
var requests = create_sinon.requests(this); var requests = create_sinon.requests(this);
modal = showModal(requests, mockXBlockEditorHtml); modal = showModal(requests, mockXBlockEditorHtml);
expect(modal.$('.editor-modes a').length).toBe(0); expect(modal.$('.editor-modes a').length).toBe(0);
edit_helpers.cancelModal(modal);
}); });
}); });
describe("Editing an xmodule", function() { describe("XModule Editor", function() {
var mockXModuleEditorHtml; var mockXModuleEditorHtml;
mockXModuleEditorHtml = readFixtures('mock/mock-xmodule-editor.underscore'); mockXModuleEditorHtml = readFixtures('mock/mock-xmodule-editor.underscore');
...@@ -67,14 +78,18 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers ...@@ -67,14 +78,18 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
it('can render itself', function() { it('can render itself', function() {
var requests = create_sinon.requests(this); var requests = create_sinon.requests(this);
// Show the modal using a mock xblock response
modal = showModal(requests, mockXModuleEditorHtml); modal = showModal(requests, mockXModuleEditorHtml);
expect(modal.$('.wrapper-modal-window')).toHaveClass('is-shown'); expect(modal.$('.wrapper-modal-window')).toHaveClass('is-shown');
edit_helpers.cancelModal(modal); edit_helpers.cancelModal(modal);
expect(modal.$('.wrapper-modal-window')).not.toHaveClass('is-shown'); expect(modal.$('.wrapper-modal-window')).not.toHaveClass('is-shown');
}); });
it('shows the correct title', function() {
var requests = create_sinon.requests(this);
modal = showModal(requests, mockXModuleEditorHtml);
expect(modal.$('.modal-window-title').text()).toBe('Editing: Component');
});
it('shows the correct default buttons', function() { it('shows the correct default buttons', function() {
var requests = create_sinon.requests(this), var requests = create_sinon.requests(this),
editorButton, editorButton,
...@@ -87,7 +102,24 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers ...@@ -87,7 +102,24 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
expect(editorButton).toHaveClass('is-set'); expect(editorButton).toHaveClass('is-set');
expect(settingsButton.length).toBe(1); expect(settingsButton.length).toBe(1);
expect(settingsButton).not.toHaveClass('is-set'); expect(settingsButton).not.toHaveClass('is-set');
edit_helpers.cancelModal(modal); });
describe("Custom Tabs", function() {
var mockCustomTabsHtml;
mockCustomTabsHtml = readFixtures('mock/mock-xmodule-editor-with-custom-tabs.underscore');
it('hides the modal\'s header', function() {
var requests = create_sinon.requests(this);
modal = showModal(requests, mockCustomTabsHtml);
expect(modal.$('.modal-header')).toBeHidden();
});
it('shows the correct title', function() {
var requests = create_sinon.requests(this);
modal = showModal(requests, mockCustomTabsHtml);
expect(modal.$('.component-name').text()).toBe('Editing: Component');
});
}); });
}); });
}); });
......
cms/static/js/spec_helpers/edit_helpers.js
...@@ -40,8 +40,17 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/views/modals/edit_xblock", ...@@ -40,8 +40,17 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/views/modals/edit_xblock",
return modal; return modal;
}; };
isShowingModal = function() { isShowingModal = function(modal) {
return $('.wrapper-modal-window').length > 0; var modalElement;
if (modal) {
modalElement = modal.$el;
} else {
modalElement = $('.wrapper-modal-window');
}
if (modalElement) {
return modalElement.hasClass('is-shown');
}
return false;
}; };
cancelModal = function(modal) { cancelModal = function(modal) {
......
cms/static/js/views/modals/edit_xblock.js
...@@ -70,7 +70,14 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", ...@@ -70,7 +70,14 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal",
}, },
getTitle: function() { getTitle: function() {
var displayName = this.xblockElement.find('.component-header').text().trim(); var displayName = this.xblockElement.find('.xblock-header .header-details').text().trim();
// If not found, try the old unit page style rendering
if (!displayName) {
displayName = this.xblockElement.find('.component-header').text().trim();
if (!displayName) {
displayName = gettext('Component');
}
}
return interpolate(gettext("Editing: %(title)s"), { title: displayName }, true); return interpolate(gettext("Editing: %(title)s"), { title: displayName }, true);
}, },
......
cms/templates/js/mock/mock-xmodule-editor-with-custom-tabs.underscore 0 → 100644
<div class="xblock xblock-studio_view xmodule_edit xmodule_WrapperDescriptor" data-runtime-class="StudioRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_wrapper;_wrapper_l1_poll" data-type="VerticalDescriptor" data-block-type="wrapper" tabindex="0">
<div class="wrapper-comp-editor is-active" id="editor-tab" data-base-asset-url="/c4x/AndyA/ABT101/asset/">
<section class="editor-with-tabs">
<div class="edit-header">
<span class="component-name"></span>
<ul class="editor-tabs">
<li class="inner_tab_wrap"><a href="#tab-i4x-testCourse-video-84c6bf5dc2a24bc7996771eb7a1a4ad1-0" class="tab current">Basic</a></li>
<li class="inner_tab_wrap"><a href="#tab-i4x-testCourse-video-84c6bf5dc2a24bc7996771eb7a1a4ad1-1" class="tab">Advanced</a></li>
</ul>
</div>
<div class="tabs-wrapper">
<div class="component-tab" id="tab-i4x-testCourse-video-84c6bf5dc2a24bc7996771eb7a1a4ad1-0">
<p>Basic editor</p>
</div>
<div class="component-tab" id="tab-i4x-testCourse-video-84c6bf5dc2a24bc7996771eb7a1a4ad1-1">
<p>Advanced editor</p>
</div>
</div>
</section>
</div>
</div>
common/lib/xmodule/xmodule/js/fixtures/tabs-edit.html
...@@ -5,34 +5,38 @@ ...@@ -5,34 +5,38 @@
<h2 class="title modal-window-title">Mock Modal Title</h2> <h2 class="title modal-window-title">Mock Modal Title</h2>
</div> </div>
<div class="modal-content"> <div class="modal-content">
<section class="editor-with-tabs"> <div class="xblock-editor">
<div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'> <div class="xblock xblock-studio_view xmodule_edit">
<div class="edit-header"> <section class="editor-with-tabs">
<ul class="editor-tabs"> <div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
<li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li> <div class="edit-header">
<li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li> <ul class="editor-tabs">
<li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li> <li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
</ul> <li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
</div> <li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
<div class="tabs-wrapper"> </ul>
<div class="component-tab" id="tab-0"> </div>
<textarea name="" class="edit-box">XML Editor Text</textarea> <div class="tabs-wrapper">
<div class="component-tab" id="tab-0">
<textarea name="" class="edit-box">XML Editor Text</textarea>
</div>
<div class="component-tab" id="tab-1">
Transcripts
</div>
<div class="component-tab" id="tab-2">
Subtitles
</div>
</div>
<div class="wrapper-comp-settings">
<ul>
<li id="editor-mode"><a>Editor</a></li>
<li id="settings-mode"><a>Settings</a></li>
</ul>
</div>
</div> </div>
<div class="component-tab" id="tab-1"> </section>
Transcripts
</div>
<div class="component-tab" id="tab-2">
Subtitles
</div>
</div>
<div class="wrapper-comp-settings">
<ul>
<li id="editor-mode"><a>Editor</a></li>
<li id="settings-mode"><a>Settings</a></li>
</ul>
</div>
</div> </div>
</section> </div>
</div> </div>
<div class="modal-actions"> <div class="modal-actions">
<ul> <ul>
......
common/lib/xmodule/xmodule/js/spec/tabs/edit.coffee
...@@ -3,7 +3,7 @@ describe "TabsEditingDescriptor", -> ...@@ -3,7 +3,7 @@ describe "TabsEditingDescriptor", ->
@isInactiveClass = "is-inactive" @isInactiveClass = "is-inactive"
@isCurrent = "current" @isCurrent = "current"
loadFixtures 'tabs-edit.html' loadFixtures 'tabs-edit.html'
@descriptor = new TabsEditingDescriptor($('.base_wrapper')) @descriptor = new TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id' @html_id = 'test_id'
@tab_0_switch = jasmine.createSpy('tab_0_switch'); @tab_0_switch = jasmine.createSpy('tab_0_switch');
@tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate'); @tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate');
...@@ -63,16 +63,12 @@ describe "TabsEditingDescriptor", -> ...@@ -63,16 +63,12 @@ describe "TabsEditingDescriptor", ->
@descriptor.onSwitchEditor @descriptor.onSwitchEditor
) )
describe "editor/settings header", ->
it "is hidden", ->
expect(@descriptor.element.closest(".modal-editor").find(".modal-header")).toBeHidden()
describe "TabsEditingDescriptor special save cases", -> describe "TabsEditingDescriptor special save cases", ->
beforeEach -> beforeEach ->
@isInactiveClass = "is-inactive" @isInactiveClass = "is-inactive"
@isCurrent = "current" @isCurrent = "current"
loadFixtures 'tabs-edit.html' loadFixtures 'tabs-edit.html'
@descriptor = new window.TabsEditingDescriptor($('.base_wrapper')) @descriptor = new window.TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id' @html_id = 'test_id'
describe "save", -> describe "save", ->
...@@ -92,4 +88,3 @@ describe "TabsEditingDescriptor special save cases", -> ...@@ -92,4 +88,3 @@ describe "TabsEditingDescriptor special save cases", ->
expect(@tab_0_modelUpdate).toHaveBeenCalled() expect(@tab_0_modelUpdate).toHaveBeenCalled()
data = @descriptor.save().data data = @descriptor.save().data
expect(data).toEqual(1) expect(data).toEqual(1)
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