Introduce assert_component_equal for tests

vizro-core/src/vizro/models/_components/button.py

@@ -32,13 +32,7 @@ class Button(VizroBaseModel):
     @_log_call
     def build(self):
         return html.Div(
-            [
-                dbc.Button(
-                    id=self.id,
-                    children=self.text,
-                    className="button_primary",
-                ),
-            ],
+            dbc.Button(id=self.id, children=self.text, className="button_primary"),
             className="button_container",
             id=f"{self.id}_outer",
         )

vizro-core/tests/tests_utils/asserts.py

@@ -20,11 +20,9 @@ def component_to_dict(component: dash.development.base_component.Component) -> d
     return json.loads(json.dumps(component, cls=plotly.utils.PlotlyJSONEncoder))
 
 
-# TODO: implement some sort of depth limit to comparison so can use in high level tests, roll out more widely across
-# tests
 def assert_component_equal(left, right, keys_to_strip=None):
-    # Note we check for None explicitly because {} is a valid value for keys_to_strip.
-    keys_to_strip = keys_to_strip if keys_to_strip is not None else {"id", "class_name", "className"}
+    keys_to_strip = keys_to_strip or {}
+
     left = strip_keys(component_to_dict(left), keys_to_strip)
     right = strip_keys(component_to_dict(right), keys_to_strip)
     assert left == right

vizro-core/tests/unit/vizro/models/_components/test_button.py

@@ -1,30 +1,14 @@
 """Unit tests for vizro.models.Button."""
-import json
 
 import dash_bootstrap_components as dbc
-import plotly
 import pytest
+from asserts import assert_component_equal
 from dash import html
 
 import vizro.models as vm
 from vizro.actions import export_data
 
 
-@pytest.fixture
-def expected_button():
-    return html.Div(
-        [
-            dbc.Button(
-                id="button_id",
-                children="Click me!",
-                className="button_primary",
-            ),
-        ],
-        className="button_container",
-        id="button_id_outer",
-    )
-
-
 class TestButtonInstantiation:
     """Tests model instantiation and the validators run at that time."""
 
@@ -53,9 +37,13 @@ def test_set_action_via_validator(self):
 
 
 class TestBuildMethod:
-    def test_button_build(self, expected_button):
-        button = vm.Button(id="button_id", text="Click me!").build()
-        result = json.loads(json.dumps(button, cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(expected_button, cls=plotly.utils.PlotlyJSONEncoder))
-
-        assert result == expected
+    def test_button_build(self):
+        button = vm.Button(id="button_id", text="My text").build()
+        assert_component_equal(
+            button,
+            html.Div(
+                dbc.Button(id="button_id", children="My text", className="button_primary"),
+                className="button_container",
+                id="button_id_outer",
+            ),
+        )

vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py

@@ -55,7 +55,7 @@ def test_invalid_page(self, pages):
 class TestAccordionBuild:
     """Tests accordion build method."""
 
-    common_args = {"always_open": True, "persistence": True, "persistence_type": "session"}
+    common_args = {"always_open": True, "persistence": True, "persistence_type": "session", "id": "accordion"}
 
     test_cases = [
         (
@@ -113,9 +113,11 @@ class TestAccordionBuild:
     @pytest.mark.parametrize("pages, expected", test_cases)
     def test_accordion(self, pages, expected):
         accordion = vm.Accordion(id="accordion", pages=pages).build(active_page_id="Page 1")
-        assert_component_equal(accordion, html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"})
-        assert_component_equal(accordion["accordion"], expected)
+        assert_component_equal(
+            accordion, html.Div(id="nav_panel_outer", className="nav_panel"), keys_to_strip={"children"}
+        )
+        assert_component_equal(accordion["accordion"], expected, keys_to_strip={"class_name", "className"})
 
     def test_accordion_one_page(self):
         accordion = vm.Accordion(pages={"Group": ["Page 1"]}).build(active_page_id="Page 1")
-        assert_component_equal(accordion, html.Div(hidden=True, id="nav_panel_outer"), keys_to_strip={})
+        assert_component_equal(accordion, html.Div(hidden=True, id="nav_panel_outer"))

vizro-core/tests/unit/vizro/models/_navigation/test_nav_bar.py

@@ -93,9 +93,11 @@ def test_nav_bar_active_pages_as_dict(self, pages_as_dict):
                 )
             ]
         )
-        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_button)
+        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_button, keys_to_strip={"id", "className"})
         assert_component_equal(
-            built_nav_bar["nav_panel_outer"], html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"}
+            built_nav_bar["nav_panel_outer"],
+            html.Div(id="nav_panel_outer", className="nav_panel"),
+            keys_to_strip={"children"},
         )
         assert all(isinstance(child, dbc.Accordion) for child in built_nav_bar["nav_panel_outer"].children)
 
@@ -117,11 +119,10 @@ def test_nav_bar_active_pages_as_list(self, pages_as_list):
                 ),
             ]
         )
-        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_buttons)
+        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_buttons, keys_to_strip={"id", "className"})
         assert_component_equal(
             built_nav_bar["nav_panel_outer"],
             html.Div(id="nav_panel_outer", hidden=True),
-            keys_to_strip={"children", "className"},
         )
 
     def test_nav_bar_not_active_pages_as_dict(self, pages_as_dict):
