This test was introduced to verify the client does not mutate the model A bug was introduced where the client-side model was mutated and React was relying on the model to have been copied in order to determine if something had changed. See for more info: https://github.com/reactive-pyt
(display: DisplayFixture)
| 71 | |
| 72 | |
| 73 | async def test_style_can_be_changed(display: DisplayFixture): |
| 74 | """This test was introduced to verify the client does not mutate the model |
| 75 | |
| 76 | A bug was introduced where the client-side model was mutated and React was relying |
| 77 | on the model to have been copied in order to determine if something had changed. |
| 78 | |
| 79 | See for more info: https://github.com/reactive-python/reactpy/issues/480 |
| 80 | """ |
| 81 | |
| 82 | @reactpy.component |
| 83 | def ButtonWithChangingColor(): |
| 84 | color_toggle, set_color_toggle = reactpy.hooks.use_state(True) |
| 85 | color = "red" if color_toggle else "blue" |
| 86 | return reactpy.html.button( |
| 87 | { |
| 88 | "id": "my-button", |
| 89 | "on_click": lambda event: set_color_toggle(not color_toggle), |
| 90 | "style": {"background_color": color, "color": "white"}, |
| 91 | }, |
| 92 | f"color: {color}", |
| 93 | ) |
| 94 | |
| 95 | await display.show(ButtonWithChangingColor) |
| 96 | |
| 97 | button = await display.page.wait_for_selector("#my-button") |
| 98 | |
| 99 | await poll(_get_style, button).until( |
| 100 | lambda style: style["background-color"] == "red" |
| 101 | ) |
| 102 | |
| 103 | for color in ["blue", "red"] * 2: |
| 104 | await button.click() |
| 105 | await poll(_get_style, button).until( |
| 106 | lambda style, c=color: style["background-color"] == c |
| 107 | ) |
| 108 | |
| 109 | |
| 110 | async def _get_style(element): |