EOS/tests/test_eosdashbrowser.py

"""EOSdash in a real (headless) browser.

These tests run only with ``pytest --browser-test`` (marker ``browser``) and need
the browser: ``uv run --extra dev playwright install chromium``. They start EOS
(which starts EOSdash) with temporary directories and check what unit tests
cannot see: that the pages render in a browser, in light and dark mode, without
JavaScript errors. This is also the place for checks of htmx page actions,
BokehJS plots and their dark mode.

Keep these tests few and coarse; test the logic of the pages in unit tests.
"""

from __future__ import annotations

import time
from typing import TYPE_CHECKING, Any, Iterator, Literal
from urllib.parse import urlsplit

import pytest
import requests

if TYPE_CHECKING:
    from playwright.sync_api import Browser, ConsoleMessage, Page

pytestmark = pytest.mark.browser

# Console messages that are known and not caused by the page under test.
KNOWN_CONSOLE_NOISE = (
    # Tailwind is loaded from its CDN.
    "cdn.tailwindcss.com should not be used in production",
    # The menu tabs include the search box of the Config page in their requests;
    # on the other pages htmx reports that it is missing.
    'The selector "#config-search" on hx-include returned no matches',
)

# Time to wait for EOSdash (started by EOS after EOS is up) [s].
EOSDASH_STARTUP_S = 60
# Time to wait for page actions [ms].
PAGE_TIMEOUT_MS = 30000

# Element the menu tabs swap their content into.
PAGE_CONTENT_SELECTOR = "#page-content"


class DashPage:
    """A browser page on EOSdash that records JavaScript errors."""

    def __init__(self, page: Page, base_url: str) -> None:
        """Wrap a browser page and start recording errors.

        Args:
            page: Browser page to use.
            base_url: Base URL of EOSdash, e.g. ``http://127.0.0.1:8504``.
        """
        self.page = page
        self.base_url = base_url
        self.errors: list[str] = []
        page.set_default_timeout(PAGE_TIMEOUT_MS)
        page.on("pageerror", lambda exc: self.errors.append(f"pageerror: {exc}"))
        page.on("console", self._console)

    def _console(self, message: ConsoleMessage) -> None:
        """Record console errors that are not known noise."""
        if message.type != "error":
            return
        if any(noise in message.text for noise in KNOWN_CONSOLE_NOISE):
            return
        self.errors.append(f"console: {message.text}")

    def open(self) -> None:
        """Open the EOSdash start page and wait until it is loaded."""
        self.page.goto(f"{self.base_url}/", wait_until="networkidle")

    def tab_paths(self) -> list[str]:
        """Return the paths of the menu tabs."""
        paths: list[str] = self.page.eval_on_selector_all(
            "button[hx-get^='/eosdash/']", "buttons => buttons.map(b => b.getAttribute('hx-get'))"
        )
        return paths

    def page_content(self) -> str:
        """Return the HTML of the page content area."""
        return self.page.inner_html(PAGE_CONTENT_SELECTOR)

    def open_tab(self, path: str) -> int:
        """Click a menu tab and wait until its content is swapped in.

        The content area is emptied before the click, so content left over from
        the previous tab cannot be mistaken for the new tab: htmx does not swap
        error responses, which leaves the content area empty.

        htmx swaps the content in after the response has arrived. For a
        successful response this waits until the content area is filled again;
        ``wait_for_load_state()`` would not wait, as the page itself is loaded.

        Args:
            path: Path of the tab, as in its ``hx-get`` attribute.

        Returns:
            HTTP status of the tab request.
        """
        from playwright.sync_api import TimeoutError as PlaywrightTimeoutError

        self.page.eval_on_selector(PAGE_CONTENT_SELECTOR, "element => element.replaceChildren()")
        # The tabs add query values (e.g. dark=true): compare the path only.
        with self.page.expect_response(
            lambda response: urlsplit(response.url).path == path
        ) as response_info:
            self.page.click(f"button[hx-get='{path}']")
        response = response_info.value
        if response.ok:
            try:
                self.page.wait_for_function(
                    "selector => document.querySelector(selector)?.innerHTML.trim() !== ''",
                    arg=PAGE_CONTENT_SELECTOR,
                )
            except PlaywrightTimeoutError:
                # Nothing was swapped in; the caller's content check reports it.
                pass
        return response.status


