Improvements after review feedback from T.K.:

- remove surplus file test_data_a11y_borders.json
- interpolate into test_data_a11y_borders.json
- remove _get_border_style from test_render.py
- check top, bottom, left, right properties
- do not pass parameters which have defaults
- add DARK_GREY
- add tests for zone labels, hidden and shown

tests/integration/data/test_data_a11y.json

@@ -59,5 +59,7 @@
     "start": "Drag the items onto the image above.",
     "finish": "Good work! You have completed this drag and drop exercise."
   },
-  "targetImgDescription": "This describes the target image"
+  "targetImgDescription": "This describes the target image",
+  "displayLabels": {display_labels_value},
+  "displayBorders": {display_borders_value},
 }

tests/integration/data/test_data_a11y_borders.json

-{
-  "zones": [
-    {
-      "index": 1,
-      "title": "Zone 1",
-      "description": "This describes zone 1",
-      "height": 178,
-      "width": 196,
-      "y": "30",
-      "x": "160",
-      "id": "zone-1"
-    },
-    {
-      "index": 2,
-      "title": "Zone 2",
-      "description": "This describes zone 2",
-      "height": 140,
-      "width": 340,
-      "y": "210",
-      "x": "86",
-      "id": "zone-2"
-    }
-  ],
-  "items": [
-    {
-      "displayName": "1",
-      "imageURL": "https://placehold.it/100x100",
-      "imageDescription": "This describes the background image of item 1",
-      "feedback": {
-        "incorrect": "No, 1 does not belong here",
-        "correct": "Yes, 1 goes here"
-      },
-      "zone": "Zone 1",
-      "id": 0
-    },
-    {
-      "displayName": "2",
-      "imageURL": "https://placehold.it/100x100",
-      "imageDescription": "This describes the background image of item 2",
-      "feedback": {
-        "incorrect": "No, 2 does not belong here",
-        "correct": "Yes, 2 goes here"
-      },
-      "zone": "Zone 2",
-      "id": 1
-    },
-    {
-      "displayName": "X",
-      "imageURL": "",
-      "feedback": {
-        "incorrect": "You silly, there are no zones for X",
-        "correct": ""
-      },
-      "zone": "none",
-      "id": 2
-    }
-  ],
-  "feedback": {
-    "start": "Drag the items onto the image above.",
-    "finish": "Good work! You have completed this drag and drop exercise."
-  },
-  "targetImgDescription": "This describes the target image",
-  "displayBorders": true,
-  "displayLabels": true
-}

tests/integration/test_render.py

@@ -11,6 +11,7 @@ class Colors(object):
     BLUE = 'rgb(29, 82, 128)'
     GREY = 'rgb(237, 237, 237)'
     CORAL = '#ff7f50'
+    DARK_GREY = 'rgb(86, 86, 86)'  # == #565656 in CSS-land
     CORNFLOWERBLUE = 'cornflowerblue'
 
     @classmethod
@@ -32,22 +33,22 @@ class TestDragAndDropRender(BaseIntegrationTest):
     PAGE_TITLE = 'Drag and Drop v2'
     PAGE_ID = 'drag_and_drop_v2'
     ITEM_PROPERTIES = [{'text': '1'}, {'text': '2'}, {'text': 'X'}, ]
+    SIDES = ['Top', 'Bottom', 'Left', 'Right']
 
-    def load_scenario(self, item_background_color="", item_text_color="", borders=False):
-        if borders:
-            json = "integration/data/test_data_a11y_borders.json"
-        else:
-            json = "integration/data/test_data_a11y.json"
+    def load_scenario(self, item_background_color="", item_text_color="", zone_labels=False, zone_borders=False):
+        json = load_resource("integration/data/test_data_a11y.json")
+        json = json.replace('{display_labels_value}', 'true' if zone_labels else 'false')
+        json = json.replace('{display_borders_value}', 'true' if zone_borders else 'false')
         scenario_xml = """
             <vertical_demo>
                 <drag-and-drop-v2 item_background_color='{item_background_color}'
                                   item_text_color='{item_text_color}'
-                                  data='{data}' />
+                                  data='{json}' />
             </vertical_demo>
         """.format(
             item_background_color=item_background_color,
             item_text_color=item_text_color,
-            data=load_resource(json)
+            json=json
         )
         self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
 
@@ -61,10 +62,6 @@ class TestDragAndDropRender(BaseIntegrationTest):
             query = 'return $("{selector}").get(0).style.{style}'
         return self.browser.execute_script(query.format(selector=selector, style=style))
 
-    def _get_border_style(self, elt, style):
-        query = 'return window.getComputedStyle(document.getElementById("{elt}"), null).getPropertyValue("{style}")'
-        return self.browser.execute_script(query.format(elt=elt, 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']}
@@ -203,20 +200,35 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.assertTrue(bg_image.get_attribute("src").endswith(image_path))
         self.assertEqual(bg_image.get_attribute("alt"), 'This describes the target image')
 
-    def test_borders_inactive(self):
+    def test_borders_hidden(self):
         self.load_scenario()
         zones = self._get_zones()
         for index in range(len(zones)):
-            elt = 'zone-{}'.format(index + 1)
-            # Firefox does not provide a single "border-style", so we check "border-top-style"
-            self.assertEqual(self._get_border_style(elt, 'border-top-style'), 'none')
-            self.assertEqual(self._get_border_style(elt, 'border-top-width'), '0px')
+            z = '#zone-{}'.format(index + 1)
+            for s in self.SIDES:
+                self.assertEqual(self._get_style(z, 'border{}Width'.format(s), True), '0px')
+                self.assertEqual(self._get_style(z, 'border{}Style'.format(s), True), 'none')
 
-    def test_borders_active(self):
-        self.load_scenario("", "", True)
+    def test_borders_shown(self):
+        self.load_scenario(zone_borders=True)
         zones = self._get_zones()
         for index in range(len(zones)):
-            elt = 'zone-{}'.format(index + 1)
-            self.assertEqual(self._get_border_style(elt, 'border-top-style'), 'dotted')
-            self.assertEqual(self._get_border_style(elt, 'border-top-width'), '1px')
-            self.assertEqual(self._get_border_style(elt, 'border-top-color'), 'rgb(86, 86, 86)')  # == #565656
+            z = '#zone-{}'.format(index + 1)
+            for s in self.SIDES:
+                self.assertEqual(self._get_style(z, 'border{}Width'.format(s), True), '1px')
+                self.assertEqual(self._get_style(z, 'border{}Style'.format(s), True), 'dotted')
+                self.assertEqual(self._get_style(z, 'border{}Color'.format(s), True), Colors.DARK_GREY)
+
+    def test_labels_hidden(self):
+        self.load_scenario()
+        zones = self._get_zones()
+        for zone in zones:
+            zone_name = zone.find_element_by_css_selector('p.zone-name')
+            self.assertEqual(zone_name.get_attribute('class'), 'zone-name sr')
+
+    def test_labels_shown(self):
+        self.load_scenario(zone_labels=True)
+        zones = self._get_zones()
+        for zone in zones:
+            zone_name = zone.find_element_by_css_selector('p.zone-name')
+            self.assertEqual(zone_name.get_attribute('class'), 'zone-name')