Merge remote-tracking branch 'origin/main' into masenf/default-color-mode

Author: masenf

integration/test_client_storage.py

@@ -41,6 +41,13 @@ class ClientSideSubState(ClientSideState):
         l3: str = rx.LocalStorage(name="l3")
         l4: str = rx.LocalStorage("l4 default")
 
+        # Sync'd local storage
+        l5: str = rx.LocalStorage(sync=True)
+        l6: str = rx.LocalStorage(sync=True, name="l6")
+
+        def set_l6(self, my_param: str):
+            self.l6 = my_param
+
         def set_var(self):
             setattr(self, self.state_var, self.input_value)
             self.state_var = self.input_value = ""
@@ -93,6 +100,8 @@ def index():
             rx.box(ClientSideSubState.l2, id="l2"),
             rx.box(ClientSideSubState.l3, id="l3"),
             rx.box(ClientSideSubState.l4, id="l4"),
+            rx.box(ClientSideSubState.l5, id="l5"),
+            rx.box(ClientSideSubState.l6, id="l6"),
             rx.box(ClientSideSubSubState.c1s, id="c1s"),
             rx.box(ClientSideSubSubState.l1s, id="l1s"),
         )
@@ -191,33 +200,44 @@ async def test_client_side_state(
     """
     assert client_side.app_instance is not None
     assert client_side.frontend_url is not None
-    token_input = driver.find_element(By.ID, "token")
-    assert token_input
 
-    # wait for the backend connection to send the token
-    token = client_side.poll_for_value(token_input)
-    assert token is not None
+    def poll_for_token():
+        token_input = driver.find_element(By.ID, "token")
+        assert token_input
 
-    # get a reference to the cookie manipulation form
-    state_var_input = driver.find_element(By.ID, "state_var")
-    input_value_input = driver.find_element(By.ID, "input_value")
-    set_sub_state_button = driver.find_element(By.ID, "set_sub_state")
-    set_sub_sub_state_button = driver.find_element(By.ID, "set_sub_sub_state")
+        # wait for the backend connection to send the token
+        token = client_side.poll_for_value(token_input)
+        assert token is not None
+        return token
 
     def set_sub(var: str, value: str):
+        # Get a reference to the cookie manipulation form.
+        state_var_input = driver.find_element(By.ID, "state_var")
+        input_value_input = driver.find_element(By.ID, "input_value")
+        set_sub_state_button = driver.find_element(By.ID, "set_sub_state")
         AppHarness._poll_for(lambda: state_var_input.get_attribute("value") == "")
         AppHarness._poll_for(lambda: input_value_input.get_attribute("value") == "")
+
+        # Set the values.
         state_var_input.send_keys(var)
         input_value_input.send_keys(value)
         set_sub_state_button.click()
 
     def set_sub_sub(var: str, value: str):
+        # Get a reference to the cookie manipulation form.
+        state_var_input = driver.find_element(By.ID, "state_var")
+        input_value_input = driver.find_element(By.ID, "input_value")
+        set_sub_sub_state_button = driver.find_element(By.ID, "set_sub_sub_state")
         AppHarness._poll_for(lambda: state_var_input.get_attribute("value") == "")
         AppHarness._poll_for(lambda: input_value_input.get_attribute("value") == "")
+
+        # Set the values.
         state_var_input.send_keys(var)
         input_value_input.send_keys(value)
         set_sub_sub_state_button.click()
 
+    token = poll_for_token()
+
     # get a reference to all cookie and local storage elements
     c1 = driver.find_element(By.ID, "c1")
     c2 = driver.find_element(By.ID, "c2")
@@ -429,7 +449,7 @@ def set_sub_sub(var: str, value: str):
     assert l1s.text == "l1s value"
 
     # reset the backend state to force refresh from client storage
-    async with client_side.modify_state(token) as state:
+    async with client_side.modify_state(f"{token}_state.client_side_state") as state:
         state.reset()
     driver.refresh()
 
@@ -485,6 +505,31 @@ def set_sub_sub(var: str, value: str):
         "value": "c5%20value",
     }
 
+    # Open a new tab to check that sync'd local storage is working
+    main_tab = driver.window_handles[0]
+    driver.switch_to.new_window("window")
+    driver.get(client_side.frontend_url)
+
+    # New tab should have a different state token.
+    assert poll_for_token() != token
+
+    # Set values and check them in the new tab.
+    set_sub("l5", "l5 value")
+    set_sub("l6", "l6 value")
+    l5 = driver.find_element(By.ID, "l5")
+    l6 = driver.find_element(By.ID, "l6")
+    assert l5.text == "l5 value"
+    assert l6.text == "l6 value"
+
+    # Switch back to main window.
+    driver.switch_to.window(main_tab)
+
+    # The values should have updated automatically.
+    l5 = driver.find_element(By.ID, "l5")
+    l6 = driver.find_element(By.ID, "l6")
+    assert l5.text == "l5 value"
+    assert l6.text == "l6 value"
+
     # clear the cookie jar and local storage, ensure state reset to default
     driver.delete_all_cookies()
     local_storage.clear()

integration/test_dynamic_routes.py

@@ -85,6 +85,7 @@ def dynamic_route(
     """
     with app_harness_env.create(
         root=tmp_path_factory.mktemp(f"dynamic_route"),
+        app_name=f"dynamicroute_{app_harness_env.__name__.lower()}",
         app_source=DynamicRoute,  # type: ignore
     ) as harness:
         yield harness
@@ -146,7 +147,7 @@ def poll_for_order(
 
     async def _poll_for_order(exp_order: list[str]):
         async def _backend_state():
-            return await dynamic_route.get_state(token)
+            return await dynamic_route.get_state(f"{token}_state.dynamic_state")
 
         async def _check():
             return (await _backend_state()).substates[
@@ -194,7 +195,9 @@ async def test_on_load_navigate(
         assert link
         assert page_id_input
 
-        assert dynamic_route.poll_for_value(page_id_input) == str(ix)
+        assert dynamic_route.poll_for_value(
+            page_id_input, exp_not_equal=str(ix - 1)
+        ) == str(ix)
         assert dynamic_route.poll_for_value(raw_path_input) == f"/page/{ix}/"
     await poll_for_order(exp_order)
 
@@ -220,7 +223,9 @@ async def test_on_load_navigate(
     with poll_for_navigation(driver):
         driver.get(f"{driver.current_url}?foo=bar")
     await poll_for_order(exp_order)
-    assert (await dynamic_route.get_state(token)).router.page.params["foo"] == "bar"
+    assert (
+        await dynamic_route.get_state(f"{token}_state.dynamic_state")
+    ).router.page.params["foo"] == "bar"
 
     # hit a 404 and ensure we still hydrate
     exp_order += ["/404-no page id"]

integration/test_event_actions.py

@@ -207,7 +207,7 @@ def poll_for_order(
 
     async def _poll_for_order(exp_order: list[str]):
         async def _backend_state():
-            return await event_action.get_state(token)
+            return await event_action.get_state(f"{token}_state.event_action_state")
 
         async def _check():
             return (await _backend_state()).substates[

integration/test_event_chain.py

@@ -298,7 +298,7 @@ def assert_token(event_chain: AppHarness, driver: WebDriver) -> str:
     token = event_chain.poll_for_value(token_input)
     assert token is not None
 
-    return token
+    return f"{token}_state.state"
 
 
 @pytest.mark.parametrize(

integration/test_form_submit.py

@@ -221,7 +221,11 @@ async def test_submit(driver, form_submit: AppHarness):
     submit_input.click()
 
     async def get_form_data():
-        return (await form_submit.get_state(token)).substates["form_state"].form_data
+        return (
+            (await form_submit.get_state(f"{token}_state.form_state"))
+            .substates["form_state"]
+            .form_data
+        )
 
     # wait for the form data to arrive at the backend
     form_data = await AppHarness._poll_for_async(get_form_data)

integration/test_input.py

@@ -76,6 +76,10 @@ async def test_fully_controlled_input(fully_controlled_input: AppHarness):
     token = fully_controlled_input.poll_for_value(token_input)
     assert token
 
+    async def get_state_text():
+        state = await fully_controlled_input.get_state(f"{token}_state.state")
+        return state.substates["state"].text
+
     # find the input and wait for it to have the initial state value
     debounce_input = driver.find_element(By.ID, "debounce_input_input")
     value_input = driver.find_element(By.ID, "value_input")
@@ -95,16 +99,14 @@ async def test_fully_controlled_input(fully_controlled_input: AppHarness):
     debounce_input.send_keys("foo")
     time.sleep(0.5)
     assert debounce_input.get_attribute("value") == "ifoonitial"
-    assert (await fully_controlled_input.get_state(token)).substates[
-        "state"
-    ].text == "ifoonitial"
+    assert await get_state_text() == "ifoonitial"
     assert fully_controlled_input.poll_for_value(value_input) == "ifoonitial"
     assert fully_controlled_input.poll_for_value(plain_value_input) == "ifoonitial"
 
     # clear the input on the backend
-    async with fully_controlled_input.modify_state(token) as state:
+    async with fully_controlled_input.modify_state(f"{token}_state.state") as state:
         state.substates["state"].text = ""
-    assert (await fully_controlled_input.get_state(token)).substates["state"].text == ""
+    assert await get_state_text() == ""
     assert (
         fully_controlled_input.poll_for_value(
             debounce_input, exp_not_equal="ifoonitial"
@@ -116,9 +118,7 @@ async def test_fully_controlled_input(fully_controlled_input: AppHarness):
     debounce_input.send_keys("getting testing done")
     time.sleep(0.5)
     assert debounce_input.get_attribute("value") == "getting testing done"
-    assert (await fully_controlled_input.get_state(token)).substates[
-        "state"
-    ].text == "getting testing done"
+    assert await get_state_text() == "getting testing done"
     assert fully_controlled_input.poll_for_value(value_input) == "getting testing done"
     assert (
         fully_controlled_input.poll_for_value(plain_value_input)
@@ -130,9 +130,7 @@ async def test_fully_controlled_input(fully_controlled_input: AppHarness):
     time.sleep(0.5)
     assert debounce_input.get_attribute("value") == "overwrite the state"
     assert on_change_input.get_attribute("value") == "overwrite the state"
-    assert (await fully_controlled_input.get_state(token)).substates[
-        "state"
-    ].text == "overwrite the state"
+    assert await get_state_text() == "overwrite the state"
     assert fully_controlled_input.poll_for_value(value_input) == "overwrite the state"
     assert (
         fully_controlled_input.poll_for_value(plain_value_input)

integration/test_navigation.py

@@ -0,0 +1,89 @@
+"""Integration tests for links and related components."""
+from typing import Generator
+from urllib.parse import urlsplit
+
+import pytest
+from selenium.webdriver.common.by import By
+
+from reflex.testing import AppHarness
+
+from .utils import poll_for_navigation
+
+
+def NavigationApp():
+    """Reflex app with links for navigation."""
+    import reflex as rx
+
+    class State(rx.State):
+        is_external: bool = True
+
+    app = rx.App()
+
+    @app.add_page
+    def index():
+        return rx.fragment(
+            rx.link("Internal", href="/internal", id="internal"),
+            rx.link(
+                "External",
+                href="/internal",
+                is_external=State.is_external,
+                id="external",
+            ),
+            rx.link(
+                "External Target", href="/internal", target="_blank", id="external2"
+            ),
+        )
+
+    @rx.page(route="/internal")
+    def internal():
+        return rx.text("Internal")
+
+
+@pytest.fixture()
+def navigation_app(tmp_path) -> Generator[AppHarness, None, None]:
+    """Start NavigationApp app at tmp_path via AppHarness.
+
+    Args:
+        tmp_path: pytest tmp_path fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    with AppHarness.create(
+        root=tmp_path,
+        app_source=NavigationApp,  # type: ignore
+    ) as harness:
+        yield harness
+
+
+@pytest.mark.asyncio
+async def test_navigation_app(navigation_app: AppHarness):
+    """Type text after moving cursor. Update text on backend.
+
+    Args:
+        navigation_app: harness for NavigationApp app
+    """
+    assert navigation_app.app_instance is not None, "app is not running"
+    driver = navigation_app.frontend()
+
+    internal_link = driver.find_element(By.ID, "internal")
+
+    with poll_for_navigation(driver):
+        internal_link.click()
+    assert urlsplit(driver.current_url).path == f"/internal/"
+    with poll_for_navigation(driver):
+        driver.back()
+
+    external_link = driver.find_element(By.ID, "external")
+    external2_link = driver.find_element(By.ID, "external2")
+
+    external_link.click()
+    # Expect a new tab to open
+    assert AppHarness._poll_for(lambda: len(driver.window_handles) == 2)
+
+    # Switch back to the main tab
+    driver.switch_to.window(driver.window_handles[0])
+
+    external2_link.click()
+    # Expect another new tab to open
+    assert AppHarness._poll_for(lambda: len(driver.window_handles) == 3)

integration/test_upload.py

@@ -171,6 +171,7 @@ async def test_upload_file(
     # wait for the backend connection to send the token
     token = upload_file.poll_for_value(token_input)
     assert token is not None
+    substate_token = f"{token}_state.upload_state"
 
     suffix = "_secondary" if secondary else ""
 
@@ -191,7 +192,11 @@ async def test_upload_file(
 
     # look up the backend state and assert on uploaded contents
     async def get_file_data():
-        return (await upload_file.get_state(token)).substates["upload_state"]._file_data
+        return (
+            (await upload_file.get_state(substate_token))
+            .substates["upload_state"]
+            ._file_data
+        )
 
     file_data = await AppHarness._poll_for_async(get_file_data)
     assert isinstance(file_data, dict)
@@ -201,7 +206,7 @@ async def get_file_data():
     selected_files = driver.find_element(By.ID, f"selected_files{suffix}")
     assert selected_files.text == exp_name
 
-    state = await upload_file.get_state(token)
+    state = await upload_file.get_state(substate_token)
     if secondary:
         # only the secondary form tracks progress and chain events
         assert state.substates["upload_state"].event_order.count("upload_progress") == 1
@@ -223,6 +228,7 @@ async def test_upload_file_multiple(tmp_path, upload_file: AppHarness, driver):
     # wait for the backend connection to send the token
     token = upload_file.poll_for_value(token_input)
     assert token is not None
+    substate_token = f"{token}_state.upload_state"
 
     upload_box = driver.find_element(By.XPATH, "//input[@type='file']")
     assert upload_box
@@ -250,7 +256,11 @@ async def test_upload_file_multiple(tmp_path, upload_file: AppHarness, driver):
 
     # look up the backend state and assert on uploaded contents
     async def get_file_data():
-        return (await upload_file.get_state(token)).substates["upload_state"]._file_data
+        return (
+            (await upload_file.get_state(substate_token))
+            .substates["upload_state"]
+            ._file_data
+        )
 
     file_data = await AppHarness._poll_for_async(get_file_data)
     assert isinstance(file_data, dict)
@@ -330,6 +340,7 @@ async def test_cancel_upload(tmp_path, upload_file: AppHarness, driver: WebDrive
     # wait for the backend connection to send the token
     token = upload_file.poll_for_value(token_input)
     assert token is not None
+    substate_token = f"{token}_state.upload_state"
 
     upload_box = driver.find_elements(By.XPATH, "//input[@type='file']")[1]
     upload_button = driver.find_element(By.ID, f"upload_button_secondary")
@@ -347,7 +358,7 @@ async def test_cancel_upload(tmp_path, upload_file: AppHarness, driver: WebDrive
     cancel_button.click()
 
     # look up the backend state and assert on progress
-    state = await upload_file.get_state(token)
+    state = await upload_file.get_state(substate_token)
     assert state.substates["upload_state"].progress_dicts
     assert exp_name not in state.substates["upload_state"]._file_data