adding test for graphs becoming visible after hidden

Author: BSd3v

components/dash-core-components/tests/integration/graph/test_graph_responsive.py

@@ -1,6 +1,7 @@
 import pytest
 
 from dash import Dash, Input, Output, State, dcc, html
+import plotly.graph_objects as go
 
 from dash.exceptions import PreventUpdate
 from dash.testing import wait
@@ -134,3 +135,75 @@ def resize(n_clicks, style):
     )
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grrs002_graph(dash_dcc):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Button("Generate Figures", id="generate-btn", n_clicks=0),
+            html.Button("Get Bounding Box", id="bounding-btn"),
+            html.Div(
+                id="graph-container",
+                children=[
+                    html.Div(id="bounding-output"),
+                    dcc.Graph(
+                        id="prec-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                    dcc.Graph(
+                        id="temp-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                ],
+                style={"display": "none"},
+            ),
+        ]
+    )
+
+    app.clientside_callback(
+        """() => {
+            pcd_container = document.querySelector("#prec-climate-daily")
+            pcd_container_bbox = pcd_container.getBoundingClientRect()
+            pcd_graph = pcd_container.querySelector('.main-svg')
+            pcd_graph_bbox = pcd_graph.getBoundingClientRect()
+            tcd_container = document.querySelector("#temp-climate-daily")
+            tcd_container_bbox = tcd_container.getBoundingClientRect()
+            tcd_graph = tcd_container.querySelector('.main-svg')
+            tcd_graph_bbox = tcd_graph.getBoundingClientRect()
+            return JSON.stringify(
+            pcd_container_bbox.height == pcd_graph_bbox.height &&
+            pcd_container_bbox.width == pcd_graph_bbox.width &&
+            tcd_container_bbox.height == tcd_graph_bbox.height &&
+            tcd_container_bbox.width == tcd_graph_bbox.width
+            )
+        }""",
+        Output("bounding-output", "children"),
+        Input("bounding-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+
+    @app.callback(
+        [
+            Output("prec-climate-daily", "figure"),
+            Output("temp-climate-daily", "figure"),
+            Output("graph-container", "style"),
+            Output("bounding-output", "children", allow_duplicate=True),
+        ],
+        [Input("generate-btn", "n_clicks")],
+        prevent_initial_call=True,
+    )
+    def update_figures(n_clicks):
+        fig_acc = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[0, 1, 0], mode="lines")])
+        fig_daily = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[1, 0, 1], mode="lines")])
+        return fig_acc, fig_daily, {"display": "block"}, "loaded"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#generate-btn", "Generate Figures")
+    dash_dcc.find_element("#generate-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "loaded")
+    dash_dcc.find_element("#bounding-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "true")