test: E2E Playwright golden rule tests — js_on and js_off for interactive components

fsecada01 · claude · fsecada01 · commit 1b543f0fa34e · 2026-04-25T17:23:31.000-04:00
- Add tests/e2e/conftest.py: session-scoped FastAPI (uvicorn thread) and
  Django (subprocess) server fixtures, plus js_on/js_off parameterized page fixtures
- Add tests/e2e/test_bulma_jinja.py: 6 tests covering modal open/close,
  notification dismiss, panel expand, navbar burger, form-field render, and
  no-JS accessibility (2x each via param = 12 total, 1 skipped on js_on mode)
- Add tests/e2e/test_bulma_cotton.py: 3 tests covering form-field, modal,
  and card rendering (2x each via param = 6 total)
- Add tests/e2e/_django_e2e_server.py + _e2e_django_settings.py: isolated
  subprocess server with django_cotton, COTTON_DIR=cotton/bulma, and
  COTTON_SNAKE_CASED_NAMES=False so cotton renders fully without polluting the
  main pytest process Django settings (prevents unit test regressions)
- Migrate all 14 cotton/bulma templates from &lt;c-props&gt; to &lt;c-vars&gt; to be
  compatible with django-cotton 2.x (c-props compiled to component lookup in 2.x)
- Mount /static/cf_ui static files in the jinja integration app so Alpine.js
  initializes for js_on E2E tests

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/cf_ui/templates/cotton/bulma/cf/breadcrumb.html b/src/cf_ui/templates/cotton/bulma/cf/breadcrumb.html
@@ -1,4 +1,4 @@
-<c-props items="[]" class="" />
+<c-vars items="[]" class="" />
 <nav class="breadcrumb {{ class }}" aria-label="breadcrumbs">
   <ul>
     {% for item in items %}
diff --git a/src/cf_ui/templates/cotton/bulma/cf/card.html b/src/cf_ui/templates/cotton/bulma/cf/card.html
@@ -1,4 +1,4 @@
-<c-props header="" footer="" class="" />
+<c-vars header="" footer="" class="" />
 <div class="card {{ class }}">
   {% if header %}
   <header class="card-header">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html b/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
@@ -1,4 +1,4 @@
-<c-props name label error="" choices="[]" selected="[]" class="" />
+<c-vars name label error="" choices="[]" selected="[]" class="" />
 <div class="field {{ class }}">
   <label class="label">{{ label }}</label>
   <div class="control">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/form-field.html b/src/cf_ui/templates/cotton/bulma/cf/form-field.html
@@ -1,4 +1,4 @@
-<c-props name label value="" error="" type="text" required="false" class="" />
+<c-vars name label value="" error="" type="text" required="false" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/modal.html b/src/cf_ui/templates/cotton/bulma/cf/modal.html
@@ -1,4 +1,4 @@
-<c-props id="modal" header="" footer="" class="" />
+<c-vars id="modal" header="" footer="" class="" />
 <div id="{{ id }}"
      class="modal {{ class }}"
      x-data="cfModal"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/navbar.html b/src/cf_ui/templates/cotton/bulma/cf/navbar.html
@@ -1,4 +1,4 @@
-<c-props brand="" start="" end="" class="" />
+<c-vars brand="" start="" end="" class="" />
 <nav class="navbar {{ class }}" role="navigation" aria-label="main navigation"
      x-data="cfNavbar">
   <div class="navbar-brand">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/notification.html b/src/cf_ui/templates/cotton/bulma/cf/notification.html
@@ -1,4 +1,4 @@
-<c-props message type="info" dismissible="true" class="" />
+<c-vars message type="info" dismissible="true" class="" />
 <div class="notification is-{{ type }} {{ class }}"
      x-data="{ visible: true }"
      x-show="visible">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/pagination.html b/src/cf_ui/templates/cotton/bulma/cf/pagination.html
@@ -1,4 +1,4 @@
-<c-props page="1" total_pages="1" hx_target="" hx_url="" class="" />
+<c-vars page="1" total_pages="1" hx_target="" hx_url="" class="" />
 {% load cf_ui %}
 <nav class="pagination is-centered {{ class }}" role="navigation" aria-label="pagination">
   {% if page|add:"0" > 1 %}
