adding test for temp component with ExternalWrapper

Author: BSd3v

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

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const ExternalComponent = ({ id, text, input_id, extra_component }) => {
+const ExternalComponent = ({ id, text, input_id, extra_component, extra_component_temp }) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
-
     return (
         <div id={id}>
             {text && <ExternalWrapper
@@ -18,13 +17,15 @@ const ExternalComponent = ({ id, text, input_id, extra_component }) => {
                         id: input_id
                     }
                 }}
-                componentPath={[...ctx.componentPath, 'external']}
+                componentPath={[JSON.stringify(ctx.componentPath), 'text']}
+                temp={true}
             />}
             {
                 extra_component &&
                 <ExternalWrapper
                     component={extra_component}
-                    componentPath={[...ctx.componentPath, 'extra']}
+                    componentPath={[...ctx.componentPath, 'props', 'extra_component']}
+                    temp={extra_component_temp}
             />}
         </div>
     )
@@ -39,6 +40,7 @@ ExternalComponent.propTypes = {
         namespace: PropTypes.string,
         props: PropTypes.object, 
     }),
+    extra_component_temp: PropTypes.bool,
 };
 
 export default ExternalComponent;

tests/integration/renderer/test_external_component.py

@@ -59,3 +59,51 @@ def click(*_):
     dash_duo.wait_for_text_to_equal("#out", "clicked")
 
     assert dash_duo.get_logs() == []
+
+def test_rext002_render_external_component_temp(dash_duo):
+    app = Dash()
+    app.layout = html.Div(
+        [
+            dcc.Tabs(
+                [
+                    dcc.Tab(label="Tab 1", children=[
+                        ExternalComponent(
+                            id="ext",
+                            extra_component={
+                                "type": "Div",
+                                "namespace": "dash_html_components",
+                                "props": {
+                                    "id": "extra",
+                                    "children": [
+                                        html.Div("extra children", id={"type": "extra", "index": 1})
+                                    ],
+                                },
+                            },
+                            extra_component_temp=True
+                        ),
+                    ]),
+                    dcc.Tab(label='Tab 2', children=[
+                        ExternalComponent(
+                            id="without-id",
+                            text="without-id",
+                        ),
+                    ])
+                ]
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#extra", "extra children")
+
+    dash_duo.find_element('.tab:nth-child(2)').click()
+    assert dash_duo.find_element("#without-id > input").get_attribute('value') == "without-id"
+
+    dash_duo.find_element('.tab').click()
+    dash_duo.find_element("#ext")
+    assert len(dash_duo.find_elements('#ext > *')) == 0, "extra component should be removed"
+
+    dash_duo.find_element('.tab:nth-child(2)').click()
+    assert dash_duo.find_element("#without-id > input").get_attribute('value') == "without-id"
+
+    assert dash_duo.get_logs() == []