Start JS specs for key listeners on course outline page
This commit is contained in:
Brian Jacobel
committed by
Diana Huang
Diana Huang
parent
acc3a045ca
commit
aff541ec12
124
lms/static/js/fixtures/courseware/course_outline.html
Normal file
124
lms/static/js/fixtures/courseware/course_outline.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<section class="course-outline" id="main">
|
||||
<ol class="block-tree" role="tree">
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>Introduction</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction">
|
||||
Demo Course Overview
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>Example Week 1: Getting Started</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5">
|
||||
Lesson 1 - Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions">
|
||||
Homework - Question Styles
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>Example Week 2: Get Interactive</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations">
|
||||
Lesson 2 - Let's Get Interactive!
|
||||
</a>
|
||||
</li>
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations">
|
||||
Homework - Labs and Demos
|
||||
</a>
|
||||
</li>
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e">
|
||||
Homework - Essays
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>Example Week 3: Be Social</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e">
|
||||
Lesson 3 - Be Social
|
||||
</a>
|
||||
</li>
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855">
|
||||
Homework - Find Your Study Buddy
|
||||
</a>
|
||||
</li>
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa">
|
||||
More Ways to Connect
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>About Exams and Certificates</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow">
|
||||
edX Exams
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li aria-expanded="true" class="outline-item focusable" id="block-v1:edX+DemoX+Demo_Course+type@chapter+block@9fca584977d04885bc911ea76a9ef29e"
|
||||
role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>holding section</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@07bc32474380492cb34f76e5f9d9a135"
|
||||
id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@07bc32474380492cb34f76e5f9d9a135">
|
||||
New Subsection
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
86
lms/static/js/spec/courseware/course_outline_factory_spec.js
Normal file
86
lms/static/js/spec/courseware/course_outline_factory_spec.js
Normal file
@@ -0,0 +1,86 @@
|
||||
define([
|
||||
'jquery',
|
||||
'edx-ui-toolkit/js/utils/constants',
|
||||
'js/courseware/course_outline_factory'
|
||||
],
|
||||
function($, constants, CourseOutlineFactory) {
|
||||
'use strict';
|
||||
|
||||
describe('Course outline factory', function() {
|
||||
describe('keyboard listener', function() {
|
||||
var triggerKeyListener = function(current, destination, keyCode) {
|
||||
current.focus();
|
||||
spyOn(destination, 'focus');
|
||||
|
||||
$('.block-tree').trigger($.Event('keydown', {
|
||||
keyCode: keyCode,
|
||||
target: current
|
||||
}));
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
loadFixtures('js/fixtures/courseware/course_outline.html');
|
||||
CourseOutlineFactory('.block-tree');
|
||||
});
|
||||
|
||||
describe('when the down arrow is pressed', function() {
|
||||
it('moves focus from a subsection to the next subsection in the outline', function() {
|
||||
var current = $('a.focusable:contains("Homework - Labs and Demos")')[0],
|
||||
destination = $('a.focusable:contains("Homework - Essays")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.down);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('moves focus to the section list if at a section boundary', function() {
|
||||
var current = $('li.focusable:contains("Example Week 3: Be Social")')[0],
|
||||
destination = $('ol.focusable:contains("Lesson 3 - Be Social")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.down);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('moves focus to the next section if on the last subsection', function() {
|
||||
var current = $('a.focusable:contains("Homework - Essays")')[0],
|
||||
destination = $('li.focusable:contains("Example Week 3: Be Social")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.down);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the up arrow is pressed', function() {
|
||||
it('moves focus from a subsection to the previous subsection in the outline', function() {
|
||||
var current = $('a.focusable:contains("Homework - Essays")')[0],
|
||||
destination = $('a.focusable:contains("Homework - Labs and Demos")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.up);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('moves focus to the section group if at the first subsection', function() {
|
||||
var current = $('a.focusable:contains("Lesson 3 - Be Social")')[0],
|
||||
destination = $('ol.focusable:contains("Lesson 3 - Be Social")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.up);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('moves focus last subsection of the previous section if at a section boundary', function() {
|
||||
var current = $('li.focusable:contains("Example Week 3: Be Social")')[0],
|
||||
destination = $('a.focusable:contains("Homework - Essays")')[0];
|
||||
|
||||
triggerKeyListener(current, destination, constants.keyCodes.up);
|
||||
|
||||
expect(destination.focus).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -694,6 +694,7 @@
|
||||
'js/spec/courseware/course_home_events_spec.js',
|
||||
'js/spec/courseware/link_clicked_events_spec.js',
|
||||
'js/spec/courseware/updates_visibility_spec.js',
|
||||
'js/spec/courseware/course_outline_factory_spec.js',
|
||||
'js/spec/dashboard/donation.js',
|
||||
'js/spec/dashboard/dropdown_spec.js',
|
||||
'js/spec/dashboard/track_events_spec.js',
|
||||
|
||||
43
lms/templates/courseware/course_outline.html
Normal file
43
lms/templates/courseware/course_outline.html
Normal file
@@ -0,0 +1,43 @@
|
||||
## mako
|
||||
|
||||
<%namespace name='static' file='../static_content.html'/>
|
||||
|
||||
<%!
|
||||
from django.utils.translation import ugettext as _
|
||||
%>
|
||||
|
||||
<%static:require_module_async module_name="js/courseware/course_outline_factory" class_name="CourseOutlineFactory">
|
||||
CourseOutlineFactory('.block-tree');
|
||||
</%static:require_module_async>
|
||||
|
||||
<section class="course-outline" id="main">
|
||||
<ol class="block-tree" role="tree">
|
||||
% for section in blocks.get('children') or []:
|
||||
<li
|
||||
aria-expanded="true"
|
||||
class="outline-item focusable"
|
||||
id="${ section['id'] }"
|
||||
role="treeitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="section-name">
|
||||
<span class="icon fa fa-chevron-down" aria-hidden="true"></span>
|
||||
<span>${ section['display_name'] }</span>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
% for subsection in section.get('children') or []:
|
||||
<li role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a
|
||||
class="outline-item focusable"
|
||||
href="${ subsection['lms_web_url'] }"
|
||||
id="${ subsection['id'] }"
|
||||
>
|
||||
${ subsection['display_name'] }
|
||||
</a>
|
||||
</li>
|
||||
% endfor
|
||||
</ol>
|
||||
</li>
|
||||
% endfor
|
||||
</ol>
|
||||
</section>
|
||||
Reference in New Issue
Block a user