Use assert_components_equal in other navigation tests

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

@@ -111,9 +111,9 @@ 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 accordion.id == "nav_panel_outer"
+        assert_components_equal(accordion, html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"})
         assert_components_equal(accordion["accordion"], expected)
 
     def test_accordion_one_page(self):
-        accordion = vm.Accordion(id="accordion", pages={"Group": ["Page 1"]}).build(active_page_id="Page 1")
+        accordion = vm.Accordion(pages={"Group": ["Page 1"]}).build(active_page_id="Page 1")
         assert_components_equal(accordion, html.Div(hidden=True, id="nav_panel_outer"), keys_to_strip={})

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

@@ -6,6 +6,9 @@
 from pydantic import ValidationError
 
 import vizro.models as vm
+import dash_bootstrap_components as dbc
+
+from asserts import assert_components_equal
 
 
 @pytest.mark.usefixtures("vizro_app", "prebuilt_dashboard")
@@ -72,18 +75,56 @@ def test_items_with_with_pages_icons(self, pages_as_dict):
 class TestNavBarBuildMethod:
     """Tests NavBar model build method."""
 
-    def test_nav_bar_active(self, pages_as_dict):
+    def test_nav_bar_active_pages_as_dict(self, pages_as_dict):
         nav_bar = vm.NavBar(pages=pages_as_dict)
         nav_bar.pre_build()
         built_nav_bar = nav_bar.build(active_page_id="Page 1")
-        assert isinstance(built_nav_bar["nav_bar_outer"], html.Div)
-        assert isinstance(built_nav_bar["nav_panel_outer"], html.Div)
-        assert not hasattr(built_nav_bar["nav_panel_outer"], "hidden")
-
-    def test_nav_bar_not_active(self, pages_as_dict):
+        expected_button = html.Div([dbc.Button(children=[html.Span(children="filter_1")], active=True, href="/")])
+        assert_components_equal(built_nav_bar["nav_bar_outer"], expected_button)
+        assert_components_equal(
+            built_nav_bar["nav_panel_outer"], html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"}
+        )
+        assert all(isinstance(child, dbc.Accordion) for child in built_nav_bar["nav_panel_outer"].children)
+
+    def test_nav_bar_active_pages_as_list(self, pages_as_list):
+        nav_bar = vm.NavBar(pages=pages_as_list)
+        nav_bar.pre_build()
+        built_nav_bar = nav_bar.build(active_page_id="Page 1")
+        expected_buttons = html.Div(
+            [
+                dbc.Button(children=[html.Span(children="filter_1")], active=True, href="/"),
+                dbc.Button(children=[html.Span(children="filter_2")], active=False, href="/page-2"),
+            ]
+        )
+        assert_components_equal(built_nav_bar["nav_bar_outer"], expected_buttons)
+        assert_components_equal(
+            built_nav_bar["nav_panel_outer"], html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"}
+        )
+        assert all(isinstance(child, dbc.Accordion) for child in built_nav_bar["nav_panel_outer"].children)
+
+    def test_nav_bar_not_active_pages_as_dict(self, pages_as_dict):
         nav_bar = vm.NavBar(pages=pages_as_dict)
         nav_bar.pre_build()
         built_nav_bar = nav_bar.build(active_page_id="Page 3")
-        assert isinstance(built_nav_bar["nav_bar_outer"], html.Div)
-        assert isinstance(built_nav_bar["nav_panel_outer"], html.Div)
-        assert built_nav_bar["nav_panel_outer"].hidden
+        expected_button = html.Div([dbc.Button(children=[html.Span(children="filter_1")], active=False, href="/")])
+        assert_components_equal(built_nav_bar["nav_bar_outer"], expected_button)
+        assert_components_equal(
+            built_nav_bar["nav_panel_outer"], html.Div(hidden=True, id="nav_panel_outer"), keys_to_strip={}
+        )
+
+    def test_nav_bar_active_pages_as_list(self, pages_as_list):
+        nav_bar = vm.NavBar(pages=pages_as_list)
+        nav_bar.pre_build()
+        built_nav_bar = nav_bar.build(active_page_id="Page 3")
+        expected_buttons = html.Div(
+            [
+                dbc.Button(children=[html.Span(children="filter_1")], active=False, href="/"),
+                dbc.Button(children=[html.Span(children="filter_2")], active=False, href="/page-2"),
+            ]
+        )
+        assert_components_equal(built_nav_bar["nav_bar_outer"], expected_buttons)
+        assert_components_equal(
+            built_nav_bar["nav_panel_outer"],
+            html.Div(id="nav_panel_outer", hidden=True),
+            keys_to_strip={"children", "className"},
+        )

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

@@ -7,6 +7,7 @@
 from pydantic import ValidationError
 
 import vizro.models as vm
+from asserts import assert_components_equal
 
 
 @pytest.mark.usefixtures("vizro_app", "prebuilt_dashboard")
@@ -64,23 +65,24 @@ def test_nav_link(self, pages_as_dict):
 
 
 @pytest.mark.usefixtures("vizro_app", "prebuilt_dashboard")
+@pytest.mark.parametrize("pages", ["pages_as_dict", "pages_as_list"])
 class TestNavLinkBuildMethod:
     """Tests NavLink model build method."""
 
-    def test_nav_link_active(self, pages_as_dict):
-        nav_link = vm.NavLink(label="Label", pages=pages_as_dict)
+    def test_nav_link_active(self, pages, request):
+        pages = request.getfixturevalue(pages)
+        nav_link = vm.NavLink(id="nav_link", label="Label", icon="icon", pages=pages)
         nav_link.pre_build()
         built_nav_link = nav_link.build(active_page_id="Page 1")
-        assert isinstance(built_nav_link[nav_link.id], dbc.Button)
-        assert built_nav_link[nav_link.id].href == "/"
-        assert built_nav_link[nav_link.id].active
-        assert isinstance(built_nav_link["nav_panel_outer"], html.Div)
+        expected_button = dbc.Button(id="nav_link", children=[html.Span("icon")], active=True, href="/")
+        assert_components_equal(built_nav_link["nav_link"], expected_button)
+        assert all(isinstance(child, dbc.Accordion) for child in built_nav_link["nav_panel_outer"].children)
 
-    def test_nav_link_not_active(self, pages_as_dict):
-        nav_link = vm.NavLink(label="Label", pages=pages_as_dict)
+    def test_nav_link_not_active(self, pages, request):
+        pages = request.getfixturevalue(pages)
+        nav_link = vm.NavLink(id="nav_link", label="Label", icon="icon", pages=pages)
         nav_link.pre_build()
         built_nav_link = nav_link.build(active_page_id="Page 3")
-        assert isinstance(built_nav_link[nav_link.id], dbc.Button)
-        assert built_nav_link[nav_link.id].href == "/"
-        assert not built_nav_link[nav_link.id].active
+        expected_button = dbc.Button(id="nav_link", children=[html.Span("icon")], active=False, href="/")
+        assert_components_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

@@ -6,6 +6,9 @@
 from pydantic import ValidationError
 
 import vizro.models as vm
+from asserts import assert_components_equal
+
+import dash_bootstrap_components as dbc
 
 
 @pytest.mark.usefixtures("vizro_app", "prebuilt_dashboard")
@@ -73,18 +76,49 @@ def test_non_default_nav_selector_with_pages(self, pages_as_dict):
 class TestNavigationBuildMethod:
     """Tests navigation model build method."""
 
-    def test_default_nav_selector(self, pages_as_dict):
-        navigation = vm.Navigation(pages=pages_as_dict)
+    @pytest.mark.parametrize("pages", ["pages_as_dict", "pages_as_list"])
+    def test_default_nav_selector(self, pages, request):
+        pages = request.getfixturevalue(pages)
+        navigation = vm.Navigation(pages=pages)
         navigation.pre_build()
-        built_navigation = navigation.build()
-        assert isinstance(built_navigation["nav_bar_outer"], html.Div)
-        assert isinstance(built_navigation["nav_panel_outer"], html.Div)
-        assert built_navigation["nav_bar_outer"].className == "hidden"
-
-    def test_non_default_nav_selector(self, pages_as_dict):
+        built_navigation = navigation.build(active_page_id="Page 1")
+        assert_components_equal(
+            built_navigation["nav_bar_outer"],
+            html.Div(className="hidden", id="nav_bar_outer"),
+            keys_to_strip={"children"},
+        )
+        assert_components_equal(
+            built_navigation["nav_panel_outer"], html.Div(id="nav_panel_outer"), keys_to_strip={"children", "className"}
+        )
+        assert all(isinstance(child, dbc.Accordion) for child in built_navigation["nav_panel_outer"].children)
+
+    def test_non_default_nav_selector_pags_as_dict(self, pages_as_dict):
         navigation = vm.Navigation(pages=pages_as_dict, nav_selector=vm.NavBar())
         navigation.pre_build()
-        built_navigation = navigation.build()
-        assert isinstance(built_navigation["nav_bar_outer"], html.Div)
-        assert isinstance(built_navigation["nav_panel_outer"], html.Div)
-        assert built_navigation["nav_bar_outer"].className != "hidden"
+        built_navigation = navigation.build(active_page_id="Page 1")
+        assert_components_equal(
+            built_navigation["nav_bar_outer"],
+            html.Div(id="nav_bar_outer", className="nav-bar"),
+            keys_to_strip={"children"},
+        )
+        assert_components_equal(
+            built_navigation["nav_panel_outer"],
+            html.Div(id="nav_panel_outer"),
+            keys_to_strip={"children", "className"},
+        )
+        assert all(isinstance(child, dbc.Accordion) for child in built_navigation["nav_panel_outer"].children)
+
+    def test_non_default_nav_selector_pages_as_list(self, pages_as_list):
+        navigation = vm.Navigation(pages=pages_as_list, nav_selector=vm.NavBar())
+        navigation.pre_build()
+        built_navigation = navigation.build(active_page_id="Page 1")
+        assert_components_equal(
+            built_navigation["nav_bar_outer"],
+            html.Div(id="nav_bar_outer", className="nav-bar"),
+            keys_to_strip={"children"},
+        )
+        assert_components_equal(
+            built_navigation["nav_panel_outer"],
+            html.Div(id="nav_panel_outer", hidden=True),
+            keys_to_strip={"children"},
+        )