diff --git a/src/cf_ui/templates/cotton/bulma/cf/panel.html b/src/cf_ui/templates/cotton/bulma/cf/panel.html
@@ -1,4 +1,4 @@
-<c-props title class="" />
+<c-vars title class="" />
 <div class="card {{ class }}" x-data="cfPanel">
   <header class="card-header" style="cursor:pointer" @click="toggle()">
     <p class="card-header-title">{{ title }}</p>
diff --git a/src/cf_ui/templates/cotton/bulma/cf/progress.html b/src/cf_ui/templates/cotton/bulma/cf/progress.html
@@ -1,4 +1,4 @@
-<c-props value="0" max="100" type="primary" label="" class="" />
+<c-vars value="0" max="100" type="primary" label="" class="" />
 <div class="{{ class }}">
   {% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}
   <progress class="progress is-{{ type }}"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/select.html b/src/cf_ui/templates/cotton/bulma/cf/select.html
@@ -1,4 +1,4 @@
-<c-props name label value="" error="" options="[]" class="" />
+<c-vars name label value="" error="" options="[]" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/table.html b/src/cf_ui/templates/cotton/bulma/cf/table.html
@@ -1,4 +1,4 @@
-<c-props columns="[]" rows="[]" hx_target="" hx_url="" class="" />
+<c-vars columns="[]" rows="[]" hx_target="" hx_url="" class="" />
 {% load cf_ui %}
 <div class="{{ class }}">
   <table class="table is-striped is-hoverable is-fullwidth">
diff --git a/src/cf_ui/templates/cotton/bulma/cf/tabs.html b/src/cf_ui/templates/cotton/bulma/cf/tabs.html
@@ -1,4 +1,4 @@
-<c-props hx_target="tab-content" tabs="[]" class="" />
+<c-vars hx_target="tab-content" tabs="[]" class="" />
 <div class="{{ class }}" x-data="cfTabs">
   <div class="tabs">
     <ul>
