Add object of component as props test cases.

Author: T4rk1n

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -3,14 +3,32 @@ import PropTypes from 'prop-types';
 
 
 const ComponentAsProp = (props) => {
-    const { element, id, shapeEl, list_of_shapes, multi_components } = props;
+    const {
+        element,
+        id,
+        shapeEl,
+        list_of_shapes,
+        multi_components,
+        dynamic,
+        dynamic_list,
+        dynamic_dict,
+    } = props;
     return (
         <div id={id}>
             {shapeEl && shapeEl.header}
             {element}
             {shapeEl && shapeEl.footer}
             {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
             {multi_components && <div>{multi_components.map(m => <div id={m.id} key={m.id}>{m.first} - {m.second}</div>)}</div>}
+            {
+                dynamic && <div>{Object.keys(dynamic).map(key => <div id={key} key={key}>{dynamic[key]}</div>)}</div>
+            }
+            {
+                dynamic_dict && dynamic_dict.node && <div>{Object.keys(dynamic_dict.node).map(key => <div id={key} key={key}>{dynamic_dict.node[key]}</div>)}</div>
+            }
+            {
+                dynamic_list && <div>{dynamic_list.map((obj, i) => Object.keys(obj).map(key => <div id={key} key={key}>{obj[key]}</div>))}</div>
+            }
         </div>
     )
 }
@@ -37,7 +55,15 @@ ComponentAsProp.propTypes = {
             first: PropTypes.node,
             second: PropTypes.node,
         })
-    )
+    ),
+
+    dynamic: PropTypes.objectOf(PropTypes.node),
+
+    dynamic_list: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.node)),
+
+    dynamic_dict: PropTypes.shape({
+        node: PropTypes.objectOf(PropTypes.node),
+    })
 }
 
 export default ComponentAsProp;

tests/integration/renderer/test_component_as_prop.py

@@ -102,7 +102,22 @@ def test_rdcap001_component_as_prop(dash_duo):
                         "id": "multi2",
                         "first": Span("foo"),
                         "second": Span("bar"),
-                    }
+                    },
+                ],
+            ),
+            ComponentAsProp(id="dynamic", dynamic={"inside-dynamic": Div("dynamic")}),
+            ComponentAsProp(
+                id="dynamic-dict", dynamic_dict={"node": {"dict-dyn": Div("dict-dyn")}}
+            ),
+            ComponentAsProp(
+                dynamic={
+                    "output-dynamic": Div(id="output-dynamic"),
+                    "dyn-clicker": Button("click", id="click-dynamic"),
+                },
+            ),
+            ComponentAsProp(
+                dynamic_list=[
+                    {"dyn-list": Div("dynamic-list")},
                 ],
             ),
         ]
@@ -155,6 +170,14 @@ def send_to_list_of_dict(n_clicks):
     def updated_from_list(*_):
         return callback_context.triggered[0]["prop_id"]
 
+    @app.callback(
+        Output("output-dynamic", "children"),
+        Input("click-dynamic", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def on_click(n_clicks):
+        return f"Clicked {n_clicks}"
+
     dash_duo.start_server(app)
 
     assert dash_duo.get_logs() == []
@@ -205,4 +228,13 @@ def updated_from_list(*_):
     dash_duo.wait_for_text_to_equal("#multi", "first - second")
     dash_duo.wait_for_text_to_equal("#multi2", "foo - bar")
 
+    dash_duo.wait_for_text_to_equal("#inside-dynamic", "dynamic")
+    dash_duo.wait_for_text_to_equal("#dict-dyn", "dict-dyn")
+
+    dash_duo.wait_for_text_to_equal("#dyn-list", "dynamic-list")
+
+    dash_duo.find_element("#click-dynamic").click()
+
+    dash_duo.wait_for_text_to_equal("#dynamic-output", "Clicked 1")
+
     assert dash_duo.get_logs() == []