revert #886 + add test + misc

Author: rmorshea

src/client/packages/idom-client-react/src/mount.js

@@ -38,6 +38,9 @@ function mountLayoutWithReconnectingWebSocket(
   socket.onopen = (event) => {
     console.info(`IDOM WebSocket connected.`);
 
+    if (mountState.everMounted) {
+      ReactDOM.unmountComponentAtNode(element);
+    }
     _resetOpenMountState(mountState);
 
     mountLayout(element, {

src/idom/testing/common.py

@@ -56,6 +56,7 @@ async def until(
         condition: Callable[[_R], bool],
         timeout: float = IDOM_TESTING_DEFAULT_TIMEOUT.current,
         delay: float = _DEFAULT_POLL_DELAY,
+        description: str = "condition to be true",
     ) -> None:
         """Check that the coroutines result meets a condition within the timeout"""
         started_at = time.time()
@@ -66,7 +67,7 @@ async def until(
                 break
             elif (time.time() - started_at) > timeout:  # pragma: no cover
                 raise TimeoutError(
-                    f"Condition not met within {timeout} "
+                    f"Expected {description} after {timeout} "
                     f"seconds - last value was {result!r}"
                 )
 
@@ -77,7 +78,12 @@ async def until_is(
         delay: float = _DEFAULT_POLL_DELAY,
     ) -> None:
         """Wait until the result is identical to the given value"""
-        return await self.until(lambda left: left is right, timeout, delay)
+        return await self.until(
+            lambda left: left is right,
+            timeout,
+            delay,
+            f"value to be identical to {right!r}",
+        )
 
     async def until_equals(
         self,
@@ -86,7 +92,12 @@ async def until_equals(
         delay: float = _DEFAULT_POLL_DELAY,
     ) -> None:
         """Wait until the result is equal to the given value"""
-        return await self.until(lambda left: left == right, timeout, delay)
+        return await self.until(
+            lambda left: left == right,
+            timeout,
+            delay,
+            f"value to equal {right!r}",
+        )
 
 
 class HookCatcher:

tests/test_client.py

@@ -6,8 +6,9 @@
 
 import idom
 from idom.backend.utils import find_available_port
-from idom.testing import BackendFixture, DisplayFixture
+from idom.testing import BackendFixture, DisplayFixture, poll
 from tests.tooling.common import DEFAULT_TYPE_DELAY
+from tests.tooling.hooks import use_counter
 
 
 JS_DIR = Path(__file__).parent / "js"
@@ -21,45 +22,53 @@ async def test_automatic_reconnect(browser: Browser):
     page.set_default_timeout(10000)
 
     @idom.component
-    def OldComponent():
-        return idom.html.p("old", id="old-component")
+    def SomeComponent():
+        count, incr_count = use_counter(0)
+        return idom.html._(
+            idom.html.p("count", count, data_count=count, id="count"),
+            idom.html.button("incr", on_click=lambda e: incr_count(), id="incr"),
+        )
 
     async with AsyncExitStack() as exit_stack:
         server = await exit_stack.enter_async_context(BackendFixture(port=port))
         display = await exit_stack.enter_async_context(
             DisplayFixture(server, driver=page)
         )
 
-        await display.show(OldComponent)
+        await display.show(SomeComponent)
 
-        # ensure the element is displayed before stopping the server
-        await page.wait_for_selector("#old-component")
-
-    # the server is disconnected but the last view state is still shown
-    await page.wait_for_selector("#old-component")
+        count = await page.wait_for_selector("#count")
+        incr = await page.wait_for_selector("#incr")
 
-    set_state = idom.Ref(None)
+        for i in range(3):
+            assert (await count.get_attribute("data-count")) == str(i)
+            await incr.click()
 
-    @idom.component
-    def NewComponent():
-        state, set_state.current = idom.hooks.use_state(0)
-        return idom.html.p(f"new-{state}", id=f"new-component-{state}")
+    # the server is disconnected but the last view state is still shown
+    await page.wait_for_selector("#count")
 
     async with AsyncExitStack() as exit_stack:
         server = await exit_stack.enter_async_context(BackendFixture(port=port))
         display = await exit_stack.enter_async_context(
             DisplayFixture(server, driver=page)
         )
 
-        await display.show(NewComponent)
+        # use mount instead of show to avoid a page refesh
+        display.backend.mount(SomeComponent)
+
+        async def get_count():
+            # need to refetch element because may unmount on reconnect
+            count = await page.wait_for_selector("#count")
+            return await count.get_attribute("data-count")
+
+        for i in range(3):
+            # it may take a moment for the websocket to reconnect so need to poll
+            await poll(get_count).until_equals(str(i))
 
-        # Note the lack of a page refresh before looking up this new component. The
-        # client should attempt to reconnect and display the new view automatically.
-        await page.wait_for_selector("#new-component-0")
+            # need to refetch element because may unmount on reconnect
+            incr = await page.wait_for_selector("#incr")
 
-        # check that we can resume normal operation
-        set_state.current(1)
-        await page.wait_for_selector("#new-component-1")
+            await incr.click()
 
 
 async def test_style_can_be_changed(display: DisplayFixture):

tests/tooling/hooks.py

@@ -12,4 +12,4 @@ def use_toggle(init=False):
 
 def use_counter(initial_value):
     state, set_state = use_state(initial_value)
-    return state, lambda: set_state(state + 1)
+    return state, lambda: set_state(lambda old: old + 1)