adding test component and test for rendertype prop

Author: BSd3v

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

@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+const RenderType = (props) => {
+    const onClick = () => {
+        props.setProps({n_clicks: (props.n_clicks || 0) + 1})
+    }
+
+    return <div id={props.id}>
+        <span>{props.renderType}</span>
+        <button onClick={onClick}>Test Internal</button>
+    </div>;
+};
+
+RenderType.propTypes = {
+    id: PropTypes.string,
+    renderType: PropTypes.string,
+    n_clicks: PropTypes.number,
+    setProps: PropTypes.func
+};
+export default RenderType;

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

@@ -7,6 +7,7 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
 import ComponentAsProp from './components/ComponentAsProp';
+import RenderType from './components/RenderType';
 
 import DrawCounter from './components/DrawCounter';
 import AddPropsComponent from "./components/AddPropsComponent";
@@ -32,4 +33,5 @@ export {
     ShapeOrExactKeepOrderComponent,
     ArrayOfExactOrShapeWithNodePropAssignNone,
     ExternalComponent,
+    RenderType
 };

tests/integration/renderer/test_render_type.py

@@ -0,0 +1,67 @@
+import time
+from dash import Dash, Input, Output, html
+import json
+
+import dash_test_components as dt
+
+
+def test_rtype001_rendertype(dash_duo):
+    app = Dash()
+
+    app.layout = html.Div(
+        [
+            html.Div(
+                dt.RenderType(id="render_test"),
+                id="container",
+            ),
+            html.Button("redraw", id="redraw"),
+            html.Button("update render", id="update_render"),
+            html.Button("clientside", id="clientside_render"),
+            html.Div(id="render_output"),
+        ]
+    )
+
+    app.clientside_callback(
+        """(n) => {
+            dash_clientside.set_props('render_test', {n_clicks: 20})
+        }""",
+        Input("clientside_render", "n_clicks"),
+    )
+
+    @app.callback(
+        Output("container", "children"),
+        Input("redraw", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def on_click(_):
+        return dt.RenderType(id="render_test")
+
+    @app.callback(
+        Output("render_test", "n_clicks"),
+        Input("update_render", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def update_render(_):
+        return 0
+
+    @app.callback(Output("render_output", "children"), Input("render_test", "n_clicks"))
+    def display_clicks(n):
+        return json.dumps(n)
+
+    dash_duo.start_server(app)
+
+    render_type = "#render_test > span"
+    render_output = "#render_output"
+    dash_duo.wait_for_text_to_equal(render_type, "parent")
+    dash_duo.find_element("#update_render").click()
+    dash_duo.wait_for_text_to_equal(render_type, "callback")
+    dash_duo.wait_for_text_to_equal(render_output, "0")
+    dash_duo.find_element("#clientside_render").click()
+    dash_duo.wait_for_text_to_equal(render_type, "clientsideApi")
+    dash_duo.wait_for_text_to_equal(render_output, "20")
+    dash_duo.find_element("#render_test > button").click()
+    dash_duo.wait_for_text_to_equal(render_type, "internal")
+    dash_duo.wait_for_text_to_equal(render_output, "21")
+    dash_duo.find_element("#redraw").click()
+    dash_duo.wait_for_text_to_equal(render_type, "parent")
+    dash_duo.wait_for_text_to_equal(render_output, "null")