Fix integration tests

drag_and_drop_v2/public/js/drag_and_drop.js

 function DragAndDropBlock(runtime, element, configuration) {
     "use strict";
-    // Set up a mock for gettext if it isn't available in the client runtime:
-    if (!window.gettext) {
-        var gettext = function gettext_stub(string) { return string; };
-    }
 
     var $element = $(element);
     // root: root node managed by the virtual DOM

drag_and_drop_v2/public/js/view.js

 (function(h) {
     "use strict";
+
+    // Set up a mock for gettext if it isn't available in the client runtime:
+    if (!window.gettext) {
+        var gettext = function gettext_stub(string) { return string; };
+    }
+
     var FocusHook = function() {
         if (!(this instanceof FocusHook)) {
             return new FocusHook();

tests/integration/data/test_data.json

@@ -28,11 +28,7 @@
       },
       "zone": "Zone 1",
       "backgroundImage": "",
-      "id": 0,
-      "size": {
-        "width": "190px",
-        "height": "auto"
-      }
+      "id": 0
     },
     {
       "displayName": "2 here",
@@ -43,10 +39,6 @@
       "zone": "Zone 2",
       "backgroundImage": "",
       "id": 1,
-      "size": {
-        "width": "190px",
-        "height": "auto"
-      },
       "inputOptions": {
         "value": 100,
         "margin": 5
@@ -60,17 +52,9 @@
       },
       "zone": "none",
       "backgroundImage": "",
-      "id": 2,
-      "size": {
-        "width": "100px",
-        "height": "100px"
-      }
+      "id": 2
     }
   ],
-  "state": {
-    "items": {},
-    "finished": true
-  },
   "feedback": {
     "start": "Other Intro Feed",
     "finish": "Other Final Feed"

tests/integration/data/test_html_data.json

@@ -5,8 +5,8 @@
       "width": 200,
       "title": "Zone <i>1</i>",
       "height": 100,
-      "y": "200",
-      "x": "100",
+      "y": 200,
+      "x": 100,
       "id": "zone-1"
     },
     {
@@ -28,11 +28,7 @@
       },
       "zone": "Zone <i>1</i>",
       "backgroundImage": "",
-      "id": 0,
-      "size": {
-        "width": "190px",
-        "height": "auto"
-      }
+      "id": 0
     },
     {
       "displayName": "<i>2</i>",
@@ -43,10 +39,6 @@
       "zone": "Zone <b>2</b>",
       "backgroundImage": "",
       "id": 1,
-      "size": {
-        "width": "190px",
-        "height": "auto"
-      },
       "inputOptions": {
         "value": 100,
         "margin": 5
@@ -60,20 +52,12 @@
       },
       "zone": "none",
       "backgroundImage": "",
-      "id": 2,
-      "size": {
-        "width": "100px",
-        "height": "100px"
-      }
+      "id": 2
     }
   ],
-  "state": {
-    "items": {},
-    "finished": true
-  },
   "feedback": {
     "start": "Intro <i>Feed</i>",
     "finish": "Final <b>Feed</b>"
   },
-  "targetImg": "https://www.edx.org/sites/default/files/theme/edx-logo-header.png"
+  "targetImg": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNjAwIiBzdHlsZT0iYmFja2dyb3VuZDogI2VlZjsiPjwvc3ZnPg=="
 }

tests/integration/test_base.py

