add integration test for icons (#5037)

* add integration test for icons

* fix unit tests

reflex/components/lucide/icon.py

@@ -79,9 +79,7 @@ class Icon(LucideIconComponent):
             )
             tag = "circle_help"
 
-        props["tag"] = LUCIDE_ICON_MAPPING_OVERRIDE.get(
-            tag, format.to_title_case(tag) + "Icon"
-        )
+        props["tag"] = LUCIDE_ICON_MAPPING_OVERRIDE.get(tag, format.to_title_case(tag))
         props["alias"] = f"Lucide{props['tag']}"
         props.setdefault("color", "var(--current-color)")
         return super().create(**props)
@@ -1680,6 +1678,9 @@ LUCIDE_ICON_LIST = [
 # The default transformation of some icon names doesn't match how the
 # icons are exported from Lucide. Manual overrides can go here.
 LUCIDE_ICON_MAPPING_OVERRIDE = {
-    "grid_2x_2_check": "Grid2x2Check",
-    "grid_2x_2_x": "Grid2x2X",
+    "box_select": "BoxSelectIcon",
+    "grid_2x_2_check": "Grid2x2CheckIcon",
+    "grid_2x_2_x": "Grid2x2XIcon",
+    "grid_2x_2_plus": "Grid2x2PlusIcon",
+    "layers_3": "Layers3Icon",
 }

reflex/components/lucide/icon.pyi

@@ -1732,6 +1732,9 @@ LUCIDE_ICON_LIST = [
     "zoom_out",
 ]
 LUCIDE_ICON_MAPPING_OVERRIDE = {
-    "grid_2x_2_check": "Grid2x2Check",
-    "grid_2x_2_x": "Grid2x2X",
+    "box_select": "BoxSelectIcon",
+    "grid_2x_2_check": "Grid2x2CheckIcon",
+    "grid_2x_2_x": "Grid2x2XIcon",
+    "grid_2x_2_plus": "Grid2x2PlusIcon",
+    "layers_3": "Layers3Icon",
 }

tests/integration/test_icon.py

@@ -0,0 +1,96 @@
+"""Integration tests for the Icon component."""
+
+from typing import Generator
+
+import pytest
+from selenium.webdriver.common.by import By
+
+from reflex.components.lucide.icon import LUCIDE_ICON_LIST
+from reflex.testing import AppHarness
+from tests.integration.test_dynamic_components import poll_for_result
+
+
+def Icons():
+    import reflex as rx
+    from reflex.components.lucide.icon import LUCIDE_ICON_LIST
+
+    app = rx.App()
+
+    class State(rx.State):
+        pass
+
+    @app.add_page
+    def index():
+        return rx.vstack(
+            rx.el.input(
+                custom_attrs={
+                    "id": "token",
+                },
+                value=State.router.session.client_token,
+                is_read_only=True,
+            ),
+            *[
+                rx.el.div(
+                    rx.icon(icon_name),
+                    id=icon_name,
+                )
+                for icon_name in LUCIDE_ICON_LIST
+            ],
+        )
+
+
+@pytest.fixture(scope="module")
+def icons(tmp_path_factory) -> Generator[AppHarness, None, None]:
+    """Start Icons app at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    with AppHarness.create(
+        root=tmp_path_factory.mktemp("icons"),
+        app_source=Icons,
+    ) as harness:
+        assert harness.app_instance is not None, "app is not running"
+        yield harness
+
+
+@pytest.fixture
+def driver(icons: AppHarness):
+    """Get an instance of the browser open to the dynamic components app.
+
+    Args:
+        icons: AppHarness for the dynamic components
+
+    Yields:
+        WebDriver instance.
+    """
+    driver = icons.frontend()
+    try:
+        token_input = poll_for_result(
+            lambda: driver.find_element(By.ID, "token"), max_attempts=30
+        )
+        assert token_input
+        # wait for the backend connection to send the token
+        token = icons.poll_for_value(token_input)
+        assert token is not None
+
+        yield driver
+    finally:
+        driver.quit()
+
+
+def test_icons(driver, icons: AppHarness):
+    """Test that the var operations produce the right results.
+
+    Args:
+        driver: selenium WebDriver open to the app
+        icons: AppHarness for the dynamic components
+    """
+    for icon_name in LUCIDE_ICON_LIST:
+        icon = poll_for_result(
+            lambda icon_name=icon_name: driver.find_element(By.ID, icon_name)
+        )
+        assert icon

tests/units/components/lucide/test_icon.py

@@ -12,7 +12,7 @@ from reflex.utils import format
 def test_icon(tag):
     icon = Icon.create(tag)
     assert icon.alias == "Lucide" + LUCIDE_ICON_MAPPING_OVERRIDE.get(
-        tag, f"{format.to_title_case(tag)}Icon"
+        tag, format.to_title_case(tag)
     )
 
 
@@ -23,7 +23,7 @@ def test_icon_missing_tag():
 
 def test_icon_invalid_tag():
     invalid = Icon.create("invalid-tag")
-    assert invalid.tag == "CircleHelpIcon"
+    assert invalid.tag == "CircleHelp"
 
 
 def test_icon_multiple_children():