Function test_script_mount_unmount

src/py/reactpy/tests/test_html.py:9–46

(display: DisplayFixture)

async def test_script_mount_unmount(display: DisplayFixture):
    toggle_is_mounted = Ref()

    @component
    def Root():
        is_mounted, toggle_is_mounted.current = use_toggle(True)
        return html.div(
            html.div({"id": "mount-state", "data_value": False}),
            HasScript() if is_mounted else html.div(),
        )

    @component
    def HasScript():
        return html.script(
            """() => {
                const mapping = {"false": false, "true": true};
                const mountStateEl = document.getElementById("mount-state");
                mountStateEl.setAttribute(
                    "data-value", !mapping[mountStateEl.getAttribute("data-value")]);
                return () => mountStateEl.setAttribute(
                    "data-value", !mapping[mountStateEl.getAttribute("data-value")]);
            }"""
        )

    await display.show(Root)

    mount_state = await display.page.wait_for_selector("#mount-state", state="attached")
    poll_mount_state = poll(mount_state.get_attribute, "data-value")

    await poll_mount_state.until_equals("true")

    toggle_is_mounted.current()

    await poll_mount_state.until_equals("false")

    toggle_is_mounted.current()

    await poll_mount_state.until_equals("true")


async def test_script_re_run_on_content_change(display: DisplayFixture):