test server status indicator

Author: alexcjohnson

tests/integration/devtools/test_devtools_ui.py

@@ -1,3 +1,5 @@
+from time import sleep
+
 import dash_core_components as dcc
 import dash_html_components as html
 import dash
@@ -25,9 +27,9 @@ def test_dvui001_disable_props_check_config(dash_duo):
     dash_duo.wait_for_text_to_equal("#tcid", "Hello Props Check")
     assert dash_duo.find_elements("#broken svg.main-svg"), "graph should be rendered"
 
-    assert dash_duo.find_elements(
-        ".dash-debug-menu"
-    ), "the debug menu icon should show up"
+    # open the debug menu so we see the "hot reload off" indicator
+    dash_duo.find_element(".dash-debug-menu").click()
+    sleep(1)  # wait for debug menu opening animation
 
     dash_duo.percy_snapshot("devtools - disable props check - Graph should render")
 

tests/integration/devtools/test_hot_reload.py

@@ -3,6 +3,8 @@
 
 import dash_html_components as html
 import dash
+from dash.dependencies import Input, Output
+from dash.exceptions import PreventUpdate
 
 
 RED_BG = """
@@ -14,15 +16,27 @@
 
 def test_dvhr001_hot_reload(dash_duo):
     app = dash.Dash(__name__, assets_folder="hr_assets")
-    app.layout = html.Div([html.H3("Hot reload")], id="hot-reload-content")
+    app.layout = html.Div([
+        html.H3("Hot reload", id="text"),
+        html.Button("Click", id="btn")
+    ], id="hot-reload-content")
 
-    dash_duo.start_server(
-        app,
+    @app.callback(Output("text", "children"), [Input("btn", "n_clicks")])
+    def new_text(n):
+        if not n:
+            raise PreventUpdate
+        return n
+
+    hot_reload_settings = dict(
         dev_tools_hot_reload=True,
+        dev_tools_ui=True,
+        dev_tools_serve_dev_bundles=True,
         dev_tools_hot_reload_interval=0.1,
         dev_tools_hot_reload_max_retry=100,
     )
 
+    dash_duo.start_server(app, **hot_reload_settings)
+
     # default overload color is blue
     dash_duo.wait_for_style_to_equal(
         "#hot-reload-content", "background-color", "rgba(0, 0, 255, 1)"
@@ -51,3 +65,34 @@ def test_dvhr001_hot_reload(dash_duo):
     dash_duo.wait_for_style_to_equal(
         "#hot-reload-content", "background-color", "rgba(0, 0, 255, 1)"
     )
+
+    # Now check the server status indicator functionality
+
+    dash_duo.find_element(".dash-debug-menu").click()
+    dash_duo.find_element(".dash-debug-menu__button--available")
+    sleep(1)  # wait for opening animation
+    dash_duo.percy_snapshot(name="hot-reload-available")
+
+    dash_duo.server.stop()
+    sleep(1)  # make sure we would have requested the reload hash multiple times
+    dash_duo.find_element(".dash-debug-menu__button--unavailable")
+    dash_duo.wait_for_no_elements(".dash-fe-error__title")
+    dash_duo.percy_snapshot(name="hot-reload-unavailable")
+
+    dash_duo.find_element(".dash-debug-menu").click()
+    sleep(1)  # wait for opening animation
+    dash_duo.find_element(".dash-debug-disconnected")
+    dash_duo.percy_snapshot(name="hot-reload-unavailable-small")
+
+    dash_duo.find_element("#btn").click()
+    dash_duo.wait_for_text_to_equal(
+        ".dash-fe-error__title", "Callback failed: the server did not respond."
+    )
+
+    # start up the server again
+    dash_duo.start_server(app, **hot_reload_settings)
+
+    # rerenders with debug menu closed after reload
+    # reopen and check that server is now available
+    dash_duo.find_element(".dash-debug-menu--closed").click()
+    dash_duo.find_element(".dash-debug-menu__button--available")