Merge pull request #29 from edx-solutions/hotfix-custom-bg-image

Add tests for background image

drag_and_drop_v2/public/js/view.js

@@ -88,7 +88,9 @@
                             h('div.close.icon-remove-sign.fa-times-circle'),
                             h('p.popup-content', {innerHTML: ctx.popup_html})
                         ]),
-                        h('div.target-img', {style: {backgroundImage: 'url(' + ctx.target_img_src + ')'}},
+                        h('div.target-img', {style: {backgroundImage: ctx.target_img_src ?
+                                                                          'url(' + ctx.target_img_src + ')' :
+                                                                          undefined}},
                           renderCollection(zoneTemplate, ctx.zones, ctx))
                     ]),
                     h('div.clear')

tests/integration/data/test_html_data.json

@@ -74,5 +74,6 @@
   "feedback": {
     "start": "Intro <i>Feed</i>",
     "finish": "Final <b>Feed</b>"
-  }
+  },
+  "targetImg": "https://www.edx.org/sites/default/files/theme/edx-logo-header.png"
 }

tests/integration/test_custom_data_render.py

@@ -24,3 +24,8 @@ class TestCustomDataDragAndDropRendering(BaseIntegrationTest):
         self.assertIn('<i>B</i>',  self.get_element_html(items[1]))
         self.assertIn('<input class="input" type="text">',  self.get_element_html(items[1]))
         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))

tests/integration/test_render.py

@@ -7,7 +7,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
     """
     PAGE_TITLE = 'Drag and Drop v2'
     PAGE_ID = 'drag_and_drop_v2'
-    
+
     def setUp(self):
         super(TestDragAndDropRender, self).setUp()
 
@@ -60,3 +60,8 @@ class TestDragAndDropRender(BaseIntegrationTest):
         feedback_message = self._get_feedback_message()
 
         self.assertEqual(feedback_message.text, "Intro Feed")
+
+    def test_background_image(self):
+        bg_image = self.browser.execute_script('return jQuery(".target-img").css("background-image")')
+        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))