def wait_for_eosdash(base_url: str) -> None:
    """Wait until EOSdash answers; EOS starts it after its own startup."""
    deadline = time.monotonic() + EOSDASH_STARTUP_S
    while time.monotonic() < deadline:
        try:
            if requests.get(f"{base_url}/eosdash/health", timeout=2).status_code == 200:
                return
        except requests.RequestException:
            pass
        time.sleep(1)
    pytest.fail(f"EOSdash at {base_url} did not start within {EOSDASH_STARTUP_S} s")


@pytest.fixture(scope="class")
def servers(server_setup_for_class: dict[str, Any]) -> dict[str, Any]:
    """EOS and EOSdash, started with temporary directories for the test class."""
    wait_for_eosdash(str(server_setup_for_class["eosdash_server"]))
    return server_setup_for_class


class TestEOSdashInBrowser:
    """EOSdash pages rendered in headless Chromium."""

    @pytest.fixture
    def dash(
        self, chromium: Browser, servers: dict[str, Any], request: pytest.FixtureRequest
    ) -> Iterator[DashPage]:
        """A fresh page; parametrize ``dash`` indirectly with "light" or "dark" for the color scheme.

        ``chromium`` comes before ``servers`` so that a missing browser fails before EOS is started.
        """
        color_scheme: Literal["light", "dark"] = (
            "dark" if getattr(request, "param", "light") == "dark" else "light"
        )
        context = chromium.new_context(
            viewport={"width": 1400, "height": 1000}, color_scheme=color_scheme
        )
        try:
            page = DashPage(context.new_page(), str(servers["eosdash_server"]))
            page.open()
            yield page
        finally:
            context.close()

    @pytest.mark.parametrize("dash", ["light", "dark"], indirect=True)
    def test_every_tab_renders_without_errors(self, dash: DashPage) -> None:
        """Every menu tab loads successfully and renders content without JavaScript errors."""
        paths = dash.tab_paths()
        assert paths
        for path in paths:
            status = dash.open_tab(path)
            assert status == 200, f"{path}: HTTP {status}"
            assert dash.page_content().strip(), f"{path}: no content rendered"
        assert dash.errors == []

    def test_setup_wizard_stays_on_step_after_config_update(self, dash: DashPage) -> None:
        """A configuration card in the setup wizard updates the value and returns to the wizard."""
        assert dash.open_tab("/eosdash/wizard") == 200
        dash.page.click("#wizard-next")
        dash.page.wait_for_selector("#wizard-back")

        dash.page.click("#wizard summary:has-text('general.latitude')")
        value_input = "#general-latitude-update-form input[type='text']"
        dash.page.fill(value_input, "48.137")
        with dash.page.expect_response(
            lambda response: (
                urlsplit(response.url).path == "/eosdash/configuration"
                and response.request.method == "PUT"
            )
        ) as response_info:
            dash.page.press(value_input, "Enter")
        assert response_info.value.ok
        dash.page.wait_for_function(
            "selector => document.querySelector(selector)?.innerHTML.includes('48.137')",
            arg=PAGE_CONTENT_SELECTOR,
        )

        # Still the location step of the wizard, not the Config page
        assert dash.page.locator("#wizard").count() == 1
        assert "Step 2 of" in dash.page_content()
        assert dash.errors == []

    def test_setup_wizard_shows_provider_settings(self, dash: DashPage) -> None:
        """Selecting a provider in the setup wizard shows its settings, which work in the wizard."""
        assert dash.open_tab("/eosdash/wizard") == 200
        dash.page.click("#wizard-step-pv")
        dash.page.wait_for_selector("#wizard[hx-vals*='\"pv\"']")

        dash.page.click("#wizard summary:has-text('pvforecast.provider')")
        dash.page.select_option("#pvforecast-provider-value-select", "PVForecastAkkudoktor")
        dash.page.click("#pvforecast-provider-update-value-form button")
        planes = "#wizard summary:has-text('pvforecast.planes')"
        dash.page.wait_for_selector(planes)

        # The card of a list of items sends its updates to the wizard, too
        dash.page.click(f"{planes} button:has-text('Add item')")
        dash.page.wait_for_selector(f"{planes} >> text=1 item")
        assert dash.page.locator("#wizard[hx-vals*='\"pv\"']").count() == 1
        assert dash.errors == []