@@ -21,7 +21,7 @@ class BaseIntegrationTest(SeleniumBaseTest):
 
     def _make_scenario_xml(self, display_name, show_title, question_text, completed=False, show_question_header=True):
         return """
-<vertical_demo>
+            <vertical_demo>
                 <drag-and-drop-v2
                     display_name='{display_name}'
                     show_title='{show_title}'
@@ -30,7 +30,7 @@ class BaseIntegrationTest(SeleniumBaseTest):
                     weight='1'
                     completed='{completed}'
                 />
-</vertical_demo>
+            </vertical_demo>
         """.format(
             display_name=escape(display_name),
             show_title=show_title,
@@ -50,7 +50,7 @@ class BaseIntegrationTest(SeleniumBaseTest):
         self.addCleanup(scenarios.remove_scenario, identifier)
 
     def _get_items(self):
-        items_container = self._page.find_element_by_css_selector('.items')
+        items_container = self._page.find_element_by_css_selector('.item-bank')
         return items_container.find_elements_by_css_selector('.option')
 
     def _get_zones(self):

tests/integration/test_custom_data_render.py

@@ -26,6 +26,9 @@ class TestCustomDataDragAndDropRendering(BaseIntegrationTest):
         self.assertIn('<span style="color:red">X</span>', self.get_element_html(items[2]))
 
     def test_background_image(self):
-        bg_image = self.browser.execute_script('return jQuery(".target-img").css("background-image")')
-        custom_image_url = 'https://www.edx.org/sites/default/files/theme/edx-logo-header.png'
-        self.assertEqual(bg_image, 'url("{}")'.format(custom_image_url))
+        bg_image = self.browser.find_element_by_css_selector(".xblock--drag-and-drop .target-img")
+        custom_image_url = (
+            "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciI"
+            "HdpZHRoPSI4MDAiIGhlaWdodD0iNjAwIiBzdHlsZT0iYmFja2dyb3VuZDogI2VlZjsiPjwvc3ZnPg=="
+        )
+        self.assertEqual(bg_image.get_attribute("src"), custom_image_url)

tests/integration/test_interaction.py

@@ -12,7 +12,7 @@ class ItemDefinition(object):
         self.input = input
 
 
-class InteractionTestFixture(BaseIntegrationTest):
+class InteractionTestFixture(object):
     """
     Verifying Drag and Drop XBlock rendering against default data - if default data changes this would probably broke
     """
@@ -28,8 +28,8 @@ class InteractionTestFixture(BaseIntegrationTest):
     all_zones = ['Zone 1', 'Zone 2']
 
     feedback = {
-        "intro": "Intro Feed",
-        "final": "Final Feed"
+        "intro": "Drag the items onto the image above.",
+        "final": "Good work! You have completed this drag and drop exercise."
     }
 
     def _get_scenario_xml(self):
@@ -54,7 +54,7 @@ class InteractionTestFixture(BaseIntegrationTest):
         self.browser.set_window_size(1024, 800)
 
     def _get_item_by_value(self, item_value):
-        items_container = self._page.find_element_by_css_selector('.items')
+        items_container = self._page.find_element_by_css_selector('.item-bank')
         return items_container.find_elements_by_xpath("//div[@data-value='{item_id}']".format(item_id=item_value))[0]
 
     def _get_zone_by_id(self, zone_id):
@@ -128,7 +128,9 @@ class InteractionTestFixture(BaseIntegrationTest):
         self.assertEqual(self.get_element_html(feedback_message), self.feedback['intro'])  # precondition check
 
         items = self._get_correct_item_for_zone()
-        get_locations = lambda: {item_id: self._get_item_by_value(item_id).location for item_id in items.keys()}
+
+        def get_locations():
+            return {item_id: self._get_item_by_value(item_id).location for item_id in items.keys()}
 
         initial_locations = get_locations()
 
@@ -157,7 +159,7 @@ class InteractionTestFixture(BaseIntegrationTest):
             self.assertDictEqual(locations_after_reset[item_key], initial_locations[item_key])
 
 
-class CustomDataInteractionTest(InteractionTestFixture):
+class CustomDataInteractionTest(InteractionTestFixture, BaseIntegrationTest):
     items_map = {
         0: ItemDefinition(0, 'Zone 1', "Yes 1", "No 1"),
         1: ItemDefinition(1, 'Zone 2', "Yes 2", "No 2", "102"),
@@ -175,7 +177,7 @@ class CustomDataInteractionTest(InteractionTestFixture):
         return self._get_custom_scenario_xml("integration/data/test_data.json")
 
 
-class CustomHtmlDataInteractionTest(InteractionTestFixture):
+class CustomHtmlDataInteractionTest(InteractionTestFixture, BaseIntegrationTest):
     items_map = {
         0: ItemDefinition(0, 'Zone <i>1</i>', "Yes <b>1</b>", "No <b>1</b>"),
         1: ItemDefinition(1, 'Zone <b>2</b>', "Yes <i>2</i>", "No <i>2</i>", "95"),

tests/integration/test_render.py

@@ -19,18 +19,16 @@ class Colors(object):
         elif color == cls.CORNFLOWERBLUE:
             return 'rgb(100, 149, 237)'
 
+
 @ddt
 class TestDragAndDropRender(BaseIntegrationTest):
     """
-    Verifying Drag and Drop XBlock rendering against default data - if default data changes this would probably broke
+    Verifying Drag and Drop XBlock rendering against default data - if default data changes this
+    will probably break.
     """
     PAGE_TITLE = 'Drag and Drop v2'
     PAGE_ID = 'drag_and_drop_v2'
-    ITEM_PROPERTIES = [
-        {'text': '1', 'style_settings': {'width': '190px', 'height': 'auto'}},
-        {'text': '2', 'style_settings': {'width': '190px', 'height': 'auto'}},
-        {'text': 'X', 'style_settings': {'width': '100px', 'height': '100px'}},
-    ]
+    ITEM_PROPERTIES = [{'text': '1'}, {'text': '2'}, {'text': 'X'}, ]
 
     def load_scenario(self, item_background_color="", item_text_color=""):
         scenario_xml = """
@@ -43,22 +41,27 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.browser.get(self.live_server_url)
         self._page = self.go_to_page(self.PAGE_TITLE)
 
-    def _get_style(self, selector, style):
-        return self.browser.execute_script(
-            'return getComputedStyle($("{selector}").get(0)).{style}'.format(selector=selector, style=style)
-        )
-
-    def _test_style(self, element, style_settings, element_type):
-        style = element.get_attribute('style')
-        for style_prop, expected_value in style_settings.items():
-            if style_prop == 'color' or style_prop == 'background-color' and expected_value.startswith('#'):
-                expected_value = Colors.rgb(expected_value)
-            expected = u"{0}: {1}".format(style_prop, expected_value)
-            self.assertIn(expected, style)
-        if element_type == "item":
-            self._test_item_style(element, style_settings, style)
-
-    def _test_item_style(self, item, style_settings, style):
+    def _get_style(self, selector, style, computed=True):
+        if computed:
+            query = 'return getComputedStyle($("{selector}").get(0)).{style}'
+        else:
+            query = 'return $("{selector}").get(0).style.{style}'
+        return self.browser.execute_script(query.format(selector=selector, style=style))
+
+    def _assert_box_percentages(self, selector, left, top, width, height):
+        """ Assert that the element 'selector' has the specified position/size percentages """
+        values = {key: self._get_style(selector, key, False) for key in ['left', 'top', 'width', 'height']}
+        for key in values:
+            self.assertTrue(values[key].endswith('%'))
+            values[key] = float(values[key][:-1])
+        self.assertAlmostEqual(values['left'], left, places=2)
+        self.assertAlmostEqual(values['top'], top, places=2)
+        self.assertAlmostEqual(values['width'], width, places=2)
+        self.assertAlmostEqual(values['height'], height, places=2)
+
+    def _test_item_style(self, item_element, style_settings):
+        item_val = item_element.get_attribute('data-value')
+        style = item_element.get_attribute('style')
         # Check background color
         background_color_property = 'background-color'
         if background_color_property not in style_settings:
@@ -66,18 +69,18 @@ class TestDragAndDropRender(BaseIntegrationTest):
             expected_background_color = Colors.BLUE
         else:
             expected_background_color = Colors.rgb(style_settings['background-color'])
-        background_color = self._get_style('.items .option', 'backgroundColor')
+        background_color = self._get_style('.item-bank .option[data-value='+item_val+']', 'backgroundColor')
         self.assertEquals(background_color, expected_background_color)
 
         # Check text color
         color_property = 'color'
         if color_property not in style_settings:
-            self.assertNotIn(' ' + color_property, style) # Leading space makes sure that
-                                                          # test does not find "color" in "background-color"
+            # Leading space below ensures that test does not find "color" in "background-color"
+            self.assertNotIn(' ' + color_property, style)
             expected_color = Colors.WHITE
         else:
             expected_color = Colors.rgb(style_settings['color'])
-        color = self._get_style('.items .option', 'color')
+        color = self._get_style('.item-bank .option[data-value='+item_val+']', 'color')
         self.assertEquals(color, expected_color)
 
     def test_items(self):
@@ -91,7 +94,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(item.get_attribute('data-value'), str(index))
             self.assertEqual(item.text, self.ITEM_PROPERTIES[index]['text'])
             self.assertIn('ui-draggable', self.get_element_classes(item))
-            self._test_style(item, self.ITEM_PROPERTIES[index]['style_settings'], element_type='item')
+            self._test_item_style(item, {})
 
     @unpack
     @data(
@@ -116,9 +119,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(item.get_attribute('data-value'), str(index))
             self.assertEqual(item.text, self.ITEM_PROPERTIES[index]['text'])
             self.assertIn('ui-draggable', self.get_element_classes(item))
-            self._test_style(
-                item, dict(self.ITEM_PROPERTIES[index]['style_settings'], **color_settings), element_type='item'
-            )
+            self._test_item_style(item, color_settings)
 
     def test_zones(self):
         self.load_scenario()
@@ -129,26 +130,22 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
         self.assertEqual(zones[0].get_attribute('data-zone'), 'Zone 1')
         self.assertIn('ui-droppable', self.get_element_classes(zones[0]))
-        self._test_style(
-            zones[0], {'top': '200px', 'left': '120px', 'width': '200px', 'height': '100px'}, element_type='zone'
-        )
+        self._assert_box_percentages('#zone-1', left=31.1284, top=6.17284, width=38.1323, height=36.6255)
 
         self.assertEqual(zones[1].get_attribute('data-zone'), 'Zone 2')
         self.assertIn('ui-droppable', self.get_element_classes(zones[1]))
-        self._test_style(
-            zones[1], {'top': '360px', 'left': '120px', 'width': '200px', 'height': '100px'}, element_type='zone'
-        )
+        self._assert_box_percentages('#zone-2', left=16.7315, top=43.2099, width=66.1479, height=28.8066)
 
     def test_feedback(self):
         self.load_scenario()
 
         feedback_message = self._get_feedback_message()
 
-        self.assertEqual(feedback_message.text, "Intro Feed")
+        self.assertEqual(feedback_message.text, "Drag the items onto the image above.")
 
     def test_background_image(self):
         self.load_scenario()
 
-        bg_image = self.browser.execute_script('return jQuery(".target-img").css("background-image")')
+        bg_image = self.browser.find_element_by_css_selector(".xblock--drag-and-drop .target-img")
         image_path = '/resource/drag-and-drop-v2/public/img/triangle.png'
-        self.assertEqual(bg_image, 'url("{0}{1}")'.format(self.live_server_url, image_path))
+        self.assertTrue(bg_image.get_attribute("src").endswith(image_path))