Merge pull request #22 from open-craft/eugeny/html-labels

Integration tests infrastructure, data and dummy test to verify workbench integration

README.md

@@ -120,5 +120,5 @@ $ ../xblock-sdk/manage.py syncdb --settings=workbench.settings_drag_and_drop_v2
 4. To run the tests, from the xblock-drag-and-drop-v2 repository root:
 
 ```bash
-$ DJANGO_SETTINGS_MODULE="workbench.settings_drag_and_drop_v2" nosetests --rednose --verbose --with-cover --cover-package=drag_and_drop_v2
+$ DJANGO_SETTINGS_MODULE="workbench.settings_drag_and_drop_v2" nosetests --rednose --verbose --with-cover --cover-package=drag_and_drop_v2 --with-django
 ```

tests/integration/test_base.py

+# Imports ###########################################################
+from xml.sax.saxutils import escape
+
+from workbench import scenarios
+from workbench.test.selenium_test import SeleniumTest
+
+# Classes ###########################################################
+
+
+class BaseIntegrationTest(SeleniumTest):
+
+    def setUp(self):
+        super(BaseIntegrationTest, self).setUp()
+
+        # Use test scenarios
+        self.browser.get(self.live_server_url)  # Needed to load tests once
+        scenarios.SCENARIOS.clear()
+
+        # Suzy opens the browser to visit the workbench
+        self.browser.get(self.live_server_url)
+
+        # She knows it's the site by the header
+        header1 = self.browser.find_element_by_css_selector('h1')
+        self.assertEqual(header1.text, 'XBlock scenarios')
+
+    def _make_scenario_xml(self, display_name, question_text, completed):
+        return """
+<vertical_demo>
+    <drag-and-drop-v2 display_name='{display_name}' question_text='{question_text}' weight='1' completed='{completed}'/>
+</vertical_demo>
+    """.format(display_name=escape(display_name), question_text=escape(question_text), completed=completed)
+
+    def _add_scenario(self, identifier, title, xml):
+        scenarios.add_xml_scenario(identifier, title, xml)
+        self.addCleanup(scenarios.remove_scenario, identifier)
+
+    def _get_feedback_message(self):
+        return self._page.find_element_by_css_selector(".feedback .message")
+
+    def go_to_page(self, page_name, css_selector='section.xblock--drag-and-drop'):
+        """
+        Navigate to the page `page_name`, as listed on the workbench home
+        Returns the DOM element on the visited page located by the `css_selector`
+        """
+        self.browser.get(self.live_server_url)
+        self.browser.find_element_by_link_text(page_name).click()
+        return self.browser.find_element_by_css_selector(css_selector)
+
+    def get_element_html(self, element):
+        return element.get_attribute('innerHTML').strip()
+
+    def get_element_classes(self, element):
+        return element.get_attribute('class').split()
\ No newline at end of file

tests/integration/test_interaction.py

+from nose_parameterized import parameterized
+from selenium.webdriver import ActionChains
+from selenium.webdriver.firefox import webdriver
+
+from tests.integration.test_base import BaseIntegrationTest
+
+
+class TestInteraction(BaseIntegrationTest):
+    """
+    Verifying Drag and Drop XBlock rendering against default data - if default data changes this would probably broke
+    """
+    PAGE_TITLE = 'Drag and Drop v2'
+    PAGE_ID = 'drag_and_drop_v2'
+
+    def setUp(self):
+        super(TestInteraction, self).setUp()
+
+        scenario_xml = "<vertical_demo><drag-and-drop-v2/></vertical_demo>"
+        self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
+
+        self.browser.get(self.live_server_url)
+        self._page = self.go_to_page(self.PAGE_TITLE)
+
+    def _get_item_by_value(self, item_value):
+        items_container = self._page.find_element_by_css_selector('ul.items')
+        return items_container.find_elements_by_xpath("//li[@data-value='{item_id}']".format(item_id=item_value))[0]
+
+    def _get_zone_by_id(self, zone_id):
+        zones_container = self._page.find_element_by_css_selector('div.target')
+        return zones_container.find_elements_by_xpath("//div[@data-zone='{zone_id}']".format(zone_id=zone_id))[0]
+
+    def drag_item_to_zone(self, item_value, zone_id):
+        element = self._get_item_by_value(item_value)
+        target = self._get_zone_by_id(zone_id)
+
+        action_chains = ActionChains(self.browser)
+
+        action_chains.drag_and_drop(element, target).perform()
+
+    @parameterized.expand([
+        ("Item A", 0, 'Zone A', "Yes, it's an A"),
+        ("Item B", 1, 'Zone B', "Yes, it's a B"),
+    ])
+    def test_correct_item_positive_feedback(self, _, item_value, zone_id, expected_feedback):
+        self.drag_item_to_zone(item_value, zone_id)
+
+        self.assertEqual(self._page.find_element_by_css_selector(".popup-content").text, expected_feedback)
+
+    @parameterized.expand([
+        ("Item A", 0, 'Zone B', "No, A does not belong here"),
+        ("Item B", 1, 'Zone A', "No, B does not belong here"),
+        ("Item X", 2, 'Zone A', "You silly, there are no zones for X"),
+        ("Item X", 2, 'Zone B', "You silly, there are no zones for X"),
+    ])
+    def test_incorrect_item_negative_feedback(self, _, item_value, zone_id, expected_feedback):
+        self.drag_item_to_zone(item_value, zone_id)
+
+        self.assertEqual(self._page.find_element_by_css_selector(".popup-content").text, expected_feedback)
+
+    def test_final_feedback_and_reset(self):
+        feedback_message = self._get_feedback_message()
+        self.assertEqual(feedback_message.text, "Intro Feed")  # precondition check
+
+        item0_initial_position = self._get_item_by_value(0).location
+        item1_initial_position = self._get_item_by_value(1).location
+
+        self.drag_item_to_zone(0, 'Zone A')
+        self.drag_item_to_zone(1, 'Zone B')
+
+        self.assertEqual(feedback_message.text, "Final Feed")
+
+        reset = self._page.find_element_by_css_selector(".reset-button")
+        reset.click()
+
+        self.assertEqual(feedback_message.text, "Intro Feed")
+
+        self.assertDictEqual(self._get_item_by_value(0).location, item0_initial_position)
+        self.assertDictEqual(self._get_item_by_value(1).location, item1_initial_position)
+
+

