test_element.py 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. import pytest
  2. from selenium.webdriver.common.by import By
  3. from nicegui import background_tasks, ui
  4. from nicegui.testing import Screen
  5. def test_classes(screen: Screen):
  6. label = ui.label('Some label')
  7. def assert_classes(classes: str) -> None:
  8. assert screen.selenium.find_element(By.XPATH,
  9. f'//*[normalize-space(@class)="{classes}" and text()="Some label"]')
  10. screen.open('/')
  11. screen.wait(0.5)
  12. assert_classes('')
  13. label.classes('one')
  14. assert_classes('one')
  15. label.classes('one')
  16. assert_classes('one')
  17. label.classes('two three')
  18. assert_classes('one two three')
  19. label.classes(remove='two')
  20. assert_classes('one three')
  21. label.classes(replace='four')
  22. assert_classes('four')
  23. def test_style_parsing(nicegui_reset_globals):
  24. # pylint: disable=protected-access
  25. assert ui.element._parse_style(None) == {} # pylint: disable=use-implicit-booleaness-not-comparison
  26. assert ui.element._parse_style('color: red; background-color: blue') == {'color': 'red', 'background-color': 'blue'}
  27. assert ui.element._parse_style('width:12em;height:34.5em') == {'width': '12em', 'height': '34.5em'}
  28. assert ui.element._parse_style('transform: translate(120.0px, 50%)') == {'transform': 'translate(120.0px, 50%)'}
  29. assert ui.element._parse_style('box-shadow: 0 0 0.5em #1976d2') == {'box-shadow': '0 0 0.5em #1976d2'}
  30. def test_props_parsing(nicegui_reset_globals):
  31. # pylint: disable=protected-access
  32. assert ui.element._parse_props(None) == {} # pylint: disable=use-implicit-booleaness-not-comparison
  33. assert ui.element._parse_props('one two=1 three="abc def"') == {'one': True, 'two': '1', 'three': 'abc def'}
  34. assert ui.element._parse_props('loading percentage=12.5') == {'loading': True, 'percentage': '12.5'}
  35. assert ui.element._parse_props('size=50%') == {'size': '50%'}
  36. assert ui.element._parse_props('href=http://192.168.42.100/') == {'href': 'http://192.168.42.100/'}
  37. assert ui.element._parse_props('hint="Your \\"given\\" name"') == {'hint': 'Your "given" name'}
  38. assert ui.element._parse_props('input-style="{ color: #ff0000 }"') == {'input-style': '{ color: #ff0000 }'}
  39. assert ui.element._parse_props('accept=.jpeg,.jpg,.png') == {'accept': '.jpeg,.jpg,.png'}
  40. assert ui.element._parse_props('empty=""') == {'empty': ''}
  41. assert ui.element._parse_props("empty=''") == {'empty': ''}
  42. assert ui.element._parse_props("""hint='Your \\"given\\" name'""") == {'hint': 'Your "given" name'}
  43. assert ui.element._parse_props("one two=1 three='abc def'") == {'one': True, 'two': '1', 'three': 'abc def'}
  44. assert ui.element._parse_props('''three='abc def' four="hhh jjj"''') == {'three': 'abc def', 'four': 'hhh jjj', }
  45. assert ui.element._parse_props('''foo="quote'quote"''') == {'foo': "quote'quote"}
  46. assert ui.element._parse_props("""foo='quote"quote'""") == {'foo': 'quote"quote'}
  47. assert ui.element._parse_props("""foo="single '" bar='double "'""") == {'foo': "single '", 'bar': 'double "'}
  48. assert ui.element._parse_props("""foo="single '" bar='double \\"'""") == {'foo': "single '", 'bar': 'double "'}
  49. assert ui.element._parse_props("input-style='{ color: #ff0000 }'") == {'input-style': '{ color: #ff0000 }'}
  50. assert ui.element._parse_props("""input-style='{ myquote: "quote" }'""") == {'input-style': '{ myquote: "quote" }'}
  51. assert ui.element._parse_props('filename=foo=bar.txt') == {'filename': 'foo=bar.txt'}
  52. def test_style(screen: Screen):
  53. label = ui.label('Some label')
  54. def assert_style(style: str) -> None:
  55. assert screen.selenium.find_element(By.XPATH, f'//*[normalize-space(@style)="{style}" and text()="Some label"]')
  56. screen.open('/')
  57. screen.wait(0.5)
  58. assert_style('')
  59. label.style('color: red')
  60. assert_style('color: red;')
  61. label.style('color: red')
  62. assert_style('color: red;')
  63. label.style('color: blue')
  64. assert_style('color: blue;')
  65. label.style('font-weight: bold')
  66. assert_style('color: blue; font-weight: bold;')
  67. label.style(remove='color: blue')
  68. assert_style('font-weight: bold;')
  69. label.style(replace='text-decoration: underline')
  70. assert_style('text-decoration: underline;')
  71. label.style('color: blue;')
  72. assert_style('text-decoration: underline; color: blue;')
  73. def test_props(screen: Screen):
  74. input_ = ui.input()
  75. def assert_props(*props: str) -> None:
  76. class_conditions = [f'contains(@class, "q-field--{prop}")' for prop in props]
  77. assert screen.selenium.find_element(By.XPATH, f'//label[{" and ".join(class_conditions)}]')
  78. screen.open('/')
  79. screen.wait(0.5)
  80. assert_props('standard')
  81. input_.props('dark')
  82. assert_props('standard', 'dark')
  83. input_.props('dark')
  84. assert_props('standard', 'dark')
  85. input_.props(remove='dark')
  86. assert_props('standard')
  87. def test_move(screen: Screen):
  88. with ui.card() as a:
  89. ui.label('A')
  90. x = ui.label('X')
  91. with ui.card() as b:
  92. ui.label('B')
  93. ui.button('Move X to A', on_click=lambda: x.move(a))
  94. ui.button('Move X to B', on_click=lambda: x.move(b))
  95. ui.button('Move X to top', on_click=lambda: x.move(target_index=0))
  96. screen.open('/')
  97. assert screen.find('A').location['y'] < screen.find('X').location['y'] < screen.find('B').location['y']
  98. screen.click('Move X to B')
  99. screen.wait(0.5)
  100. assert screen.find('A').location['y'] < screen.find('B').location['y'] < screen.find('X').location['y']
  101. screen.click('Move X to A')
  102. screen.wait(0.5)
  103. assert screen.find('A').location['y'] < screen.find('X').location['y'] < screen.find('B').location['y']
  104. screen.click('Move X to top')
  105. screen.wait(0.5)
  106. assert screen.find('X').location['y'] < screen.find('A').location['y'] < screen.find('B').location['y']
  107. def test_move_slots(screen: Screen):
  108. with ui.expansion(value=True) as a:
  109. with a.add_slot('header'):
  110. ui.label('A')
  111. x = ui.label('X')
  112. with ui.expansion(value=True) as b:
  113. with b.add_slot('header'):
  114. ui.label('B')
  115. ui.button('Move X to header', on_click=lambda: x.move(target_slot='header'))
  116. ui.button('Move X to B', on_click=lambda: x.move(b))
  117. ui.button('Move X to top', on_click=lambda: x.move(target_index=0))
  118. screen.open('/')
  119. assert screen.find('A').location['y'] < screen.find('X').location['y'], 'X is in A.default'
  120. screen.click('Move X to header')
  121. screen.wait(0.5)
  122. assert screen.find('A').location['y'] == screen.find('X').location['y'], 'X is in A.header'
  123. screen.click('Move X to top')
  124. screen.wait(0.5)
  125. assert screen.find('A').location['y'] < screen.find('X').location['y'], 'X is in A.default'
  126. screen.click('Move X to B')
  127. screen.wait(0.5)
  128. assert screen.find('B').location['y'] < screen.find('X').location['y'], 'X is in B.default'
  129. def test_xss(screen: Screen):
  130. ui.label('</script><script>alert(1)</script>')
  131. ui.label('<b>Bold 1</b>, `code`, copy&paste, multi\nline')
  132. ui.button('Button', on_click=lambda: (
  133. ui.label('</script><script>alert(2)</script>'),
  134. ui.label('<b>Bold 2</b>, `code`, copy&paste, multi\nline'),
  135. ))
  136. screen.open('/')
  137. screen.click('Button')
  138. screen.should_contain('</script><script>alert(1)</script>')
  139. screen.should_contain('</script><script>alert(2)</script>')
  140. screen.should_contain('<b>Bold 1</b>, `code`, copy&paste, multi\nline')
  141. screen.should_contain('<b>Bold 2</b>, `code`, copy&paste, multi\nline')
  142. def test_default_props(nicegui_reset_globals):
  143. ui.button.default_props('rounded outline')
  144. button_a = ui.button('Button A')
  145. button_b = ui.button('Button B')
  146. assert button_a._props.get('rounded') is True, 'default props are set'
  147. assert button_a._props.get('outline') is True
  148. assert button_b._props.get('rounded') is True
  149. assert button_b._props.get('outline') is True
  150. ui.button.default_props(remove='outline')
  151. button_c = ui.button('Button C')
  152. assert button_c._props.get('outline') is None, '"outline" prop was removed'
  153. assert button_c._props.get('rounded') is True, 'other props are still there'
  154. ui.input.default_props('filled')
  155. input_a = ui.input()
  156. assert input_a._props.get('filled') is True
  157. assert input_a._props.get('rounded') is None, 'default props of ui.button do not affect ui.input'
  158. class MyButton(ui.button):
  159. pass
  160. MyButton.default_props('flat')
  161. button_d = MyButton()
  162. button_e = ui.button()
  163. assert button_d._props.get('flat') is True
  164. assert button_d._props.get('rounded') is True, 'default props are inherited'
  165. assert button_e._props.get('flat') is None, 'default props of MyButton do not affect ui.button'
  166. assert button_e._props.get('rounded') is True
  167. ui.button.default_props('no-caps').default_props('no-wrap')
  168. button_f = ui.button()
  169. assert button_f._props.get('no-caps') is True
  170. assert button_f._props.get('no-wrap') is True
  171. def test_default_classes(nicegui_reset_globals):
  172. ui.button.default_classes('bg-white text-green')
  173. button_a = ui.button('Button A')
  174. button_b = ui.button('Button B')
  175. assert 'bg-white' in button_a._classes, 'default classes are set'
  176. assert 'text-green' in button_a._classes
  177. assert 'bg-white' in button_b._classes
  178. assert 'text-green' in button_b._classes
  179. ui.button.default_classes(remove='text-green')
  180. button_c = ui.button('Button C')
  181. assert 'text-green' not in button_c._classes, '"text-green" class was removed'
  182. assert 'bg-white' in button_c._classes, 'other classes are still there'
  183. ui.input.default_classes('text-black')
  184. input_a = ui.input()
  185. assert 'text-black' in input_a._classes
  186. assert 'bg-white' not in input_a._classes, 'default classes of ui.button do not affect ui.input'
  187. class MyButton(ui.button):
  188. pass
  189. MyButton.default_classes('w-full')
  190. button_d = MyButton()
  191. button_e = ui.button()
  192. assert 'w-full' in button_d._classes
  193. assert 'bg-white' in button_d._classes, 'default classes are inherited'
  194. assert 'w-full' not in button_e._classes, 'default classes of MyButton do not affect ui.button'
  195. assert 'bg-white' in button_e._classes
  196. ui.button.default_classes('h-40').default_classes('max-h-80')
  197. button_f = ui.button()
  198. assert 'h-40' in button_f._classes
  199. assert 'max-h-80' in button_f._classes
  200. def test_default_style(nicegui_reset_globals):
  201. ui.button.default_style('color: green; font-size: 200%')
  202. button_a = ui.button('Button A')
  203. button_b = ui.button('Button B')
  204. assert button_a._style.get('color') == 'green', 'default style is set'
  205. assert button_a._style.get('font-size') == '200%'
  206. assert button_b._style.get('color') == 'green'
  207. assert button_b._style.get('font-size') == '200%'
  208. ui.button.default_style(remove='color: green')
  209. button_c = ui.button('Button C')
  210. assert button_c._style.get('color') is None, '"color" style was removed'
  211. assert button_c._style.get('font-size') == '200%', 'other style are still there'
  212. ui.input.default_style('font-weight: 300')
  213. input_a = ui.input()
  214. assert input_a._style.get('font-weight') == '300'
  215. assert input_a._style.get('font-size') is None, 'default style of ui.button does not affect ui.input'
  216. class MyButton(ui.button):
  217. pass
  218. MyButton.default_style('font-family: courier')
  219. button_d = MyButton()
  220. button_e = ui.button()
  221. assert button_d._style.get('font-family') == 'courier'
  222. assert button_d._style.get('font-size') == '200%', 'default style is inherited'
  223. assert button_e._style.get('font-family') is None, 'default style of MyButton does not affect ui.button'
  224. assert button_e._style.get('font-size') == '200%'
  225. ui.button.default_style('border: 2px').default_style('padding: 30px')
  226. button_f = ui.button()
  227. assert button_f._style.get('border') == '2px'
  228. assert button_f._style.get('padding') == '30px'
  229. def test_invalid_tags(screen: Screen):
  230. good_tags = ['div', 'div-1', 'DIV', 'däv', 'div_x', '🙂']
  231. bad_tags = ['<div>', 'hi hi', 'hi/ho', 'foo$bar']
  232. for tag in good_tags:
  233. ui.element(tag)
  234. for tag in bad_tags:
  235. with pytest.raises(ValueError):
  236. ui.element(tag)
  237. screen.open('/')
  238. def test_bad_characters(screen: Screen):
  239. ui.label(r'& <test> ` ${foo}')
  240. screen.open('/')
  241. screen.should_contain(r'& <test> ` ${foo}')
  242. def test_update_before_client_connection(screen: Screen):
  243. @ui.page('/')
  244. def page():
  245. label = ui.label('Hello world!')
  246. async def update():
  247. label.text = 'Hello again!'
  248. background_tasks.create(update())
  249. screen.open('/')
  250. screen.should_contain('Hello again!')