Merge pull request #236 from edx-solutions/ahtisham/PROD-1099

Render zone title as HTML

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -262,9 +262,11 @@ function DragAndDropTemplates(configuration) {
                 [
                     h(
                         'p',
-                        { className: className },
+                        {
+                            className: className,
+                            innerHTML: gettext(zone.title)
+                        },
                         [
-                            gettext(zone.title),
                             h('span.sr', gettext(', dropzone'))
                         ]
                     ),

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
 
 setup(
     name='xblock-drag-and-drop-v2',
-    version='2.2.7',
+    version='2.2.8',
     description='XBlock - Drag-and-Drop v2',
     packages=['drag_and_drop_v2'],
     install_requires=[

tests/integration/data/test_html_titles_data.json

@@ -0,0 +1,30 @@
+{
+  "zones": [
+    {
+      "width": 200,
+      "title": "Zone <sup>-11</sup>",
+      "height": 100,
+      "y": 200,
+      "x": 100,
+      "uid": "zone-1"
+    }
+  ],
+  "items": [
+    {
+      "displayName": "<b>1</b>",
+      "feedback": {
+        "incorrect": "No <b>1</b>",
+        "correct": "Yes <b>1</b>"
+      },
+      "zone": "zone-1",
+      "imageURL": "",
+      "id": 0
+    }
+  ],
+  "feedback": {
+    "start": "Intro <i>Feed</i>",
+    "finish": "Final <b>Feed</b>"
+  },
+  "targetImg": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNjAwIiBzdHlsZT0iYmFja2dyb3VuZDogI2VlZjsiPjwvc3ZnPg==",
+  "targetImgDescription": "This describes the target image"
+}

tests/integration/test_custom_data_render.py

@@ -24,6 +24,14 @@ def test_items_rendering(self):
         self.assertIn('<i>2</i>', self.get_element_html(items[1]))
         self.assertIn('<span style="color:red">X</span>', self.get_element_html(items[2]))
 
+    def test_html_title_renders_properly(self):
+        """
+        Tests HTML titles are rendered properly
+        """
+        zones = self._get_zones()
+        self.assertEqual(u'Zone\ndroppable\nNo items placed here', zones[0].text)
+        self.assertNotEqual(u'Zone <sup>-1</sup>\ndroppable\nNo items placed here', zones[0].text)
+
     def test_background_image(self):
         bg_image = self.browser.find_element_by_css_selector(".xblock--drag-and-drop .target-img")
         custom_image_url = (
@@ -33,3 +41,27 @@ def test_background_image(self):
         custom_image_description = "This describes the target image"
         self.assertEqual(bg_image.get_attribute("src"), custom_image_url)
         self.assertEqual(bg_image.get_attribute("alt"), custom_image_description)
+
+
+class TestZoneTitleAsHTML(BaseIntegrationTest):
+    PAGE_TITLE = 'Drag and Drop v2'
+    PAGE_ID = 'drag_and_drop_v2'
+
+    def setUp(self):
+        super(TestZoneTitleAsHTML, self).setUp()
+
+        scenario_xml = self._get_custom_scenario_xml("data/test_html_titles_data.json")
+        self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
+
+        self._page = self.go_to_page(self.PAGE_TITLE)
+
+        header1 = self.browser.find_element_by_css_selector('h1')
+        self.assertEqual(header1.text, 'XBlock: ' + self.PAGE_TITLE)
+
+    def test_html_title_renders_properly(self):
+        """
+        Tests HTML titles are rendered properly
+        """
+        zones = self._get_zones()
+        self.assertEqual(u'Zone\ndroppable\nNo items placed here', zones[0].text)
+        self.assertNotEqual(u'Zone <sup>-1</sup>\ndroppable\nNo items placed here', zones[0].text)