@@ -137,10 +138,8 @@ def test_nav_bar_not_active_pages_as_dict(self, pages_as_dict):
                 )
             ]
         )
-        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_button)
-        assert_component_equal(
-            built_nav_bar["nav_panel_outer"], html.Div(hidden=True, id="nav_panel_outer"), keys_to_strip={}
-        )
+        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_button, keys_to_strip={"id", "className"})
+        assert_component_equal(built_nav_bar["nav_panel_outer"], html.Div(hidden=True, id="nav_panel_outer"))
 
     def test_nav_bar_not_active_pages_as_list(self, pages_as_list):
         nav_bar = vm.NavBar(pages=pages_as_list)
@@ -160,9 +159,8 @@ def test_nav_bar_not_active_pages_as_list(self, pages_as_list):
                 ),
             ]
         )
-        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_buttons)
+        assert_component_equal(built_nav_bar["nav_bar_outer"], expected_buttons, keys_to_strip={"id", "className"})
         assert_component_equal(
             built_nav_bar["nav_panel_outer"],
             html.Div(id="nav_panel_outer", hidden=True),
-            keys_to_strip={},
         )

vizro-core/tests/unit/vizro/models/_navigation/test_nav_link.py

@@ -86,9 +86,17 @@ def test_nav_link_active(self, pages, request):
         nav_link.pre_build()
         built_nav_link = nav_link.build(active_page_id="Page 1")
         expected_button = dbc.Button(
-            children=[dmc.Tooltip(label="Label", children=[html.Span("icon")], **self.common_args)],
+            children=[
+                dmc.Tooltip(
+                    label="Label",
+                    children=[html.Span("icon", className="material-symbols-outlined")],
+                    **self.common_args,
+                )
+            ],
             active=True,
             href="/",
+            className="icon-button",
+            id="nav_link",
         )
         assert_component_equal(built_nav_link["nav_link"], expected_button)
         assert all(isinstance(child, dbc.Accordion) for child in built_nav_link["nav_panel_outer"].children)
@@ -99,9 +107,17 @@ def test_nav_link_not_active(self, pages, request):
         nav_link.pre_build()
         built_nav_link = nav_link.build(active_page_id="Page 3")
         expected_button = dbc.Button(
-            children=[dmc.Tooltip(label="Label", children=[html.Span("icon")], **self.common_args)],
+            children=[
+                dmc.Tooltip(
+                    label="Label",
+                    children=[html.Span("icon", className="material-symbols-outlined")],
+                    **self.common_args,
+                )
+            ],
             active=False,
             href="/",
+            className="icon-button",
+            id="nav_link",
         )
         assert_component_equal(built_nav_link["nav_link"], expected_button)
         assert "nav_panel_outer" not in built_nav_link

vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py

@@ -84,11 +84,11 @@ def test_default_nav_selector(self, pages, request):
         navigation = vm.Navigation(pages=pages)
         navigation.pre_build()
         built_navigation = navigation.build(active_page_id="Page 1")
+        assert_component_equal(built_navigation["nav_bar_outer"], html.Div(hidden=True, id="nav_bar_outer"))
         assert_component_equal(
-            built_navigation["nav_bar_outer"], html.Div(hidden=True, id="nav_bar_outer"), keys_to_strip={}
-        )
-        assert_component_equal(
-            built_navigation["nav_panel_outer"], html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"}
+            built_navigation["nav_panel_outer"],
+            html.Div(id="nav_panel_outer", className="nav_panel"),
+            keys_to_strip={"children"},
         )
         assert all(isinstance(child, dbc.Accordion) for child in built_navigation["nav_panel_outer"].children)
 
@@ -103,8 +103,8 @@ def test_non_default_nav_selector_pags_as_dict(self, pages_as_dict):
         )
         assert_component_equal(
             built_navigation["nav_panel_outer"],
-            html.Div(id="nav_panel_outer"),
-            keys_to_strip={"children", "className"},
+            html.Div(id="nav_panel_outer", className="nav_panel"),
+            keys_to_strip={"children"},
         )
         assert all(isinstance(child, dbc.Accordion) for child in built_navigation["nav_panel_outer"].children)
 
@@ -118,7 +118,5 @@ def test_non_default_nav_selector_pages_as_list(self, pages_as_list):
             keys_to_strip={"children"},
         )
         assert_component_equal(
-            built_navigation["nav_panel_outer"],
-            html.Div(id="nav_panel_outer", hidden=True),
-            keys_to_strip={"children"},
+            built_navigation["nav_panel_outer"], html.Div(id="nav_panel_outer", hidden=True), keys_to_strip={"children"}
         )

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -130,7 +130,7 @@ def test_make_page_404_layout(self, vizro_app):
             className="page_error_container",
         )
 
-        assert_component_equal(vm.Dashboard._make_page_404_layout(), expected, {})
+        assert_component_equal(vm.Dashboard._make_page_404_layout(), expected)
 
 
 class TestDashboardBuild: