Rc/2014 04 14

CHANGELOG.rst

@@ -5,8 +5,14 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Transcript translations should be displayed in their source language (BLD-935).
+
 Blades: Create an upload modal for video transcript translations (BLD-751).
 
+Studio and LMS: Upgrade version of TinyMCE to 4.0.20. Switch from tabbed Visual/HTML
+Editor for HTML modules to showing the code editor as a plugin within TinyMCE (triggered
+from toolbar). STUD-1422
+
 Studio: Add ability to reorder Pages and hide the Wiki page. STUD-1375
 
 Blades: Added template for iFrames. BLD-611.

cms/djangoapps/contentstore/features/common.py

@@ -318,19 +318,23 @@ def i_am_shown_a_notification(step):
     assert world.is_css_present('.wrapper-prompt')
 
 
-def type_in_codemirror(index, text):
+def type_in_codemirror(index, text, find_prefix="$"):
     script = """
-    var cm = $('div.CodeMirror:eq({})').get(0).CodeMirror;
+    var cm = {find_prefix}('div.CodeMirror:eq({index})').get(0).CodeMirror;
     cm.getInputField().focus();
     cm.setValue(arguments[0]);
-    cm.getInputField().blur();""".format(index)
+    cm.getInputField().blur();""".format(index=index, find_prefix=find_prefix)
     world.browser.driver.execute_script(script, str(text))
     world.wait_for_ajax_complete()
 
-def get_codemirror_value(index=0):
-    return world.browser.driver.execute_script("""
-        return $('div.CodeMirror:eq({})').get(0).CodeMirror.getValue();
-        """.format(index))
+
+def get_codemirror_value(index=0, find_prefix="$"):
+    return world.browser.driver.execute_script(
+        """
+        return {find_prefix}('div.CodeMirror:eq({index})').get(0).CodeMirror.getValue();
+        """.format(index=index, find_prefix=find_prefix)
+    )
+
 
 
 def attach_file(filename, sub_path):

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

@@ -22,6 +22,50 @@ Feature: CMS.HTML Editor
 
   Scenario: TinyMCE image plugin sets urls correctly
     Given I have created a Blank HTML Page
-    When I edit the page and select the Visual Editor
-    And I add an image with a static link via the Image Plugin Icon
-    Then the image static link is rewritten to translate the path
+    When I edit the page
+    And I add an image with static link "/static/image.jpg" via the Image Plugin Icon
+    Then the src link is rewritten to "c4x/MITx/999/asset/image.jpg"
+    And the link is shown as "/static/image.jpg" in the Image Plugin
+
+  Scenario: TinyMCE link plugin sets urls correctly
+    Given I have created a Blank HTML Page
+    When I edit the page
+    And I add a link with static link "/static/image.jpg" via the Link Plugin Icon
+    Then the href link is rewritten to "c4x/MITx/999/asset/image.jpg"
+    And the link is shown as "/static/image.jpg" in the Link Plugin
+
+  Scenario: TinyMCE and CodeMirror preserve style tags
+    Given I have created a Blank HTML Page
+    When I edit the page
+    And type "<p class='title'>pages</p><style><!-- .title { color: red; } --></style>" in the code editor and press OK
+    And I save the page
+    Then the page text contains:
+      """
+      <p class="title">pages</p>
+      <style><!--
+      .title { color: red; }
+      --></style>
+      """
+
+  Scenario: TinyMCE toolbar buttons are as expected
+    Given I have created a Blank HTML Page
+    When I edit the page
+    Then the expected toolbar buttons are displayed
+
+  Scenario: Static links are converted when switching between code editor and WYSIWYG views
+    Given I have created a Blank HTML Page
+    When I edit the page
+    And type "<img src="/static/image.jpg">" in the code editor and press OK
+    Then the src link is rewritten to "c4x/MITx/999/asset/image.jpg"
+    And the code editor displays "<p><img src="/static/image.jpg" alt="" /></p>"
+
+  Scenario: Code format toolbar button wraps text with code tags
+    Given I have created a Blank HTML Page
+    When I edit the page
+    And I set the text to "display as code" and I select the text
+    And I select the code toolbar button
+    And I save the page
+    Then the page text contains:
+      """
+      <p><code>display as code</code></p>
+      """

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

@@ -2,7 +2,10 @@
 # pylint: disable=C0111
 
 from lettuce import world, step
-from nose.tools import assert_in  # pylint: disable=no-name-in-module
+from nose.tools import assert_in, assert_equal  # pylint: disable=no-name-in-module
+from common import type_in_codemirror, get_codemirror_value
+
+CODEMIRROR_SELECTOR_PREFIX = "$('iframe').contents().find"
 
 
 @step('I have created a Blank HTML Page$')
@@ -31,41 +34,168 @@ def i_created_etext_in_latex(step):
     )
 
 
-@step('I edit the page and select the Visual Editor')
+@step('I edit the page$')
 def i_click_on_edit_icon(step):
     world.edit_component()
-    world.wait_for(lambda _driver: world.css_visible('a.visual-tab'))
-    world.css_click('a.visual-tab')
 
 
-@step('I add an image with a static link via the Image Plugin Icon')
-def i_click_on_image_plugin_icon(step):
-    # Click on image plugin button
-    world.wait_for(lambda _driver: world.css_visible('a.mce_image'))
-    world.css_click('a.mce_image')
+@step('I add an image with static link "(.*)" via the Image Plugin Icon$')
+def i_click_on_image_plugin_icon(step, path):
+    use_plugin(
+        '.mce-i-image',
+        lambda: world.css_fill('.mce-textbox', path, 0)
+    )
+
+
+@step('the link is shown as "(.*)" in the Image Plugin$')
+def check_link_in_image_plugin(step, path):
+    use_plugin(
+        '.mce-i-image',
+        lambda: assert_equal(path, world.css_find('.mce-textbox')[0].value)
+    )
+
+
+@step('I add a link with static link "(.*)" via the Link Plugin Icon$')
+def i_click_on_link_plugin_icon(step, path):
+    def fill_in_link_fields():
+        world.css_fill('.mce-textbox', path, 0)
+        world.css_fill('.mce-textbox', 'picture', 1)
+
+    use_plugin('.mce-i-link', fill_in_link_fields)
 
-    # Change to the non-modal TinyMCE Image window
-    # keeping parent window so we can go back to it.
-    parent_window = world.browser.current_window
-    for window in world.browser.windows:
 
-        world.browser.switch_to_window(window)  # Switch to a different window
-        if world.browser.title == 'Insert/Edit Image':
+@step('the link is shown as "(.*)" in the Link Plugin$')
+def check_link_in_link_plugin(step, path):
+    # Ensure caret position is within the link just created.
+    script = """
+    var editor = tinyMCE.activeEditor;
+    editor.selection.select(editor.dom.select('a')[0]);"""
+    world.browser.driver.execute_script(script)
+    world.wait_for_ajax_complete()
+
+    use_plugin(
+        '.mce-i-link',
+        lambda: assert_equal(path, world.css_find('.mce-textbox')[0].value)
+    )
+
+
+@step('type "(.*)" in the code editor and press OK$')
+def type_in_codemirror_plugin(step, text):
+    use_code_editor(
+        lambda: type_in_codemirror(0, text, CODEMIRROR_SELECTOR_PREFIX)
+    )
+
+
+@step('and the code editor displays "(.*)"$')
+def verify_code_editor_text(step, text):
+    use_code_editor(
+        lambda: assert_equal(text, get_codemirror_value(0, CODEMIRROR_SELECTOR_PREFIX))
+    )
 
-            # This is the Image window so find the url text box,
-            # enter text in it then hit Insert button.
-            url_elem = world.browser.find_by_id("src")
-            url_elem.fill('/static/image.jpg')
-            world.browser.find_by_id('insert').click()
 
-    world.browser.switch_to_window(parent_window)  # Switch back to the main window
+def use_plugin(button_class, action):
+    # Click on plugin button
+    world.css_click(button_class)
+    perform_action_in_plugin(action)
 
 
-@step('the image static link is rewritten to translate the path')
-def image_static_link_is_rewritten(step):
+def use_code_editor(action):
+    # Click on plugin button
+    buttons = world.css_find('div.mce-widget>button')
+
+    code_editor = [button for button in buttons if button.text == 'HTML']
+    assert_equal(1, len(code_editor))
+    code_editor[0].click()
+
+    perform_action_in_plugin(action)
+
+
+def perform_action_in_plugin(action):
+     # Wait for the plugin window to open.
+    world.wait_for_visible('.mce-window')
+
+    # Trigger the action
+    action()
+
+    # Click OK
+    world.css_click('.mce-primary')
+
+
+@step('I save the page$')
+def i_click_on_save(step):
+    world.save_component(step)
+
+
+@step('the page text contains:')
+def check_page_text(step):
+    assert_in(step.multiline, world.css_find('.xmodule_HtmlModule').html)
+
+
+@step('the src link is rewritten to "(.*)"$')
+def image_static_link_is_rewritten(step, path):
     # Find the TinyMCE iframe within the main window
     with world.browser.get_iframe('mce_0_ifr') as tinymce:
         image = tinymce.find_by_tag('img').first
+        assert_in(path, image['src'])
 
-        # Test onExecCommandHandler set the url to absolute.
-        assert_in('c4x/MITx/999/asset/image.jpg', image['src'])
+
+@step('the href link is rewritten to "(.*)"$')
+def link_static_link_is_rewritten(step, path):
+    # Find the TinyMCE iframe within the main window
+    with world.browser.get_iframe('mce_0_ifr') as tinymce:
+        link = tinymce.find_by_tag('a').first
+        assert_in(path, link['href'])
+
+
+@step('the expected toolbar buttons are displayed$')
+def check_toolbar_buttons(step):
+    dropdowns = world.css_find('.mce-listbox')
+    assert_equal(2, len(dropdowns))
+
+    # Format dropdown
+    assert_equal('Paragraph', dropdowns[0].text)
+    # Font dropdown
+    assert_equal('Font Family', dropdowns[1].text)
+
+    buttons = world.css_find('.mce-ico')
+
+    # Note that the code editor icon is not present because we are now showing text instead of an icon.
+    # However, other test points user the code editor, so we have already verified its presence.
+    expected_buttons = [
+        'bold',
+        'italic',
+        'underline',
+        'forecolor',
+        # This is our custom "code style" button, which uses an image instead of a class.
+        'none',
+        'bullist',
+        'numlist',
+        'outdent',
+        'indent',
+        'blockquote',
+        'link',
+        'unlink',
+        'image'
+    ]
+
+    assert_equal(len(expected_buttons), len(buttons))
+
+    for index, button in enumerate(expected_buttons):
+        class_names = buttons[index]._element.get_attribute('class')
+        assert_equal("mce-ico mce-i-" + button, class_names)
+
+
+@step('I set the text to "(.*)" and I select the text$')
+def set_text_and_select(step, text):
+    script = """
+    var editor = tinyMCE.activeEditor;
+    editor.setContent(arguments[0]);
+    editor.selection.select(editor.dom.select('p')[0]);"""
+    world.browser.driver.execute_script(script, str(text))
+    world.wait_for_ajax_complete()
+
+
+@step('I select the code toolbar button$')
+def select_code_button(step):
+    # This is our custom "code style" button. It uses an image instead of a class.
+    world.css_click(".mce-i-none")

cms/djangoapps/contentstore/features/transcripts.py

@@ -201,7 +201,8 @@ def upload_file(_step, file_name):
 
 @step('I see "([^"]*)" text in the captions')
 def check_text_in_the_captions(_step, text):
-    world.wait_for(lambda _: world.css_text('.subtitles'))
+    world.wait_for_present('.video.is-captions-rendered')
+    world.wait_for(lambda _: world.css_text('.subtitles'), timeout=30)
     actual_text = world.css_text('.subtitles')
     assert (text in actual_text)
 

cms/djangoapps/contentstore/features/upload.py

@@ -26,8 +26,7 @@ def go_to_uploads(_step):
 
 @step(u'I upload the( test)? file "([^"]*)"$')
 def upload_file(_step, is_test_file, file_name):
-    upload_css = 'a.upload-button'
-    world.css_click(upload_css)
+    world.click_link('Upload New File')
 
     if not is_test_file:
         _write_test_file(file_name, "test file")

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

@@ -10,7 +10,12 @@
 from common import upload_file, attach_file
 
 TEST_ROOT = settings.COMMON_TEST_DATA_ROOT
-LANGUAGES = {l[0]: l[1] for l in settings.ALL_LANGUAGES}
+
+NATIVE_LANGUAGES = {lang: label for lang, label in settings.LANGUAGES if len(lang) == 2}
+LANGUAGES = {
+    lang: NATIVE_LANGUAGES.get(lang, display)
+    for lang, display in settings.ALL_LANGUAGES
+}
 
 TRANSLATION_BUTTONS = {
     'add': '.metadata-video-translations .create-action',

cms/djangoapps/contentstore/features/video.feature

@@ -5,16 +5,16 @@ Feature: CMS Video Component
   # 1
   Scenario: YouTube stub server proxies YouTube API correctly
     Given youtube stub server proxies YouTube API
-    Given I have created a Video component
+    And I have created a Video component
     Then I can see video button "play"
     And I click video button "play"
     Then I can see video button "pause"
 
   # 2
   Scenario: YouTube stub server can block YouTube API
     Given youtube stub server blocks YouTube API
-    Given I have created a Video component
-    Given We explicitly wait for YouTube API to not load
+    And I have created a Video component
+    And I wait for "3" seconds
     Then I do not see video button "play"
 
   # 3