Add more unit tests for page components/controls (#96)

CODEOWNERS

@@ -1,2 +1 @@
-*                @antonymilne @huong-li-nguyen @maxschulz-COL
-vizro-core/docs/ @Joseph-Perkins
+*                @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL

vizro-core/changelog.d/20231005_135142_huong_li_nguyen_update_custom_control_example.md

@@ -0,0 +1,42 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category.
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->

vizro-core/docs/pages/user_guides/components.md

@@ -762,3 +762,18 @@ In the below example we show how to configure a button to export the filtered da
         [![Button]][Button]
 
     [Button]: ../../assets/user_guides/components/button.png
+
+The [`Button`][vizro.models.Button] component is currently reserved to be used inside the main panel (right-side) of the dashboard.
+However, there might be use cases where one would like to place the `Button` inside the control panel (left-side) with the other controls.
+
+In this case, simply follow the user-guide outlined for [custom components](custom_components.md) and manually add the `Button` as a valid type to the `controls` argument by running the following lines before your dashboard configurations:
+
+```python
+from vizro import Vizro
+import vizro.models as vm
+
+vm.Page.add_type("controls", vm.Button)
+
+# Add dashboard configurations below
+...
+```

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

@@ -1,8 +1,12 @@
+import re
+
 import dash
+import pandas as pd
 import pytest
 from pydantic import ValidationError
 
 import vizro.models as vm
+import vizro.plotly.express as px
 from vizro._constants import ON_PAGE_LOAD_ACTION_PREFIX
 from vizro.models._action._actions_chain import ActionsChain
 
@@ -87,6 +91,47 @@ def test_set_layout_invalid(self):
         with pytest.raises(ValidationError, match="Number of page and grid components need to be the same."):
             vm.Page(title="Page 4", components=[vm.Button()], layout=vm.Layout(grid=[[0, 1]]))
 
+    def test_valid_component_types(self, standard_px_chart):
+        vm.Page(
+            title="Page Title",
+            components=[vm.Graph(figure=standard_px_chart), vm.Card(text="""# Header 1"""), vm.Button()],
+        )
+
+    @pytest.mark.parametrize(
+        "test_component",
+        [vm.Checklist(), vm.Dropdown(), vm.RadioItems(), vm.RangeSlider(), vm.Slider()],
+    )
+    def test_invalid_component_types(self, test_component):
+        with pytest.raises(ValidationError, match=re.escape("(allowed values: 'button', 'card', 'graph')")):
+            vm.Page(title="Page Title", components=[test_component])
+
+    def test_valid_control_types(self, standard_px_chart):
+        vm.Page(
+            title="Page Title",
+            components=[vm.Graph(id="scatter", figure=standard_px_chart)],
+            controls=[
+                vm.Filter(column="continent"),
+                vm.Parameter(targets=["scatter.x"], selector=vm.RadioItems(options=["lifeExp", "pop", "gdpPercap"])),
+            ],
+        )
+
+    @pytest.mark.parametrize(
+        "test_control",
+        [
+            vm.Button(),
+            vm.Card(text="""Text"""),
+            vm.Graph(figure=px.bar(data_frame=pd.DataFrame({"x": ["A", "B"], "y": [1, 2]}), x="x", y="y")),
+            vm.Checklist(),
+            vm.Dropdown(),
+            vm.RadioItems(),
+            vm.RangeSlider(),
+            vm.Slider(),
+        ],
+    )
+    def test_invalid_control_types(self, test_control):
+        with pytest.raises(ValidationError, match=re.escape("(allowed values: 'filter', 'parameter')")):
+            vm.Page(title="Page Title", components=[vm.Button()], controls=[test_control])
+
 
 # TODO: Remove this if we can get rid of on-page-load action
 class TestPagePreBuildMethod: