fix reply/return to annotation links

STUD-1629

cms/djangoapps/contentstore/features/component_settings_editor_helpers.py

@@ -10,21 +10,24 @@ from cms.envs.common import FEATURES
 
 
 @world.absorb
-def create_component_instance(step, category, component_type=None, is_advanced=False):
+def create_component_instance(step, category, component_type=None, is_advanced=False, advanced_component=None):
     """
     Create a new component in a Unit.
 
     Parameters
     ----------
-    category: component type (discussion, html, problem, video)
+    category: component type (discussion, html, problem, video, advanced)
     component_type: for components with multiple templates, the link text in the menu
     is_advanced: for problems, is the desired component under the advanced menu?
+    advanced_component: for advanced components, the related value of policy key 'advanced_modules'
     """
-    assert_in(category, ['problem', 'html', 'video', 'discussion'])
+    assert_in(category, ['advanced', 'problem', 'html', 'video', 'discussion'])
 
     component_button_css = 'span.large-{}-icon'.format(category.lower())
     if category == 'problem':
         module_css = 'div.xmodule_CapaModule'
+    elif category == 'advanced':
+        module_css = 'div.xmodule_{}Module'.format(advanced_component.title())
     else:
         module_css = 'div.xmodule_{}Module'.format(category.title())
 
