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",
"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) {
describe("EditXBlockModal", function() {
......@@ -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;
mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore');
......@@ -43,15 +49,20 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
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() {
var requests = create_sinon.requests(this);
modal = showModal(requests, mockXBlockEditorHtml);
expect(modal.$('.editor-modes a').length).toBe(0);
edit_helpers.cancelModal(modal);
});
});
describe("Editing an xmodule", function() {
describe("XModule Editor", function() {
var mockXModuleEditorHtml;
mockXModuleEditorHtml = readFixtures('mock/mock-xmodule-editor.underscore');
......@@ -67,14 +78,18 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
it('can render itself', function() {
var requests = create_sinon.requests(this);
// Show the modal using a mock xblock response
modal = showModal(requests, mockXModuleEditorHtml);
expect(modal.$('.wrapper-modal-window')).toHaveClass('is-shown');
edit_helpers.cancelModal(modal);
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() {
var requests = create_sinon.requests(this),
editorButton,
......@@ -87,7 +102,24 @@ define(["jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helpers
expect(editorButton).toHaveClass('is-set');
expect(settingsButton.length).toBe(1);
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",
return modal;
};
isShowingModal = function() {
return $('.wrapper-modal-window').length > 0;
isShowingModal = function(modal) {
var modalElement;
if (modal) {
modalElement = modal.$el;
} else {
modalElement = $('.wrapper-modal-window');
}
if (modalElement) {
return modalElement.hasClass('is-shown');
}
return false;
};
cancelModal = function(modal) {
......
cms/static/js/views/modals/edit_xblock.js
......@@ -70,7 +70,14 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal",
},
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);
},
......
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 @@
<h2 class="title modal-window-title">Mock Modal Title</h2>
</div>
<div class="modal-content">
<section class="editor-with-tabs">
<div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
<div class="edit-header">
<ul class="editor-tabs">
<li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
<li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
<li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
</ul>
</div>
<div class="tabs-wrapper">
<div class="component-tab" id="tab-0">
<textarea name="" class="edit-box">XML Editor Text</textarea>
<div class="xblock-editor">
<div class="xblock xblock-studio_view xmodule_edit">
<section class="editor-with-tabs">
<div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
<div class="edit-header">
<ul class="editor-tabs">
<li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
<li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
<li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
</ul>
</div>
<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 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>
</section>
</div>
</section>
</div>
</div>
<div class="modal-actions">
<ul>
......
common/lib/xmodule/xmodule/js/spec/tabs/edit.coffee
......@@ -3,7 +3,7 @@ describe "TabsEditingDescriptor", ->
@isInactiveClass = "is-inactive"
@isCurrent = "current"
loadFixtures 'tabs-edit.html'
@descriptor = new TabsEditingDescriptor($('.base_wrapper'))
@descriptor = new TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id'
@tab_0_switch = jasmine.createSpy('tab_0_switch');
@tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate');
......@@ -63,16 +63,12 @@ describe "TabsEditingDescriptor", ->
@descriptor.onSwitchEditor
)
describe "editor/settings header", ->
it "is hidden", ->
expect(@descriptor.element.closest(".modal-editor").find(".modal-header")).toBeHidden()
describe "TabsEditingDescriptor special save cases", ->
beforeEach ->
@isInactiveClass = "is-inactive"
@isCurrent = "current"
loadFixtures 'tabs-edit.html'
@descriptor = new window.TabsEditingDescriptor($('.base_wrapper'))
@descriptor = new window.TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id'
describe "save", ->
......@@ -92,4 +88,3 @@ describe "TabsEditingDescriptor special save cases", ->
expect(@tab_0_modelUpdate).toHaveBeenCalled()
data = @descriptor.save().data
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