Skip to content

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

Basic size/layout integration tests for desktop

parent 87eb855e
Showing with 85 additions and 58 deletions
drag_and_drop_v2/public/css/drag_and_drop.css
......@@ -64,7 +64,7 @@
display: inline-block;
width: auto;
min-width: 4em;
max-width: calc(100% / 3 - 1% - 1% - 20px);
max-width: 30%;
border: 1px solid transparent;
border-radius: 3px;
box-sizing: border-box;
......
tests/integration/test_sizing.py
......@@ -2,6 +2,7 @@ from __future__ import division
import base64
from collections import namedtuple
import os.path
from selenium.webdriver.common.keys import Keys
from xblockutils.resources import ResourceLoader
......@@ -20,13 +21,16 @@ def _svg_to_data_uri(path):
Expectation = namedtuple('Expectation', [
'item_id', 'zone_id', 'width_percent', 'wh_ratio',
'item_id',
'zone_id',
'width_percent', # we expect this item to have this width relative to its container (item bank or image target)
'fixed_width_percent', # we expect this item to have this width (always relative to the target image)
])
Expectation.__new__.__defaults__ = (None,) * len(Expectation._fields) # pylint: disable=protected-access
ZONE_33 = "Zone 1/3" # Title of top zone in each image used in these tests (33% width)
ZONE_50 = "Zone 50%"
ZONE_75 = "Zone 75%"
AUTO_MAX_WIDTH = 29 # Maximum width (as % of the parent container) for items with automatic sizing
AUTO_MAX_WIDTH = 30 # Maximum width (as % of the parent container) for items with automatic sizing
class SizingTests(InteractionTestBase, BaseIntegrationTest):
......@@ -68,72 +72,95 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
return "<vertical_demo>{}\n{}</vertical_demo>".format(upper_block, lower_block)
DESKTOP_EXPECTATIONS = [
# The text 'Auto' with no fixed size specified should be 5-20% wide
Expectation(item_id=0, zone_id=ZONE_33, width_percent=[5, 20]),
# The long text with no fixed size specified should be wrapped at the maximum width
Expectation(item_id=1, zone_id=ZONE_33, width_percent=AUTO_MAX_WIDTH),
# The text items that specify specific widths as a percentage of the background image:
Expectation(item_id=2, zone_id=ZONE_33, fixed_width_percent=33.3),
Expectation(item_id=3, zone_id=ZONE_50, fixed_width_percent=50),
Expectation(item_id=4, zone_id=ZONE_75, fixed_width_percent=75),
# A 400x300 image with automatic sizing should be constrained to the maximum width
Expectation(item_id=5, zone_id=ZONE_50, width_percent=AUTO_MAX_WIDTH),
# A 200x200 image with automatic sizing
Expectation(item_id=6, zone_id=ZONE_50, width_percent=[25, 30]),
# A 400x300 image with a specified width of 50%
Expectation(item_id=7, zone_id=ZONE_50, fixed_width_percent=50),
# A 200x200 image with a specified width of 50%
Expectation(item_id=8, zone_id=ZONE_50, fixed_width_percent=50),
]
def test_wide_image(self):
expectations = [
# The text 'Auto' with no fixed size specified should be 5-20% wide
Expectation(item_id=0, zone_id=ZONE_33, width_percent=[5, 20]),
# The long text with no fixed size specified should be wrapped at the maximum width
Expectation(item_id=1, zone_id=ZONE_33, width_percent=AUTO_MAX_WIDTH),
# The text items that specify specific widths as a percentage of the background image:
Expectation(item_id=2, zone_id=ZONE_33, width_percent=33.3),
Expectation(item_id=3, zone_id=ZONE_33, width_percent=50),
Expectation(item_id=4, zone_id=ZONE_33, width_percent=75),
]
self._check_sizes(0, expectations)
def _check_sizes(self, block_index, expectations):
""" Test the upper, larger, wide image in a desktop-sized window """
self._check_sizes(0, self.DESKTOP_EXPECTATIONS)
def test_square_image(self):
""" Test the lower, smaller, square image in a desktop-sized window """
self._check_sizes(1, self.DESKTOP_EXPECTATIONS, expected_img_width=500)
def _check_width(self, item_description, item, container_width, expected_percent):
"""
Check that item 'item' has a width that is approximately the specified percentage
of container_width, or if expected_percent is a pair of numbers, that it is within
that range.
"""
width_percent = item.size["width"] / container_width * 100
if isinstance(expected_percent, (list, tuple)):
min_expected, max_expected = expected_percent
msg = "{} should have width of {}% - {}%. Actual: {:.2f}%".format(
item_description, min_expected, max_expected, width_percent
)
self.assertGreaterEqual(width_percent, min_expected, msg)
self.assertLessEqual(width_percent, max_expected, msg)
else:
self.assertAlmostEqual(
width_percent, expected_percent, delta=1,
msg="{} should have width of ~{}% (+/- 1%). Actual: {:.2f}%".format(
item_description, expected_percent, width_percent
)
)
def _check_sizes(self, block_index, expectations, expected_img_width=755, is_desktop=True):
""" Test the actual dimensions that each draggable has, in the bank and when placed """
# Check assumptions - the container wrapping this XBlock should be 770px wide
self._switch_to_block(block_index)
self.assertEqual(self._page.size["width"], 770) # self._page is the .xblock--drag-and-drop div
target_img = self._page.find_element_by_css_selector('.target-img')
target_img_width = target_img.size["width"]
self.assertEqual(target_img_width, 755)
item_bank = self._page.find_element_by_css_selector('.item-bank')
item_bank_width = item_bank.size["width"]
self.assertEqual(item_bank_width, 755)
# Test each element, before it is placed.
if is_desktop:
# If using a desktop-sized window, we can know the exact dimensions of various containers:
self.assertEqual(self._page.size["width"], 770) # self._page is the .xblock--drag-and-drop div
self.assertEqual(target_img_width, expected_img_width)
self.assertEqual(item_bank_width, 755)
# Test each element, before it is placed (while it is in the item bank).
for expect in expectations:
item_unplaced = self._get_item_by_value(expect.item_id)
if expect.width_percent is not None:
width_percent = item_unplaced.size["width"] / item_bank_width * 100
if isinstance(expect.width_percent, list):
min_expected, max_expected = expect.width_percent
msg = "Unplaced item {} should have width of {}% - {}%. Actual: {:.2f}%".format(
expect.item_id, min_expected, max_expected, width_percent
)
self.assertGreaterEqual(width_percent, min_expected, msg)
self.assertLessEqual(width_percent, max_expected, msg)
else:
self.assertAlmostEqual(
width_percent, expect.width_percent, delta=1,
msg="Unplaced item {} should have width of ~{}% (+/- 1%). Actual: {:.2f}%".format(
expect.item_id, expect.width_percent, width_percent
)
)
self._check_width(
item_description="Unplaced item {}".format(expect.item_id),
item=self._get_unplaced_item_by_value(expect.item_id),
container_width=item_bank_width,
expected_percent=expect.width_percent,
)
if expect.fixed_width_percent is not None:
self._check_width(
item_description="Unplaced item {} with fixed width".format(expect.item_id),
item=self._get_unplaced_item_by_value(expect.item_id),
container_width=target_img_width,
expected_percent=expect.fixed_width_percent,
)
# Test each element, after it it placed.
for expect in expectations:
self.place_item(expect.item_id, expect.zone_id)
item_placed = self._get_placed_item_by_value(expect.item_id)
if expect.width_percent is not None:
width_percent = item_placed.size["width"] / target_img_width * 100
if isinstance(expect.width_percent, list):
min_expected, max_expected = expect.width_percent
msg = "Placed item {} should have width of {}% - {}%. Actual: {:.2f}%".format(
expect.item_id, min_expected, max_expected, width_percent
)
self.assertGreaterEqual(width_percent, min_expected, msg)
self.assertLessEqual(width_percent, max_expected, msg)
else:
self.assertAlmostEqual(
width_percent, expect.width_percent, delta=1,
msg="Placed item {} should have width of ~{}% (+/- 1%). Actual: {:.2f}%".format(
expect.item_id, expect.width_percent, width_percent
)
)
self.place_item(expect.item_id, expect.zone_id, action_key=Keys.RETURN)
expected_width_percent = expect.fixed_width_percent or expect.width_percent
if expected_width_percent is not None:
self._check_width(
item_description="Placed item {}".format(expect.item_id),
item=self._get_placed_item_by_value(expect.item_id),
container_width=target_img_width,
expected_percent=expected_width_percent,
)
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