Merge pull request #46 from edx/peter-fogg/single-click-video-creation

Peter fogg/single click video creation

AUTHORS

@@ -74,3 +74,4 @@ Jason Bau <jbau@stanford.edu>
 Frances Botsford <frances@edx.org>
 Jonah Stanley <Jonah_Stanley@brown.edu>
 Slater Victoroff <slater.r.victoroff@gmail.com>
+Peter Fogg <peter.p.fogg@gmail.com>

cms/djangoapps/contentstore/features/common.py

@@ -161,3 +161,11 @@ def i_created_a_video_component(step):
         'i4x://edx/templates/video/default',
         '.xmodule_VideoModule'
     )
+
+
+@step('I have clicked the new unit button')
+def open_new_unit(step):
+    step.given('I have opened a new course section in Studio')
+    step.given('I have added a new subsection')
+    step.given('I expand the first section')
+    world.css_click('a.new-unit-item')

cms/djangoapps/contentstore/features/component_settings_editor_helpers.py

@@ -14,20 +14,28 @@ def create_component_instance(step, component_button_css, instance_id, expected_
 
 @world.absorb
 def click_new_component_button(step, component_button_css):
-    step.given('I have opened a new course section in Studio')
-    step.given('I have added a new subsection')
-    step.given('I expand the first section')
-    world.css_click('a.new-unit-item')
+    step.given('I have clicked the new unit button')
     world.css_click(component_button_css)
 
 
 @world.absorb
 def click_component_from_menu(instance_id, expected_css):
+    """
+    Creates a component from `instance_id`. For components with more
+    than one template, clicks on `elem_css` to create the new
+    component. Components with only one template are created as soon
+    as the user clicks the appropriate button, so we assert that the
+    expected component is present.
+    """
     elem_css = "a[data-location='%s']" % instance_id
-    assert_equal(1, len(world.css_find(elem_css)))
+    elements = world.css_find(elem_css)
+    if len(elements) == 1:  # Multiple templates
         world.css_click(elem_css)
+    else:  # Single template
+        assert(len(filter(lambda ele: ele.has_class('single-template'), elements)) == 1)
     assert_equal(1, len(world.css_find(expected_css)))
 
+
 @world.absorb
 def edit_component_and_select_settings():
     world.css_click('a.edit-button')

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

@@ -11,3 +11,7 @@ Feature: Discussion Component Editor
     And I edit and select Settings
     Then I can modify the display name
     And my display name change is persisted on save
+
+  Scenario: Creating a discussion takes a single click
+    Given I have clicked the new unit button
+    Then creating a discussion takes a single click

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

@@ -21,3 +21,10 @@ def i_see_only_the_settings_and_values(step):
             ['Display Name', "Discussion Tag", True],
             ['Subcategory', "Topic-Level Student-Visible Label", True]
         ])
+
+
+@step('creating a discussion takes a single click')
+def discussion_takes_a_single_click(step):
+    assert(not world.is_css_present('.xmodule_DiscussionModule'))
+    world.css_click("a[data-location='i4x://edx/templates/discussion/Discussion_Tag']")
+    assert(world.is_css_present('.xmodule_DiscussionModule'))

cms/djangoapps/contentstore/features/video.feature

@@ -4,3 +4,7 @@ Feature: Video Component
   Scenario: Autoplay is disabled in Studio
     Given I have created a Video component
     Then when I view the video it does not have autoplay enabled
+
+  Scenario: Creating a video takes a single click
+    Given I have clicked the new unit button
+    Then creating a video takes a single click

cms/djangoapps/contentstore/features/video.py

@@ -9,3 +9,10 @@ from lettuce import world, step
 def does_not_autoplay(step):
     assert world.css_find('.video')[0]['data-autoplay'] == 'False'
     assert world.css_find('.video_control')[0].has_class('play')
+
+
+@step('creating a video takes a single click')
+def video_takes_a_single_click(step):
+    assert(not world.is_css_present('.xmodule_VideoModule'))
+    world.css_click("a[data-location='i4x://edx/templates/video/default']")
+    assert(world.is_css_present('.xmodule_VideoModule'))

cms/djangoapps/contentstore/tests/test_contentstore.py

