Skip to content

E
edx-platform
Commit aff541ec by Brian Jacobel Committed by Diana Huang
Options

Start JS specs for key listeners on course outline page

parent acc3a045
Showing with 254 additions and 0 deletions
lms/static/js/fixtures/courseware/course_outline.html 0 → 100644
<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>
lms/static/js/spec/courseware/course_outline_factory_spec.js 0 → 100644
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();
});
});
});
});
}
);
lms/static/lms/js/spec/main.js
......@@ -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',
......
lms/templates/courseware/course_outline.html 0 → 100644
## 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>
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