diff --git a/lms/static/js/fixtures/courseware/course_outline.html b/lms/static/js/fixtures/courseware/course_outline.html new file mode 100644 index 0000000000..45e64be1f3 --- /dev/null +++ b/lms/static/js/fixtures/courseware/course_outline.html @@ -0,0 +1,124 @@ +
+
    +
  1. +
    + + Introduction +
    +
      +
    1. + + Demo Course Overview + +
      2. +
    +
    2. +
  2. +
    + + Example Week 1: Getting Started +
    +
      +
    1. + + Lesson 1 - Getting Started + +
      2. +
    2. + + Homework - Question Styles + +
      3. +
    +
    3. +
  3. +
    + + Example Week 2: Get Interactive +
    +
      +
    1. + + Lesson 2 - Let's Get Interactive! + +
      2. +
    2. + + Homework - Labs and Demos + +
      3. +
    3. + + Homework - Essays + +
      4. +
    +
    4. +
  4. +
    + + Example Week 3: Be Social +
    +
      +
    1. + + Lesson 3 - Be Social + +
      2. +
    2. + + Homework - Find Your Study Buddy + +
      3. +
    3. + + More Ways to Connect + +
      4. +
    +
    5. +
  5. +
    + + About Exams and Certificates +
    +
      +
    1. + + edX Exams + +
      2. +
    +
    6. +
  6. +
    + + holding section +
    +
      +
    1. + + New Subsection + +
      2. +
    +
    7. +
+
diff --git a/lms/static/js/spec/courseware/course_outline_factory_spec.js b/lms/static/js/spec/courseware/course_outline_factory_spec.js new file mode 100644 index 0000000000..3fde909c3e --- /dev/null +++ b/lms/static/js/spec/courseware/course_outline_factory_spec.js @@ -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(); + }); + }); + }); + }); + } +); diff --git a/lms/static/lms/js/spec/main.js b/lms/static/lms/js/spec/main.js index 5759cc11b1..11ecbffcba 100644 --- a/lms/static/lms/js/spec/main.js +++ b/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', diff --git a/lms/templates/courseware/course_outline.html b/lms/templates/courseware/course_outline.html new file mode 100644 index 0000000000..c4d7d95533 --- /dev/null +++ b/lms/templates/courseware/course_outline.html @@ -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'); + + +
+
    + % for section in blocks.get('children') or []: +
  1. +
    + + ${ section['display_name'] } +
    +
      + % for subsection in section.get('children') or []: +
    1. + + ${ subsection['display_name'] } + +
      2. + % endfor +
    +
    2. + % endfor +
+