@@ -77,14 +77,25 @@ class ContentStoreToyCourseTest(ModuleStoreTestCase):
         self.client = Client()
         self.client.login(username=uname, password=password)
 
-    def test_advanced_components_in_edit_unit(self):
+    def check_components_on_page(self, component_types, expected_types):
+        """
+        Ensure that the right types end up on the page.
+
+        component_types is the list of advanced components.
+
+        expected_types is the list of elements that should appear on the page.
+
+        expected_types and component_types should be similar, but not
+        exactly the same -- for example, 'videoalpha' in
+        component_types should cause 'Video Alpha' to be present.
+        """
         store = modulestore('direct')
         import_from_xml(store, 'common/test/data/', ['simple'])
 
         course = store.get_item(Location(['i4x', 'edX', 'simple',
                                           'course', '2012_Fall', None]), depth=None)
 
-        course.advanced_modules = ADVANCED_COMPONENT_TYPES
+        course.advanced_modules = component_types
 
         store.update_metadata(course.location, own_metadata(course))
 
@@ -94,13 +105,20 @@ class ContentStoreToyCourseTest(ModuleStoreTestCase):
         resp = self.client.get(reverse('edit_unit', kwargs={'location': descriptor.location.url()}))
         self.assertEqual(resp.status_code, 200)
 
+        for expected in expected_types:
+            self.assertIn(expected, resp.content)
+
+    def test_advanced_components_in_edit_unit(self):
         # This could be made better, but for now let's just assert that we see the advanced modules mentioned in the page
         # response HTML
-        self.assertIn('Video Alpha', resp.content)
-        self.assertIn('Word cloud', resp.content)
-        self.assertIn('Annotation', resp.content)
-        self.assertIn('Open Ended Response', resp.content)
-        self.assertIn('Peer Grading Interface', resp.content)
+        self.check_components_on_page(ADVANCED_COMPONENT_TYPES, ['Video Alpha',
+                                                                 'Word cloud',
+                                                                 'Annotation',
+                                                                 'Open Ended Response',
+                                                                 'Peer Grading Interface'])
+
+    def test_advanced_components_require_two_clicks(self):
+        self.check_components_on_page(['videoalpha'], ['Video Alpha'])
 
     def check_edit_unit(self, test_course_name):
         import_from_xml(modulestore('direct'), 'common/test/data/', [test_course_name])

cms/static/coffee/src/views/unit.coffee

 class CMS.Views.UnitEdit extends Backbone.View
   events:
-    'click .new-component .new-component-type a': 'showComponentTemplates'
+    'click .new-component .new-component-type a.multiple-templates': 'showComponentTemplates'
+    'click .new-component .new-component-type a.single-template': 'saveNewComponent'
     'click .new-component .cancel-button': 'closeNewComponent'
     'click .new-component-templates .new-component-template a': 'saveNewComponent'
     'click .new-component-templates .cancel-button': 'closeNewComponent'

cms/templates/unit.html

@@ -53,9 +53,15 @@
               <div class="new-component">
                 <h5>Add New Component</h5>
                 <ul class="new-component-type">
-                  % for type in sorted(component_templates.keys()):
+                  % for type, templates in sorted(component_templates.items()):
                   <li>
-                    <a href="#" data-type="${type}">
+                  % if type == 'advanced' or len(templates) > 1:
+                    <a href="#" class="multiple-templates" data-type="${type}">
+                  % else:
+                    % for _, location, _ in templates:
+                    <a href="#" class="single-template" data-type="${type}" data-location="${location}">
+                    % endfor
+                  % endif
                       <span class="large-template-icon large-${type}-icon"></span>
                       <span class="name">${type}</span>
                     </a>
@@ -64,6 +70,7 @@
                 </ul>
               </div>
                 % for type, templates in sorted(component_templates.items()):
+                  % if len(templates) > 1 or type == 'advanced':
                 <div class="new-component-templates new-component-${type}">
                     % if type == "problem":
                       <div class="tab-group tabs">
@@ -108,6 +115,7 @@
                       % endif
                       <a href="#" class="cancel-button">Cancel</a>
                   </div>
+                  % endif
                 % endfor
             </li>
           </ol>