tests/integration/test_render.py

+from tests.integration.test_base import BaseIntegrationTest
+
+
+class TestDragAndDropRender(BaseIntegrationTest):
+    """
+    Verifying Drag and Drop XBlock rendering against default data - if default data changes this would probably broke
+    """
+    PAGE_TITLE = 'Drag and Drop v2'
+    PAGE_ID = 'drag_and_drop_v2'
+    
+    def setUp(self):
+        super(TestDragAndDropRender, self).setUp()
+
+        scenario_xml = "<vertical_demo><drag-and-drop-v2/></vertical_demo>"
+        self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
+
+        self.browser.get(self.live_server_url)
+        self._page = self.go_to_page(self.PAGE_TITLE)
+
+    def _get_items(self):
+        items_container = self._page.find_element_by_css_selector('ul.items')
+        return items_container.find_elements_by_css_selector('li.option')
+
+    def _get_zones(self):
+        return self._page.find_elements_by_css_selector(".drag-container .zone")
+
+
+
+    def test_items(self):
+        items = self._get_items()
+
+        self.assertEqual(len(items), 3)
+
+        self.assertEqual(items[0].get_attribute('data-value'), '0')
+        self.assertEqual(items[0].text, 'A')
+        self.assertEqual(items[0].get_attribute('style'), u"width: 190px; height: auto;")
+        self.assertIn('ui-draggable', self.get_element_classes(items[0]))
+
+        self.assertEqual(items[1].get_attribute('data-value'), '1')
+        self.assertEqual(items[1].text, 'B')
+        self.assertEqual(items[1].get_attribute('style'), u"width: 190px; height: auto;")
+        self.assertIn('ui-draggable', self.get_element_classes(items[1]))
+
+        self.assertEqual(items[2].get_attribute('data-value'), '2')
+        self.assertEqual(items[2].text, 'X')
+        self.assertEqual(items[2].get_attribute('style'), u"width: 100px; height: 100px;")
+        self.assertIn('ui-draggable', self.get_element_classes(items[2]))
+
+    def test_zones(self):
+        zones = self._get_zones()
+
+        self.assertEqual(len(zones), 2)
+
+        self.assertEqual(zones[0].get_attribute('data-zone'), 'Zone A')
+        self.assertEqual(zones[0].get_attribute('style'), u"top: 200px; left: 120px; width: 200px; height: 100px;")
+        self.assertIn('ui-droppable', self.get_element_classes(zones[0]))
+
+        self.assertEqual(zones[1].get_attribute('data-zone'), 'Zone B')
+        self.assertEqual(zones[1].get_attribute('style'), u"top: 360px; left: 120px; width: 200px; height: 100px;")
+        self.assertIn('ui-droppable', self.get_element_classes(zones[1]))
+
+    def test_feedback(self):
+        feedback_message = self._get_feedback_message()
+
+        self.assertEqual(feedback_message.text, "Intro Feed")
\ No newline at end of file

tests/integration/test_title_and_question.py

+from xml.sax.saxutils import escape
+from nose_parameterized import parameterized
+from tests.integration.test_base import BaseIntegrationTest
+from workbench import scenarios
+
+__author__ = 'john'
+
+
+class TestDragAndDropTitleAndQuestion(BaseIntegrationTest):
+    @parameterized.expand([
+        ('plain1', 'title1', 'question1'),
+        ('plain2', 'title2', 'question2'),
+        ('html1', 'title with <i>HTML</i>', 'Question with <i>HTML</i>'),
+        ('html2', '<span style="color:red">Title: HTML?</span>', '<span style="color:red">Span question</span>'),
+    ])
+    def test_title_and_question_parameters(self, _, display_name, question_text):
+        const_page_name = 'Test block parameters'
+        const_page_id = 'test_block_title'
+        scenario_xml = self._make_scenario_xml(display_name, question_text, False)
+        scenarios.add_xml_scenario(const_page_id, const_page_name, scenario_xml)
+        self.addCleanup(scenarios.remove_scenario, const_page_id)
+
+        page = self.go_to_page(const_page_name)
+        problem_header = page.find_element_by_css_selector('h2.problem-header')
+        self.assertEqual(self.get_element_html(problem_header), display_name)
+
+        question = page.find_element_by_css_selector('section.problem > p')
+        self.assertEqual(self.get_element_html(question), question_text)

tests/requirements.txt

@@ -2,5 +2,6 @@ mock
 nose
 coverage
 rednose
+nose-parameterized
 
 -e .