Skip to content

E
edx-platform
Commit 729d74f1 by Valera Rozuvan Committed by Alexander Kryklia
Options

Fixing issues found by Anton during review of PR 804. 

Changed use of IDs to classes. Simplified lti.js - now simple one function.
Updated tests.
parent c8ea4da2
Showing with 60 additions and 100 deletions
common/lib/xmodule/xmodule/css/lti/lti.scss
div.lti { div.lti {
h2.error_message { // align center
&.hidden { margin: 0 auto;
h3.error_message {
display: block;
}
form.ltiLaunchForm {
display: none;
}
iframe.ltiLaunchFrame {
width: 100%;
height: 800px;
display: none;
border: 0px;
overflow-x: hidden;
}
&.rendered {
iframe.ltiLaunchFrame {
display: block;
}
h3.error_message {
display: none; display: none;
} }
} }
......
common/lib/xmodule/xmodule/js/fixtures/lti.html
<div align="center" id="lti_id" class="lti"> <div id="lti_id" class="lti">
<form <form
action="" action=""
name="ltiLaunchForm" name="ltiLaunchForm"
id="ltiLaunchForm" class="ltiLaunchForm"
method="post" method="post"
target="ltiLaunchFrame" target="ltiLaunchFrame"
encType="application/x-www-form-urlencoded" encType="application/x-www-form-urlencoded"
...@@ -34,11 +34,8 @@ ...@@ -34,11 +34,8 @@
<iframe <iframe
name="ltiLaunchFrame" name="ltiLaunchFrame"
id="ltiLaunchFrame" class="ltiLaunchFrame hidden"
width="0"
height="0"
src="" src=""
style="border: 0px; overflow-x: hidden;"
></iframe> ></iframe>
</div> </div>
common/lib/xmodule/xmodule/js/spec/lti/constructor.js
...@@ -8,26 +8,20 @@ ...@@ -8,26 +8,20 @@
(function () { (function () {
describe('LTI', function () { describe('LTI', function () {
var documentReady = false, var element, errorMessage, frame,
element, errorMessage, frame,
editSettings = false; editSettings = false;
// This function will be executed before each of the it() specs // This function will be executed before each of the it() specs
// in this suite. // in this suite.
beforeEach(function () { beforeEach(function () {
$(document).ready(function () {
documentReady = true;
});
spyOn(LTI, 'init').andCallThrough();
spyOn($.fn, 'submit').andCallThrough(); spyOn($.fn, 'submit').andCallThrough();
loadFixtures('lti.html'); loadFixtures('lti.html');
element = $('#lti_id'); element = $('#lti_id');
errorMessage = element.find('error_message'); errorMessage = element.find('.error_message');
form = element.find('form#ltiLaunchForm'); form = element.find('.ltiLaunchForm');
frame = element.find('iframe#ltiLaunchFrame'); frame = element.find('.ltiLaunchFrame');
// First part of the tests will be running without the settings // First part of the tests will be running without the settings
// filled in. Once we reach the describe() spec // filled in. Once we reach the describe() spec
...@@ -36,32 +30,14 @@ ...@@ -36,32 +30,14 @@
// //
// the variable `editSettings` will be changed to `true`. // the variable `editSettings` will be changed to `true`.
if (editSettings) { if (editSettings) {
form.attr('action', 'http://google.com/'); form.attr('action', 'http://www.example.com/');
} }
LTI(element); LTI(element);
}); });
describe('constructor', function () { describe('constructor', function () {
it('init() is called after document is ready', function () {
waitsFor(
function () {
return documentReady;
},
'The document is ready',
1000
);
runs(function () {
expect(LTI.init).toHaveBeenCalled();
});
});
describe('before settings were filled in', function () { describe('before settings were filled in', function () {
it('init() is called with element', function () {
expect(LTI.init).toHaveBeenCalledWith(element);
});
it( it(
'when URL setting is empty error message is shown', 'when URL setting is empty error message is shown',
function () { function () {
...@@ -70,7 +46,7 @@ ...@@ -70,7 +46,7 @@
}); });
it('when URL setting is empty iframe is hidden', function () { it('when URL setting is empty iframe is hidden', function () {
expect(frame.css('display')).toBe('none'); expect(frame).toHaveClass('hidden');
}); });
}); });
...@@ -95,15 +71,7 @@ ...@@ -95,15 +71,7 @@
}); });
it('when URL setting is filled iframe is shown', function () { it('when URL setting is filled iframe is shown', function () {
expect(frame.css('display')).not.toBe('none'); expect(frame).not.toHaveClass('hidden');
});
it(
'when URL setting is filled iframe is resized',
function () {
expect(frame.width()).toBe(form.parent().width());
expect(frame.height()).toBe(800);
}); });
}); });
}); });
......
common/lib/xmodule/xmodule/js/src/lti/lti.js
window.LTI = (function () { window.LTI = (function () {
var LTI; // Function initialize(element)
// Function LTI()
//
// The LTI module constructor. It will be called by XModule for any
// LTI module DIV that is found on the page.
LTI = function (element) {
$(document).ready(function () {
LTI.init(element);
});
}
// Function init()
// //
// Initialize the LTI iframe. // Initialize the LTI iframe.
LTI.init = function (element) { function initialize(element) {
var form, frame; var form;
// In cms (Studio) the element is already a jQuery object. In lms it is // In cms (Studio) the element is already a jQuery object. In lms it is
// a DOM object. // a DOM object.
...@@ -24,26 +12,15 @@ window.LTI = (function () { ...@@ -24,26 +12,15 @@ window.LTI = (function () {
// function. This will make it a jQuery object if it isn't already so. // function. This will make it a jQuery object if it isn't already so.
element = $(element); element = $(element);
form = element.find('#ltiLaunchForm'); form = element.find('.ltiLaunchForm');
frame = element.find('#ltiLaunchFrame');
// If the Form's action attribute is set (i.e. we can perform a normal // If the Form's action attribute is set (i.e. we can perform a normal
// submit), then we submit the form and make it big enough so that the // submit), then we submit the form and make the frame shown.
// received response can fit in it. Hide the error message, if shown.
if (form.attr('action')) { if (form.attr('action')) {
form.submit(); form.submit();
element.find('.lti').addClass('rendered')
element.find('.error_message').addClass('hidden');
frame.show();
frame.width('100%').height(800);
}
// If no action URL was specified, we show an error message.
else {
frame.hide();
element.find('.error_message').removeClass('hidden');
} }
} }
return LTI; return initialize;
}()); }());
lms/templates/lti.html
<div align="center" id="${element_id}" class="${element_class}"> <div id="${element_id}" class="${element_class}">
## This form will be hidden. Once available on the client, the LTI ## This form will be hidden. Once available on the client, the LTI
## module JavaScript will trigget a "submit" on the form, and the ## module JavaScript will trigget a "submit" on the form, and the
...@@ -6,31 +6,29 @@ ...@@ -6,31 +6,29 @@
<form <form
action="${lti_url}" action="${lti_url}"
name="ltiLaunchForm" name="ltiLaunchForm"
id="ltiLaunchForm" class="ltiLaunchForm"
method="post" method="post"
target="ltiLaunchFrame" target="ltiLaunchFrame"
encType="application/x-www-form-urlencoded" encType="application/x-www-form-urlencoded"
> >
<input name="launch_presentation_return_url" value="" />
<input name="lis_outcome_service_url" value="" />
<input name="lis_result_sourcedid" value="" />
<input name="lti_message_type" value="basic-lti-launch-request" />
<input name="lti_version" value="LTI-1p0" />
<input name="oauth_callback" value="about:blank" />
<input name="oauth_consumer_key" value="${oauth_consumer_key}" />
<input name="oauth_nonce" value="${oauth_nonce}" />
<input name="oauth_signature_method" value="HMAC-SHA1" />
<input name="oauth_timestamp" value="${oauth_timestamp}" />
<input name="oauth_version" value="1.0" />
<input name="user_id" value="default_user_id" />
<input name="oauth_signature" value="${oauth_signature}" />
<input type="hidden" name="launch_presentation_return_url" value=""> <input type="submit" value="Press to Launch" />
<input type="hidden" name="lis_outcome_service_url" value="">
<input type="hidden" name="lis_result_sourcedid" value="">
<input type="hidden" name="lti_message_type" value="basic-lti-launch-request">
<input type="hidden" name="lti_version" value="LTI-1p0">
<input type="hidden" name="oauth_callback" value="about:blank">
<input type="hidden" name="oauth_consumer_key" value="${oauth_consumer_key}"/>
<input type="hidden" name="oauth_nonce" value="${oauth_nonce}"/>
<input type="hidden" name="oauth_signature_method" value="HMAC-SHA1"/>
<input type="hidden" name="oauth_timestamp" value="${oauth_timestamp}"/>
<input type="hidden" name="oauth_version" value="1.0"/>
<input type="hidden" name="user_id" value="default_user_id">
<input type="hidden" name="oauth_signature" value="${oauth_signature}"/>
<input type="submit" value="Press to Launch" style="display: none"/>
</form> </form>
<h3 class="error_message hidden"> <h3 class="error_message">
Please provide LTI url. Click "Edit", and fill in the Please provide LTI url. Click "Edit", and fill in the
required fields. required fields.
</h3> </h3>
...@@ -38,11 +36,8 @@ ...@@ -38,11 +36,8 @@
## The result of the form submit will be rendered here. ## The result of the form submit will be rendered here.
<iframe <iframe
name="ltiLaunchFrame" name="ltiLaunchFrame"
id="ltiLaunchFrame" class="ltiLaunchFrame"
width="0"
height="0"
src="" src=""
style="border: 0px; overflow-x: hidden;"
></iframe> ></iframe>
</div> </div>
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