From f61421d7fed2ebf0687ffe828573cd805c7a92b5 Mon Sep 17 00:00:00 2001 From: cahrens Date: Wed, 23 Apr 2014 13:25:23 -0400 Subject: [PATCH] Tests for raw editor and minor wording changes. --- .../contentstore/features/component.feature | 2 + .../contentstore/features/component.py | 2 + .../contentstore/features/html-editor.feature | 39 +++++++++++++++++++ .../contentstore/features/html-editor.py | 36 ++++++++++++++++- common/lib/xmodule/xmodule/html_module.py | 2 +- .../xmodule/xmodule/js/src/html/edit.coffee | 6 +-- .../xmodule/xmodule/templates/html/raw.yaml | 7 ++-- 7 files changed, 85 insertions(+), 9 deletions(-) diff --git a/cms/djangoapps/contentstore/features/component.feature b/cms/djangoapps/contentstore/features/component.feature index 90b8a8b843..482a070716 100644 --- a/cms/djangoapps/contentstore/features/component.feature +++ b/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 diff --git a/cms/djangoapps/contentstore/features/component.py b/cms/djangoapps/contentstore/features/component.py index e700c49df6..05598065b5 100644 --- a/cms/djangoapps/contentstore/features/component.py +++ b/cms/djangoapps/contentstore/features/component.py @@ -63,6 +63,8 @@ def see_a_multi_step_component(step, category): '

ZOOMING DIAGRAMS

', 'E-text Written in LaTeX': '

Example: E-text page

', + 'Raw HTML': + '

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) diff --git a/cms/djangoapps/contentstore/features/html-editor.feature b/cms/djangoapps/contentstore/features/html-editor.feature index 31fcd9fd3b..df44d06420 100644 --- a/cms/djangoapps/contentstore/features/html-editor.feature +++ b/cms/djangoapps/contentstore/features/html-editor.feature @@ -89,3 +89,42 @@ Feature: CMS.HTML Editor """

display as code

""" + + Scenario: Raw HTML component does not change text + Given I have created a raw HTML component + When I edit the page + And type "
  • zzzz
      " into the Raw Editor + And I save the page + Then the page text contains: + """ +
    1. zzzz
        + """ + And I edit the page + Then the Raw Editor contains exactly: + """ +
      1. zzzz
          + """ + + 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 + """ diff --git a/cms/djangoapps/contentstore/features/html-editor.py b/cms/djangoapps/contentstore/features/html-editor.py index ad1be7f13f..6baed40eac 100644 --- a/cms/djangoapps/contentstore/features/html-editor.py +++ b/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) diff --git a/common/lib/xmodule/xmodule/html_module.py b/common/lib/xmodule/xmodule/html_module.py index 1a19e1f99e..2b58eaf4d3 100644 --- a/common/lib/xmodule/xmodule/html_module.py +++ b/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=[ diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index 59fbb6f981..e55ad3b787 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/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() diff --git a/common/lib/xmodule/xmodule/templates/html/raw.yaml b/common/lib/xmodule/xmodule/templates/html/raw.yaml index 4f44427b9b..8d4c78ca89 100644 --- a/common/lib/xmodule/xmodule/templates/html/raw.yaml +++ b/common/lib/xmodule/xmodule/templates/html/raw.yaml @@ -4,11 +4,10 @@ metadata: editor: raw data: |

          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.

          + that this template opens in the Raw HTML editor rather than in the Visual + editor.

          -

          The raw HTML editor saves your HTML exactly as you enter it. +

          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