diff --git a/src/cf_ui/templates/cotton/bulma/cf/textarea.html b/src/cf_ui/templates/cotton/bulma/cf/textarea.html
@@ -1,4 +1,4 @@
-<c-props name label value="" error="" rows="4" class="" />
+<c-vars name label value="" error="" rows="4" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
diff --git a/tests/e2e/_django_e2e_server.py b/tests/e2e/_django_e2e_server.py
@@ -0,0 +1,33 @@
+"""
+Standalone Django WSGI server for E2E tests.
+
+Run as a subprocess so it gets its own Python process and Django configuration,
+isolated from the pytest process's Django settings.
+"""
+import os
+import sys
+from pathlib import Path
+
+HOST = sys.argv[1] if len(sys.argv) > 1 else "127.0.0.1"
+PORT = int(sys.argv[2]) if len(sys.argv) > 2 else 8772
+
+# Ensure project root and src/ are on the path so imports work.
+_here = Path(__file__).parent
+_project_root = _here.parent.parent
+_src = _project_root / "src"
+for _p in [str(_project_root), str(_src)]:
+    if _p not in sys.path:
+        sys.path.insert(0, _p)
+
+# Configure Django with cotton-enabled settings
+os.environ["DJANGO_SETTINGS_MODULE"] = "tests.e2e._e2e_django_settings"
+
+import django
+
+django.setup()
+
+from django.core.handlers.wsgi import WSGIHandler
+from wsgiref.simple_server import make_server
+
+httpd = make_server(HOST, PORT, WSGIHandler())
+httpd.serve_forever()
diff --git a/tests/e2e/_e2e_django_settings.py b/tests/e2e/_e2e_django_settings.py
@@ -0,0 +1,51 @@
+"""
+Django settings for E2E tests only.
+
+This module is used by the E2E server subprocess. It explicitly includes
+django_cotton in INSTALLED_APPS and configures COTTON_DIR and
+COTTON_SNAKE_CASED_NAMES so that cf-ui cotton components render fully.
+
+It MUST NOT be imported by the main pytest process to avoid polluting
+the shared Django settings used by unit and integration tests.
+"""
+from pathlib import Path
+
+from cf_ui import JINJA_TEMPLATES_DIR
+
+BASE_DIR = Path(__file__).parent.parent / "integration" / "cotton_app"
+
+# cf-ui templates root — contains cotton/{theme}/cf/*.html
+CF_UI_TEMPLATES_ROOT = JINJA_TEMPLATES_DIR.parent.parent
+
+SECRET_KEY = "e2e-test-secret-key-not-for-production"
+DEBUG = True
+INSTALLED_APPS = [
+    "django.contrib.contenttypes",
+    "django.contrib.auth",
+    "django.contrib.staticfiles",
+    "django_cotton",
+    "cf_ui.django.CfUiConfig",
+]
+DATABASES = {"default": {"ENGINE": "django.db.backends.sqlite3", "NAME": ":memory:"}}
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [
+            CF_UI_TEMPLATES_ROOT,  # provides cotton/bulma/cf/*.html
+            BASE_DIR / "templates",  # provides cotton_gallery/*.html
+        ],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [],
+            "libraries": {"cf_ui": "cf_ui.templatetags.cf_ui"},
+        },
+    }
+]
+CF_UI_THEME = "bulma"
+# COTTON_DIR: django-cotton resolves <c-cf.card> → cotton/bulma/cf/card.html
+# With CF_UI_TEMPLATES_ROOT in DIRS, it finds src/cf_ui/templates/cotton/bulma/cf/card.html
+COTTON_DIR = "cotton/bulma"
+# Allow hyphenated filenames (form-field.html, checkbox-group.html)
+COTTON_SNAKE_CASED_NAMES = False
+ROOT_URLCONF = "tests.integration.cotton_app.urls"
+STATIC_URL = "/static/"
diff --git a/tests/e2e/conftest.py b/tests/e2e/conftest.py
@@ -0,0 +1,63 @@
+import subprocess
+import sys
+import threading
+import time
+from pathlib import Path
+from typing import Generator
+
+import pytest
+import uvicorn
+
+
+def _run_fastapi_server(host: str = "127.0.0.1", port: int = 8771) -> None:
+    from tests.integration.jinja_app.main import app
+
+    config = uvicorn.Config(app, host=host, port=port, log_level="error")
+    server = uvicorn.Server(config)
+    server.run()
+
+
+@pytest.fixture(scope="session")
+def jinja_server_url() -> Generator[str, None, None]:
+    thread = threading.Thread(target=_run_fastapi_server, daemon=True)
+    thread.start()
+    time.sleep(2.0)
+    yield "http://127.0.0.1:8771"
+
+
+@pytest.fixture(scope="session")
+def cotton_server_url() -> Generator[str, None, None]:
+    """
+    Start the Django cotton E2E server as a subprocess so it has its own
+    Python process with isolated Django settings that include django_cotton.
+    This prevents contaminating the main pytest process's Django configuration
+    (which unit and integration tests rely on).
+    """
+    server_script = Path(__file__).parent / "_django_e2e_server.py"
+    proc = subprocess.Popen(
+        [sys.executable, str(server_script), "127.0.0.1", "8772"],
+        stdout=subprocess.DEVNULL,
+        stderr=subprocess.DEVNULL,
+    )
+    time.sleep(2.0)
+    yield "http://127.0.0.1:8772"
+    proc.terminate()
+    proc.wait(timeout=5)
+
+
+@pytest.fixture(params=["js_on", "js_off"])
+def jinja_page(request, browser, jinja_server_url):
+    ctx = browser.new_context(java_script_enabled=(request.param == "js_on"))
+    page = ctx.new_page()
+    page.set_default_timeout(5000)
+    yield page, request.param
+    ctx.close()
+
+
+@pytest.fixture(params=["js_on", "js_off"])
+def cotton_page(request, browser, cotton_server_url):
+    ctx = browser.new_context(java_script_enabled=(request.param == "js_on"))
+    page = ctx.new_page()
+    page.set_default_timeout(5000)
+    yield page, request.param
+    ctx.close()
diff --git a/tests/e2e/test_bulma_cotton.py b/tests/e2e/test_bulma_cotton.py
@@ -0,0 +1,26 @@
+import re
+
+import pytest
+from playwright.sync_api import expect
+
+
+def test_form_field_cotton_renders(cotton_page, cotton_server_url):
+    page, js_mode = cotton_page
+    page.goto(f"{cotton_server_url}/form-field/")
+    expect(page.locator("input[name='email']")).to_be_attached()
+
+
+def test_modal_cotton_renders(cotton_page, cotton_server_url):
+    page, js_mode = cotton_page
+    page.goto(f"{cotton_server_url}/modal/")
+    expect(page.locator(".modal")).to_be_attached()
+    if js_mode == "js_on":
+        expect(page.locator(".modal")).not_to_have_class(re.compile(r"is-active"))
+
+
+def test_card_cotton_renders(cotton_page, cotton_server_url):
+    page, js_mode = cotton_page
+    page.goto(f"{cotton_server_url}/card/")
+    expect(page.locator(".card")).to_be_visible()
+    expect(page.locator(".card-header-title")).to_have_text("Card Title")
+    expect(page.locator(".card-footer-item")).to_have_text("Card Footer")
diff --git a/tests/e2e/test_bulma_jinja.py b/tests/e2e/test_bulma_jinja.py
@@ -0,0 +1,96 @@
+import re
+
+import pytest
+from playwright.sync_api import expect
+
+
+def _wait_for_alpine(page) -> None:
+    """Wait for Alpine.js to initialize and remove x-cloak attributes."""
+    page.wait_for_function(
+        "() => window.Alpine !== undefined && document.querySelectorAll('[x-cloak]').length === 0",
+        timeout=8000,
+    )
+
+
+def test_modal_opens_and_closes(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    page.goto(f"{jinja_server_url}/gallery")
+
+    modal = page.locator("#e2e-modal")
+    if js_mode == "js_on":
+        _wait_for_alpine(page)
+        # Modal is closed by default — no is-active class
+        expect(modal).not_to_have_class(re.compile(r"is-active"))
+        # Open via the Alpine.store cf.modal API
+        page.evaluate("Alpine.store('cf').modal.open('e2e-modal')")
+        expect(modal).to_have_class(re.compile(r"is-active"))
+        # Close via the delete button inside the modal
+        modal.locator(".delete").click()
+        expect(modal).not_to_have_class(re.compile(r"is-active"))
+    else:
+        # Without JS the element still exists in the DOM
+        expect(modal).to_be_attached()
+
+
+def test_notification_dismisses(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    page.goto(f"{jinja_server_url}/gallery")
+    notification = page.locator(".notification")
+
+    if js_mode == "js_on":
+        _wait_for_alpine(page)
+        expect(notification).to_be_visible()
+        notification.locator(".delete").click()
+        expect(notification).to_be_hidden()
+    else:
+        # Without Alpine x-show is not processed — element is present
+        expect(notification).to_be_attached()
+
+
+def test_panel_expands(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    page.goto(f"{jinja_server_url}/gallery")
+
+    if js_mode == "js_on":
+        _wait_for_alpine(page)
+        # Panel card-content is hidden by default (x-cloak + x-show="open", open=false)
+        panel_content = page.locator(".card-content").first
+        expect(panel_content).to_be_hidden()
+        # Click card-header to expand
+        page.locator(".card-header").first.click()
+        expect(panel_content).to_be_visible()
+    else:
+        # x-cloak keeps it hidden without JS — check it's in the DOM
+        expect(page.locator(".card-content").first).to_be_attached()
+
+
+def test_navbar_burger_toggles_menu(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    page.goto(f"{jinja_server_url}/gallery")
+
+    if js_mode == "js_on":
+        _wait_for_alpine(page)
+        page.set_viewport_size({"width": 600, "height": 800})
+        burger = page.locator(".navbar-burger")
+        menu = page.locator(".navbar-menu")
+        expect(menu).not_to_have_class(re.compile(r"is-active"))
+        burger.click()
+        expect(menu).to_have_class(re.compile(r"is-active"))
+    else:
+        expect(page.locator(".navbar")).to_be_visible()
+
+
+def test_form_field_renders(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    page.goto(f"{jinja_server_url}/form-field")
+    expect(page.locator("input[name='email']")).to_be_visible()
+    expect(page.locator(".label")).to_have_text("Email")
+
+
+def test_page_accessible_without_js(jinja_page, jinja_server_url):
+    page, js_mode = jinja_page
+    if js_mode != "js_off":
+        pytest.skip("only runs in js_off mode")
+    page.goto(f"{jinja_server_url}/gallery")
+    expect(page.locator("section.section")).to_be_visible()
+    expect(page.locator("body")).not_to_be_empty()
diff --git a/tests/integration/jinja_app/main.py b/tests/integration/jinja_app/main.py
@@ -2,14 +2,19 @@
 
 from fastapi import FastAPI
 from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from jinjax import Catalog
 
+from cf_ui import JINJA_TEMPLATES_DIR
 from cf_ui.fastapi import install_cf_ui
 
+_CF_UI_STATIC_DIR = JINJA_TEMPLATES_DIR.parent.parent / "static" / "cf_ui"
+
 catalog = Catalog()
 install_cf_ui(catalog, theme="bulma")
 
 app = FastAPI()
+app.mount("/static/cf_ui", StaticFiles(directory=str(_CF_UI_STATIC_DIR)), name="cf_ui_static")
 
 
 @app.get("/form-field", response_class=HTMLResponse)

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props items="[]" class="" />`
	`1`	`+<c-vars items="[]" class="" />`
`2`	`2`	`<nav class="breadcrumb {{ class }}" aria-label="breadcrumbs">`
`3`	`3`	`<ul>`
`4`	`4`	`{% for item in items %}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props header="" footer="" class="" />`
	`1`	`+<c-vars header="" footer="" class="" />`
`2`	`2`	`<div class="card {{ class }}">`
`3`	`3`	`{% if header %}`
`4`	`4`	`<header class="card-header">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props name label error="" choices="[]" selected="[]" class="" />`
	`1`	`+<c-vars name label error="" choices="[]" selected="[]" class="" />`
`2`	`2`	`<div class="field {{ class }}">`
`3`	`3`	`<label class="label">{{ label }}</label>`
`4`	`4`	`<div class="control">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props name label value="" error="" type="text" required="false" class="" />`
	`1`	`+<c-vars name label value="" error="" type="text" required="false" class="" />`
`2`	`2`	`<div class="field {{ class }}">`
`3`	`3`	`<label class="label" for="{{ name }}">{{ label }}</label>`
`4`	`4`	`<div class="control">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props id="modal" header="" footer="" class="" />`
	`1`	`+<c-vars id="modal" header="" footer="" class="" />`
`2`	`2`	`<div id="{{ id }}"`
`3`	`3`	`class="modal {{ class }}"`
`4`	`4`	`x-data="cfModal"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props brand="" start="" end="" class="" />`
	`1`	`+<c-vars brand="" start="" end="" class="" />`
`2`	`2`	`<nav class="navbar {{ class }}" role="navigation" aria-label="main navigation"`
`3`	`3`	`x-data="cfNavbar">`
`4`	`4`	`<div class="navbar-brand">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props message type="info" dismissible="true" class="" />`
	`1`	`+<c-vars message type="info" dismissible="true" class="" />`
`2`	`2`	`<div class="notification is-{{ type }} {{ class }}"`
`3`	`3`	`x-data="{ visible: true }"`
`4`	`4`	`x-show="visible">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props page="1" total_pages="1" hx_target="" hx_url="" class="" />`
	`1`	`+<c-vars page="1" total_pages="1" hx_target="" hx_url="" class="" />`
`2`	`2`	`{% load cf_ui %}`
`3`	`3`	`<nav class="pagination is-centered {{ class }}" role="navigation" aria-label="pagination">`
`4`	`4`	`{% if page\|add:"0" > 1 %}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props title class="" />`
	`1`	`+<c-vars title class="" />`
`2`	`2`	`<div class="card {{ class }}" x-data="cfPanel">`
`3`	`3`	`<header class="card-header" style="cursor:pointer" @click="toggle()">`
`4`	`4`	`<p class="card-header-title">{{ title }}</p>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<c-props value="0" max="100" type="primary" label="" class="" />`
	`1`	`+<c-vars value="0" max="100" type="primary" label="" class="" />`
`2`	`2`	`<div class="{{ class }}">`
`3`	`3`	`{% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}`
`4`	`4`	`<progress class="progress is-{{ type }}"`