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 {
h2.error_message {
&.hidden {
// align center
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;
}
}
......
common/lib/xmodule/xmodule/js/fixtures/lti.html
<div align="center" id="lti_id" class="lti">
<div id="lti_id" class="lti">
<form
action=""
name="ltiLaunchForm"
id="ltiLaunchForm"
class="ltiLaunchForm"
method="post"
target="ltiLaunchFrame"
encType="application/x-www-form-urlencoded"
......@@ -34,11 +34,8 @@
<iframe
name="ltiLaunchFrame"
id="ltiLaunchFrame"
width="0"
height="0"
class="ltiLaunchFrame hidden"
src=""
style="border: 0px; overflow-x: hidden;"
></iframe>
</div>
common/lib/xmodule/xmodule/js/spec/lti/constructor.js
......@@ -8,26 +8,20 @@
(function () {
describe('LTI', function () {
var documentReady = false,
element, errorMessage, frame,
var element, errorMessage, frame,
editSettings = false;
// This function will be executed before each of the it() specs
// in this suite.
beforeEach(function () {
$(document).ready(function () {
documentReady = true;
});
spyOn(LTI, 'init').andCallThrough();
spyOn($.fn, 'submit').andCallThrough();
loadFixtures('lti.html');
element = $('#lti_id');
errorMessage = element.find('error_message');
form = element.find('form#ltiLaunchForm');
frame = element.find('iframe#ltiLaunchFrame');
errorMessage = element.find('.error_message');
form = element.find('.ltiLaunchForm');
frame = element.find('.ltiLaunchFrame');
// First part of the tests will be running without the settings
// filled in. Once we reach the describe() spec
......@@ -36,32 +30,14 @@
//
// the variable `editSettings` will be changed to `true`.
if (editSettings) {
form.attr('action', 'http://google.com/');
form.attr('action', 'http://www.example.com/');
}
LTI(element);
});
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 () {
it('init() is called with element', function () {
expect(LTI.init).toHaveBeenCalledWith(element);
});
it(
'when URL setting is empty error message is shown',
function () {
......@@ -70,7 +46,7 @@
});
it('when URL setting is empty iframe is hidden', function () {
expect(frame.css('display')).toBe('none');
expect(frame).toHaveClass('hidden');
});
});
......@@ -95,15 +71,7 @@
});
it('when URL setting is filled iframe is shown', function () {
expect(frame.css('display')).not.toBe('none');
});
it(
'when URL setting is filled iframe is resized',
function () {
expect(frame.width()).toBe(form.parent().width());
expect(frame.height()).toBe(800);
expect(frame).not.toHaveClass('hidden');
});
});
});
......
common/lib/xmodule/xmodule/js/src/lti/lti.js
window.LTI = (function () {
var LTI;
// 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()
// Function initialize(element)
//
// Initialize the LTI iframe.
LTI.init = function (element) {
var form, frame;
function initialize(element) {
var form;
// In cms (Studio) the element is already a jQuery object. In lms it is
// a DOM object.
......@@ -24,26 +12,15 @@ window.LTI = (function () {
// function. This will make it a jQuery object if it isn't already so.
element = $(element);
form = element.find('#ltiLaunchForm');
frame = element.find('#ltiLaunchFrame');
form = element.find('.ltiLaunchForm');
// 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
// received response can fit in it. Hide the error message, if shown.
// submit), then we submit the form and make the frame shown.
if (form.attr('action')) {
form.submit();
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');
element.find('.lti').addClass('rendered')
}
}
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
## module JavaScript will trigget a "submit" on the form, and the
......@@ -6,31 +6,29 @@
<form
action="${lti_url}"
name="ltiLaunchForm"
id="ltiLaunchForm"
class="ltiLaunchForm"
method="post"
target="ltiLaunchFrame"
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="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"/>
<input type="submit" value="Press to Launch" />
</form>
<h3 class="error_message hidden">
<h3 class="error_message">
Please provide LTI url. Click "Edit", and fill in the
required fields.
</h3>
......@@ -38,11 +36,8 @@
## The result of the form submit will be rendered here.
<iframe
name="ltiLaunchFrame"
id="ltiLaunchFrame"
width="0"
height="0"
class="ltiLaunchFrame"
src=""
style="border: 0px; overflow-x: hidden;"
></iframe>
</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