diff --git a/docs/api-reference/browser_javascript.md b/docs/api-reference/browser_javascript.md index f3cd32dcc74..daa87f3c907 100644 --- a/docs/api-reference/browser_javascript.md +++ b/docs/api-reference/browser_javascript.md @@ -58,9 +58,10 @@ class SoundEffectState(rx.State): def sound_effect_demo(): return rx.hstack( - rx.script(""" - var button_sfx = new Audio("/vintage-button-sound-effect.mp3") - function playFromStart (sfx) {sfx.load(); sfx.play()}"""), + rx.script( + f'var button_sfx = new Audio("{rx.asset("vintage-button-sound-effect.mp3")}");' + " function playFromStart(sfx) {sfx.load(); sfx.play()}" + ), rx.button( "Play Immediately", on_click=rx.call_script("playFromStart(button_sfx)") ), diff --git a/docs/app/news/+sound-demo-asset.bugfix.md b/docs/app/news/+sound-demo-asset.bugfix.md new file mode 100644 index 00000000000..c8aa3133d6c --- /dev/null +++ b/docs/app/news/+sound-demo-asset.bugfix.md @@ -0,0 +1 @@ +Fix the inline-script sound demo on the browser JavaScript page, whose audio file resolved to a 404 because the site is served under `/docs`. diff --git a/docs/app/tests/test_browser_javascript_demo.py b/docs/app/tests/test_browser_javascript_demo.py new file mode 100644 index 00000000000..a24535f8aef --- /dev/null +++ b/docs/app/tests/test_browser_javascript_demo.py @@ -0,0 +1,33 @@ +"""Regression coverage for the browser JavaScript page's inline-script demo.""" + +from pathlib import Path + +import pytest +import reflex as rx +from reflex_base.registry import RegistrationContext + +from reflex_docs.docgen_pipeline import render_docgen_document + +DOCS = Path(__file__).resolve().parents[2] + + +@pytest.fixture(autouse=True) +def isolated_registration(): + """Keep the demo's state class out of the shared registries other tests use.""" + with RegistrationContext( + _config=rx.Config(app_name="reflex_docs", frontend_path="/docs") + ): + yield + + +def test_sound_demo_audio_resolves_under_frontend_path(): + """The sound effect URL carries the /docs mount, so the file is not a 404.""" + # A test-specific virtual path keeps the demo's state class from colliding + # with the one test_docgen_double_eval registers for the real page. + body, _ = render_docgen_document( + "docs/api-reference/browser_javascript_sound_test.md", + str(DOCS / "api-reference" / "browser_javascript.md"), + ) + rendered = str(body) + assert "/docs/vintage-button-sound-effect.mp3" in rendered + assert 'new Audio("/vintage-button-sound-effect.mp3")' not in rendered