Skip to content

X
xblock-drag-and-drop-v2
Commit d7f98f5a by Braden MacDonald
Options

Fix integration tests

parent 362da63d
Showing with 67 additions and 95 deletions
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))
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment