igloo: cover the skeleton-to-canvas transition in the browser

Implements L-01 and drops its skip (CMK-37022).

It is the one browser backstop for the area; the other cases are
covered in Vitest, so their skeletons go, as does T-01, whose
affordance left the design. The routes are collected and continued
by hand, since a sleeping handler would hold the assertions back
too, and the handler stops holding rather than being unrouted,
which would cancel the invocations still pending in it.

Change-Id: Icdf0452efe85a3d0dce6126ec1dc2281954bdc01

Author: smeagol91

tests/system/gui/test_graph_loading_state.py

@@ -3,129 +3,106 @@
 # This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
 # conditions defined in the file COPYING, which is part of this source code package.
 
-"""Graph loading and error states (R1.4). Skipped skeletons (CMK-35973).
+"""Graph loading and error states (R1.4).
 
-Complete once the engine renders: drive the load window with page.route on the graph
-time-series endpoint (hold or error it). Indicator follows containment - skeleton on pages,
-spinner in dashboard widgets (CMK-35972 foundation).
+L-01 is the browser backstop for the whole area: it is the one test proving the
+skeleton -> canvas transition wires up against a real fetch. Everything else the test plan
+lists here - the fast load, the widgets' spinner and its containment, the error states and
+their retry - is component-level behaviour and is covered in the Vitest suites
+(`GraphGroup.test.ts`, `DashboardContentGraph.test.ts`), where the pending, 500 and 404
+responses can be driven exactly.
+
+C-01 to C-04 extend the same concern to the remaining surfaces and are skipped
+skeletons until the engine renders on them.
 """
 
+from collections.abc import Iterator
+
 import pytest
+from playwright.sync_api import expect, Route
 
+from tests.system.gui.testlib.playwright.pom.graphing.timeseries_graph import ServiceGraphs
 from tests.system.gui.testlib.playwright.pom.monitor.dashboard import MainDashboard
+from tests.system.gui.testlib.playwright.pom.monitor.service import ServicePage
+from tests.system.gui.testlib.playwright.pom.monitor.services_of_host import ServicesOfHostPage
 from tests.testlib.graphing import SKIP_PENDING_GRAPH_ENGINE
 
+# The endpoint every rendered graph fetches its data from; holding it holds the load window open.
+_GRAPH_DATA_URL = "**/domain-types/graph/actions/fetch_data/invoke"
 
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_skeleton_visible_while_loading_then_canvas(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """L-01 (R1.4 Area 1): a page skeleton shows during load, then the canvas.
-
-    Do: hold the time-series response ~2s; open the service detail page.
-    Assert: skeleton visible during the delay; after it, skeleton gone, canvas visible, no
-    console errors.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
-
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_no_skeleton_on_fast_load(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """L-02 (R1.4 Area 1): on a fast load the skeleton is not left visible.
-
-    Do: open the service detail page without delaying the route; wait for render.
-    Assert: skeleton not visible once the canvas is; no error state; no JS errors.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
-
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_dashboard_widget_shows_spinner_not_skeleton(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """S-01 (R1.4 Area 2): a dashboard graph widget shows a spinner, not a skeleton.
-
-    Do: hold the time-series response ~2s; open a dashboard with a graph widget.
-    Assert: spinner (not skeleton) visible during the delay; after it, spinner gone, canvas
-    visible.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
-
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_each_dashboard_widget_loads_independently(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """S-02 (R1.4 Area 2): each dashboard graph widget shows/resolves its own spinner.
-
-    Do: observe multiple graph widgets on one dashboard during the delayed load.
-    Assert: each has its own spinner (not one shared) and transitions to its own canvas.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
+# The same service the canvas interaction tests drive: several graphs from one /proc/meminfo, so
+# the group has more than one panel to skeletonise.
+SERVICE_WITH_GRAPHS = "Memory"
 
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_error_state_for_http_500(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """E-01 (R1.4 Area 3): HTTP 500 renders a 5xx-category error state.
 
-    Do: fulfil the time-series request with HTTP 500; open the service detail page.
-    Assert: error-state element visible with a 5xx message (no raw traceback/code); no
-    unhandled JS exception.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
+@pytest.fixture(name="javascript_errors")
+def fixture_javascript_errors(dashboard_page: MainDashboard) -> Iterator[list[str]]:
+    """Uncaught page errors raised while the test runs."""
+    errors: list[str] = []
+    dashboard_page.page.on("pageerror", lambda error: errors.append(str(error)))
+    yield errors
 
 
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_error_state_for_http_404(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """E-02 (R1.4 Area 3): HTTP 404 renders a 4xx-category error state.
-
-    Do: fulfil the time-series request with HTTP 404.
-    Assert: error-state element visible with a 4xx message; no unhandled JS exception.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
+def _open_service_graphs(dashboard_page: MainDashboard, host_name: str) -> ServiceGraphs:
+    """Navigate to the service detail page without waiting for its graphs to render."""
+    services_of_host = ServicesOfHostPage(dashboard_page.page, host_name=host_name)
+    services_of_host.services_table.host_services_table(host_name).get_by_role(
+        "link", name=SERVICE_WITH_GRAPHS, exact=True
+    ).click()
+    return ServiceGraphs(
+        ServicePage(
+            dashboard_page.page,
+            host_name=host_name,
+            service_name=SERVICE_WITH_GRAPHS,
+            navigate_to_page=False,
+        )
+    )
 
 
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_retry_control_refetches_and_renders(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """E-03 (R1.4 Area 3): the retry control re-requests and renders on success.
-
-    Do: induce the error state (HTTP 500), clear the route, click retry.
-    Assert: graph-data called again; graph renders; error-state no longer visible.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
-
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_dashboard_widget_error_is_contained(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
+def test_skeleton_visible_while_loading_then_canvas(
+    dashboard_page: MainDashboard,
+    graph_hosts_with_varying_data: list[str],
+    javascript_errors: list[str],
 ) -> None:
-    """E-04 (R1.4 Area 3): a widget data error stays in its frame and offers retry.
-
-    Do: fulfil the time-series request for one dashboard graph widget with HTTP 500.
-    Assert: error state visible in the widget with retry; adjacent widgets unaffected.
-    """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
-
+    """L-01 (R1.4 Area 1): a page skeleton shows during load, then the canvas.
 
-@pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)
-def test_still_loading_message_after_threshold(
-    dashboard_page: MainDashboard, graph_hosts_with_varying_data: list[str]
-) -> None:
-    """T-01 (R1.4 Area 4): a "still loading" message appears after 10s. Long-running (~12s).
+    The requests are collected and continued by hand rather than delayed inside the handler:
+    the sync API runs handlers on the thread the assertions need, so a sleeping handler would
+    hold the assertions back exactly as long as it holds the response.
 
-    Do: hold the time-series response ~12s; open the service detail page.
-    Assert: 1-10s skeleton only; after 10s "still loading" shows alongside it; after release
-    it disappears and the canvas shows.
+    The handler stops holding rather than being unrouted: `unroute` cancels the invocations
+    still pending in it, which marks their routes handled and leaves nothing left to continue.
     """
-    pytest.fail("CMK-35973 skeleton: body not implemented")
+    held: list[Route] = []
+    holding = True
+
+    def hold(route: Route) -> None:
+        # A refresh landing after the release must not be held, or it would pend to teardown.
+        if holding:
+            held.append(route)
+        else:
+            route.continue_()
+
+    dashboard_page.page.route(_GRAPH_DATA_URL, hold)
+
+    graphs = _open_service_graphs(dashboard_page, graph_hosts_with_varying_data[0])
+
+    expect(
+        graphs.skeletons.first,
+        "No skeleton stood in for the panels while the graph data was still pending",
+    ).to_be_visible()
+
+    assert held, "The page never requested its graph data, so nothing was ever held"
+    holding = False
+    for route in held:
+        route.continue_()
+
+    graphs.wait_until_rendered()
+    expect(
+        graphs.skeletons,
+        "The skeleton outlived the data it was standing in for",
+    ).to_have_count(0)
+    assert not javascript_errors, f"The load raised uncaught page errors: {javascript_errors}"
 
 
 @pytest.mark.skip(reason=SKIP_PENDING_GRAPH_ENGINE)

tests/system/gui/testlib/playwright/pom/graphing/timeseries_graph.py

@@ -261,6 +261,14 @@ def panels(self) -> Locator:
     def panel(self, index: int = 0) -> GraphPanel:
         return GraphPanel(self.panels.nth(index), self.page, self._main_area)
 
+    @property
+    def skeletons(self) -> Locator:
+        """The placeholders standing in for the panels while the first fetch is pending.
+
+        Decorative and ``aria-hidden``, so no role query reaches them.
+        """
+        return self._main_area.locator(".graphing-graph-skeleton")
+
     def panel_count(self) -> int:
         # ``.count()`` does not auto-wait, so this is only correct once
         # ``wait_until_rendered`` has run. The group mounts every panel in one tick, so the