@@ -32,13 +35,13 @@ def create_component_instance(step, category, component_type=None, is_advanced=F
     # assert that one more was added.
     # We need to use world.browser.find_by_css instead of world.css_find
     # because it's ok if there are currently zero of them.
-    module_count_before =  len(world.browser.find_by_css(module_css))
+    module_count_before = len(world.browser.find_by_css(module_css))
 
     # Disable the jquery animation for the transition to the menus.
     world.disable_jquery_animations()
     world.css_click(component_button_css)
 
-    if category in ('problem', 'html'):
+    if category in ('problem', 'html', 'advanced'):
         world.wait_for_invisible(component_button_css)
         click_component_from_menu(category, component_type, is_advanced)
 

cms/djangoapps/contentstore/features/problem-editor.feature

@@ -118,6 +118,16 @@ Feature: CMS.Problem Editor
     And I can edit the problem
     Then I can see cheatsheet
 
+  Scenario: Reply on Annotation and Return to Annotation link works for Annotation problem
+    Given I have created a unit with advanced module "annotatable"
+    And I have created an advanced component "Annotation" of type "annotatable"
+    And I have created an advanced problem of type "Blank Advanced Problem"
+    And I edit first blank advanced problem for annotation response
+    When I mouseover on "annotatable-span"
+    Then I can see Reply to Annotation link
+    And I see that page has scrolled "down" when I click on "annotatable-reply" link
+    And I see that page has scrolled "up" when I click on "annotation-return" link
+
   # Disabled 11/13/2013 after failing in master
   # The screenshot showed that the LaTeX editor had the text "hi",
   # but Selenium timed out waiting for the text to appear.

cms/djangoapps/contentstore/features/problem-editor.py

@@ -16,12 +16,34 @@ SHOW_ANSWER = "Show Answer"
 TIMER_BETWEEN_ATTEMPTS = "Timer Between Attempts"
 MATLAB_API_KEY = "Matlab API key"
 
+
 @step('I have created a Blank Common Problem$')
 def i_created_blank_common_problem(step):
     world.create_course_with_unit()
     step.given("I have created another Blank Common Problem")
 
 
+@step('I have created a unit with advanced module "(.*)"$')
+def i_created_unit_with_advanced_module(step, advanced_module):
+    world.create_course_with_unit()
+
+    url = world.browser.url
+    step.given("I select the Advanced Settings")
+    change_value(step, 'advanced_modules', '["{}"]'.format(advanced_module))
+    world.visit(url)
+    world.wait_for_xmodule()
+
+
+@step('I have created an advanced component "(.*)" of type "(.*)"')
+def i_create_new_advanced_component(step, component_type, advanced_component):
+    world.create_component_instance(
+        step=step,
+        category='advanced',
+        component_type=component_type,
+        advanced_component=advanced_component
+    )
+
+
 @step('I have created another Blank Common Problem$')
 def i_create_new_common_problem(step):
     world.create_component_instance(
@@ -31,6 +53,40 @@ def i_create_new_common_problem(step):
     )
 
 
+@step('when I mouseover on "(.*)"')
+def i_mouseover_on_html_component(step, element_class):
+    action_css = '.{}'.format(element_class)
+    world.trigger_event(action_css, event='mouseover')
+
+
+@step(u'I can see Reply to Annotation link$')
+def i_see_reply_to_annotation_link(_step):
+    css_selector = 'a.annotatable-reply'
+    world.wait_for_visible(css_selector)
+
+
+@step(u'I see that page has scrolled "(.*)" when I click on "(.*)" link$')
+def i_see_annotation_problem_page_scrolls(_step, scroll_direction, link_css):
+    scroll_js = "$(window).scrollTop();"
+    scroll_height_before = world.browser.evaluate_script(scroll_js)
+    world.css_click("a.{}".format(link_css))
+    scroll_height_after = world.browser.evaluate_script(scroll_js)
+    if scroll_direction == "up":
+        assert scroll_height_after < scroll_height_before
+    elif scroll_direction == "down":
+        assert scroll_height_after > scroll_height_before
+
+
+@step('I have created an advanced problem of type "(.*)"$')
+def i_create_new_advanced_problem(step, component_type):
+    world.create_component_instance(
+        step=step,
+        category='problem',
+        component_type=component_type,
+        is_advanced=True
+    )
+
+
 @step('I edit and select Settings$')
 def i_edit_and_select_settings(_step):
     world.edit_component_and_select_settings()
@@ -247,6 +303,21 @@ def i_can_edit_problem(_step):
     world.edit_component()
 
 
+@step(u'I edit first blank advanced problem for annotation response$')
+def i_edit_blank_problem_for_annotation_response(_step):
+    edit_css = """$('.component-header:contains("Blank Advanced Problem")').parent().find('a.edit-button').click()"""
+    text = """
+        <problem>
+            <annotationresponse>
+                <annotationinput><text>Text of annotation</text></annotationinput>
+            </annotationresponse>
+        </problem>"""
+    world.browser.execute_script(edit_css)
+    world.wait_for_ajax_complete()
+    type_in_codemirror(0, text)
+    world.save_component()
+
+
 @step(u'I can see cheatsheet$')
 def verify_cheat_sheet_displaying(_step):
     world.css_click("a.cheatsheet-toggle")

common/lib/capa/capa/templates/annotationinput.html

 <form class="annotation-input">
-<div class="script_placeholder" data-src="/static/js/capa/annotationinput.js"/>
+<div class="script_placeholder" data-src="${STATIC_URL}js/capa/annotationinput.js"/>
 
 <div class="annotation-header">
     ${title}

common/lib/xmodule/xmodule/js/fixtures/annotatable.html

@@ -9,7 +9,7 @@
                 <a class="annotatable-toggle annotatable-toggle-instructions expanded" href="javascript:void(0)">Collapse Instructions</a>
             </div>
             <div class="annotatable-section-body annotatable-instructions">
-                <div><p>The main goal of this exercise is to start practicing the art of slow reading.</p>
+                <div><p>The main goal of this exercise is to start practicing the art of slow reading.</p></div>
             </div>
         </div>
         <div class="annotatable-section">

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -12,9 +12,9 @@ class @Annotatable
 
     # these selectors are for responding to events from the annotation capa problem type
     problemXModuleSelector:     '.xmodule_CapaModule'
-    problemSelector:            'section.problem'
-    problemInputSelector:       'section.problem .annotation-input'
-    problemReturnSelector:      'section.problem .annotation-return'
+    problemSelector:            'div.problem'
+    problemInputSelector:       'div.problem .annotation-input'
+    problemReturnSelector:      'div.problem .annotation-return'
 
     constructor: (el) ->
         console.log 'loaded Annotatable' if @_debug