Tests for raw editor and minor wording changes.

cms/djangoapps/contentstore/features/component.feature

@@ -20,11 +20,13 @@ Feature: CMS.Component Adding
            | Text                    |
            | Announcement            |
            | Zooming Image           |
+           | Raw HTML                |
        Then I see HTML components in this order:
            | Component               |
            | Text                    |
            | Announcement            |
            | Zooming Image           |
+           | Raw HTML                |
 
     Scenario: I can add Latex HTML components
        Given I am in Studio editing a new unit

cms/djangoapps/contentstore/features/component.py

@@ -63,6 +63,8 @@ def see_a_multi_step_component(step, category):
                     '<h2>ZOOMING DIAGRAMS</h2>',
                 'E-text Written in LaTeX':
                     '<h2>Example: E-text page</h2>',
+                'Raw HTML':
+                    '<p>This template is similar to the Text template. The only difference is',
             }
             actual_html = world.css_html(selector, index=idx)
             assert_in(html_matcher[step_hash['Component']], actual_html)

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

@@ -89,3 +89,42 @@ Feature: CMS.HTML Editor
       """
       <p><code>display as code</code></p>
       """
+
+  Scenario: Raw HTML component does not change text
+    Given I have created a raw HTML component
+    When I edit the page
+    And type "<li>zzzz<ol>" into the Raw Editor
+    And I save the page
+    Then the page text contains:
+      """
+      <li>zzzz<ol>
+      """
+    And I edit the page
+    Then the Raw Editor contains exactly:
+      """
+      <li>zzzz<ol>
+      """
+
+  Scenario: Can switch from Visual Editor to Raw
+    Given I have created a Blank HTML Page
+    When I edit the component and select the Raw Editor
+    And I save the page
+    When I edit the page
+    And type "fancy html" into the Raw Editor
+    And I save the page
+    Then the page text contains:
+      """
+      fancy html
+      """
+
+  Scenario: Can switch from Raw Editor to Visual
+    Given I have created a raw HTML component
+    And I edit the component and select the Visual Editor
+    And I save the page
+    When I edit the page
+    And type "less fancy html" in the code editor and press OK
+    And I save the page
+    Then the page text contains:
+      """
+      less fancy html
+      """

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

@@ -2,7 +2,7 @@
 # pylint: disable=C0111
 
 from lettuce import world, step
-from nose.tools import assert_in, assert_equal  # pylint: disable=no-name-in-module
+from nose.tools import assert_in, assert_false, assert_true, assert_equal  # pylint: disable=no-name-in-module
 from common import type_in_codemirror, get_codemirror_value
 
 CODEMIRROR_SELECTOR_PREFIX = "$('iframe').contents().find"
@@ -18,6 +18,16 @@ def i_created_blank_html_page(step):
     )
 
 
+@step('I have created a raw HTML component')
+def i_created_raw_html(step):
+    world.create_course_with_unit()
+    world.create_component_instance(
+        step=step,
+        category='html',
+        component_type='Raw HTML'
+    )
+
+
 @step('I see the HTML component settings$')
 def i_see_only_the_html_display_name(step):
     world.verify_all_setting_entries(
@@ -86,6 +96,10 @@ def check_link_in_link_plugin(step, path):
 
 @step('type "(.*)" in the code editor and press OK$')
 def type_in_codemirror_plugin(step, text):
+    # Verify that raw code editor is not visible.
+    assert_true(world.css_has_class('.CodeMirror', 'is-inactive'))
+    # Verify that TinyMCE editor is present
+    assert_true(world.is_css_present('.tiny-mce'))
     use_code_editor(
         lambda: type_in_codemirror(0, text, CODEMIRROR_SELECTOR_PREFIX)
     )
@@ -136,6 +150,11 @@ def check_page_text(step):
     assert_in(step.multiline, world.css_find('.xmodule_HtmlModule').html)
 
 
+@step('the Raw Editor contains exactly:')
+def check_raw_editor_text(step):
+    assert_equal(step.multiline, get_codemirror_value(0))
+
+
 @step('the src link is rewritten to "(.*)"$')
 def image_static_link_is_rewritten(step, path):
     # Find the TinyMCE iframe within the main window
@@ -204,3 +223,18 @@ def set_text_and_select(step, text):
 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")
+
+
+@step('type "(.*)" into the Raw Editor$')
+def type_in_raw_editor(step, text):
+    # Verify that CodeMirror editor is not hidden
+    assert_false(world.css_has_class('.CodeMirror', 'is-inactive'))
+    # Verify that TinyMCE Editor is not present
+    assert_true(world.is_css_not_present('.tiny-mce'))
+    type_in_codemirror(0, text)
+
+
+@step('I edit the component and select the (Raw|Visual) Editor$')
+def select_editor(step, editor):
+    world.edit_component_and_select_settings()
+    world.browser.select('Editor', editor)

common/lib/xmodule/xmodule/html_module.py

@@ -37,7 +37,7 @@ class HtmlFields(object):
         scope=Scope.settings
     )
     editor = String(
-        help="Select Visual to enter content and have the editor automatically create the HTML. Select Raw to edit HTML directly. If you change this setting, you must save the component, then re-open it for editing.",
+        help="Select Visual to enter content and have the editor automatically create the HTML. Select Raw to edit HTML directly. If you change this setting, you must save the component and then re-open it for editing.",
         display_name="Editor",
         default="visual",
         values=[

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -144,9 +144,9 @@ class @HTMLEditingDescriptor
     text = undefined
     if @editor_choice == 'visual'
       visualEditor = @getVisualEditor()
-      content = visualEditor.getContent({format:"raw", no_events: 1})
-      if @starting_content != content
-        text = rewriteStaticLinks(content, @base_asset_url, '/static/')
+      raw_content = visualEditor.getContent({format:"raw", no_events: 1})
+      if @starting_content != raw_content
+        text = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
 
     if text == undefined
       text = @advanced_editor.getValue()

common/lib/xmodule/xmodule/templates/html/raw.yaml

@@ -4,11 +4,10 @@ metadata:
     editor: raw
 data: |
       <p>This template is similar to the Text template. The only difference is 
-      that this template opens in a raw HTML editor rather than in the Visual 
-      editor. Raw HTML is most useful when you need to use script and span tags 
-      to format your content.</p>
+      that this template opens in the Raw HTML editor rather than in the Visual
+      editor.</p>
 
-      <p>The raw HTML editor saves your HTML exactly as you enter it. 
+      <p>The Raw HTML editor saves your HTML exactly as you enter it.
       You can switch to the Visual editor by clicking the Settings tab and 
       changing the Editor setting to Visual. Note, however, that some of your 
       HTML may be modified when you save the component if you switch to the