test: integration test apps — FastAPI Jinja2 gallery and Django Cotton gallery

fsecada01 · claude · fsecada01 · commit 88e1e15bd5c1 · 2026-04-25T17:01:10.000-04:00
- Add FastAPI/JinjaX integration app (tests/integration/jinja_app/main.py) with
  endpoints for form-field, modal, card, navbar, tabs, and gallery
- Add Django/Cotton integration app (tests/integration/cotton_app/) with settings,
  URLs, views, and gallery templates using &lt;c-cf.*&gt; Cotton components
- Add 5 Jinja2 integration tests and 3 Cotton integration tests; all 101 tests pass
- Fix JinjaX Catalog compatibility: rename `class` → `extra_class` and `error=none`
  → `error=""` in all 14 Jinja2 templates to avoid Python keyword/parser conflicts
- Fix fastapi.install_cf_ui to use catalog.add_folder() (add_path does not exist)
- Add tests/integration/conftest.py to isolate Django setup from unit conftest

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/cf_ui/fastapi.py b/src/cf_ui/fastapi.py
@@ -11,4 +11,4 @@ def install_cf_ui(catalog: Any, theme: str = "bulma") -> None:
         theme: CSS framework theme name. Defaults to "bulma".
     """
     template_dir = JINJA_TEMPLATES_DIR / theme
-    catalog.add_path(template_dir, prefix="Cf")
+    catalog.add_folder(template_dir, prefix="Cf")
diff --git a/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja b/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja
@@ -1,6 +1,6 @@
-{#def items=[], class="" #}
+{#def items=[], extra_class="" #}
 {% set items = items if items is defined else [] %}
-<nav class="breadcrumb {{ class }}" aria-label="breadcrumbs">
+<nav class="breadcrumb {{ extra_class }}" aria-label="breadcrumbs">
   <ul>
     {% for item in items %}
     <li{% if loop.last %} class="is-active"{% endif %}>
diff --git a/src/cf_ui/templates/jinja/bulma/Card.jinja b/src/cf_ui/templates/jinja/bulma/Card.jinja
@@ -1,8 +1,8 @@
-{#def content="", header="", footer="", class="" #}
+{#def content="", header="", footer="", extra_class="" #}
 {% set header = header if header is defined else "" %}
 {% set content = content if content is defined else "" %}
 {% set footer = footer if footer is defined else "" %}
-<div class="card {{ class }}">
+<div class="card {{ extra_class }}">
   {% if header %}
   <header class="card-header">
     <p class="card-header-title">{{ header }}</p>
diff --git a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
@@ -1,5 +1,5 @@
-{#def name, label, choices=[], selected=[], error=none, class="" #}
-<div class="field {{ class }}">
+{#def name, label, choices=[], selected=[], error="", extra_class="" #}
+<div class="field {{ extra_class }}">
   <label class="label">{{ label }}</label>
   <div class="control">
     {% for choice in choices %}
diff --git a/src/cf_ui/templates/jinja/bulma/FormField.jinja b/src/cf_ui/templates/jinja/bulma/FormField.jinja
@@ -1,5 +1,5 @@
-{#def name, label, value="", error=none, type="text", required=false, class="" #}
-<div class="field {{ class }}">
+{#def name, label, value="", error="", type="text", required=false, extra_class="" #}
+<div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <input class="input{% if error %} is-danger{% endif %}"
diff --git a/src/cf_ui/templates/jinja/bulma/Modal.jinja b/src/cf_ui/templates/jinja/bulma/Modal.jinja
@@ -1,9 +1,9 @@
-{#def id="modal", header="", content="", footer="", class="" #}
+{#def id="modal", header="", content="", footer="", extra_class="" #}
 {% set header = header if header is defined else "" %}
 {% set content = content if content is defined else "" %}
 {% set footer = footer if footer is defined else "" %}
 <div id="{{ id }}"
-     class="modal {{ class }}"
+     class="modal {{ extra_class }}"
      x-data="cfModal"
      x-init="initModal()"
      :class="{ 'is-active': open }">
diff --git a/src/cf_ui/templates/jinja/bulma/Navbar.jinja b/src/cf_ui/templates/jinja/bulma/Navbar.jinja
@@ -1,8 +1,8 @@
-{#def brand="", start="", end="", class="" #}
+{#def brand="", start="", end="", extra_class="" #}
 {% set brand = brand if brand is defined else "" %}
 {% set start = start if start is defined else "" %}
 {% set end = end if end is defined else "" %}
-<nav class="navbar {{ class }}" role="navigation" aria-label="main navigation"
+<nav class="navbar {{ extra_class }}" role="navigation" aria-label="main navigation"
      x-data="cfNavbar">
   <div class="navbar-brand">
     {{ brand }}
diff --git a/src/cf_ui/templates/jinja/bulma/Notification.jinja b/src/cf_ui/templates/jinja/bulma/Notification.jinja
@@ -1,5 +1,5 @@
-{#def message, type="info", dismissible=true, class="" #}
-<div class="notification is-{{ type }} {{ class }}"
+{#def message, type="info", dismissible=true, extra_class="" #}
+<div class="notification is-{{ type }} {{ extra_class }}"
      x-data="{ visible: true }"
      x-show="visible">
   {% if dismissible %}
diff --git a/src/cf_ui/templates/jinja/bulma/Pagination.jinja b/src/cf_ui/templates/jinja/bulma/Pagination.jinja
@@ -1,7 +1,7 @@
-{#def page=1, total_pages=1, hx_target="", hx_url="", class="" #}
+{#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% set page = page if page is defined else 1 %}
 {% set total_pages = total_pages if total_pages is defined else 1 %}
-<nav class="pagination is-centered {{ class }}" role="navigation" aria-label="pagination">
+<nav class="pagination is-centered {{ extra_class }}" role="navigation" aria-label="pagination">
   {% if page > 1 %}
   <a class="pagination-previous"
      hx-get="{{ hx_url }}?page={{ page - 1 }}"
diff --git a/src/cf_ui/templates/jinja/bulma/Panel.jinja b/src/cf_ui/templates/jinja/bulma/Panel.jinja
@@ -1,6 +1,6 @@
-{#def title, content="", open=false, class="" #}
+{#def title, content="", open=false, extra_class="" #}
 {% set content = content if content is defined else "" %}
-<div class="card {{ class }}" x-data="cfPanel">
+<div class="card {{ extra_class }}" x-data="cfPanel">
   <header class="card-header" style="cursor:pointer" @click="open = !open">
     <p class="card-header-title">{{ title }}</p>
     <button class="card-header-icon" aria-label="toggle panel">
diff --git a/src/cf_ui/templates/jinja/bulma/Progress.jinja b/src/cf_ui/templates/jinja/bulma/Progress.jinja
@@ -1,5 +1,5 @@
-{#def value=0, max=100, type="primary", label="", class="" #}
-<div class="{{ class }}">
+{#def value=0, max=100, type="primary", label="", extra_class="" #}
+<div class="{{ extra_class }}">
   {% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}
   <progress class="progress is-{{ type }}"
             value="{{ value }}"
diff --git a/src/cf_ui/templates/jinja/bulma/Select.jinja b/src/cf_ui/templates/jinja/bulma/Select.jinja
@@ -1,5 +1,5 @@
-{#def name, label, value="", error=none, options=[], class="" #}
-<div class="field {{ class }}">
+{#def name, label, value="", error="", options=[], extra_class="" #}
+<div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
diff --git a/src/cf_ui/templates/jinja/bulma/Table.jinja b/src/cf_ui/templates/jinja/bulma/Table.jinja
@@ -1,7 +1,7 @@
-{#def columns=[], rows=[], hx_target="", hx_url="", class="" #}
+{#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% set columns = columns if columns is defined else [] %}
 {% set rows = rows if rows is defined else [] %}
-<div class="{{ class }}">
+<div class="{{ extra_class }}">
   <table class="table is-striped is-hoverable is-fullwidth">
     <thead>
       <tr>
diff --git a/src/cf_ui/templates/jinja/bulma/Tabs.jinja b/src/cf_ui/templates/jinja/bulma/Tabs.jinja
@@ -1,8 +1,8 @@
-{#def tabs=[], hx_target="tab-content", content="", class="" #}
+{#def tabs=[], hx_target="tab-content", content="", extra_class="" #}
 {% set tabs = tabs if tabs is defined else [] %}
 {% set content = content if content is defined else "" %}
 {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-<div class="{{ class }}" x-data="cfTabs">
+<div class="{{ extra_class }}" x-data="cfTabs">
   <div class="tabs">
     <ul>
       {% for tab in tabs %}
diff --git a/src/cf_ui/templates/jinja/bulma/Textarea.jinja b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
@@ -1,5 +1,5 @@
-{#def name, label, value="", error=none, rows=4, class="" #}
-<div class="field {{ class }}">
+{#def name, label, value="", error="", rows=4, extra_class="" #}
+<div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <textarea class="textarea{% if error %} is-danger{% endif %}"
diff --git a/tests/integration/conftest.py b/tests/integration/conftest.py
@@ -0,0 +1,32 @@
+"""
+Integration test configuration.
+
+Django can only be set up once per process. When running the full test suite,
+tests/unit/conftest.py configures Django first with minimal settings. This
+conftest handles the case where we run integration tests in isolation (so
+Django is NOT yet configured) by setting DJANGO_SETTINGS_MODULE before
+collection begins.
+
+When the full suite runs together, the unit conftest already configured Django.
+The cotton integration tests use Django's test Client which works regardless of
+which settings module was used to configure Django, as long as the required
+apps (cf_ui.django.CfUiConfig) are in INSTALLED_APPS — which they are in both
+settings modules.
+
+The ROOT_URLCONF setting differs: unit tests don't set it, integration tests
+need it. We patch it in a session-scoped fixture below so that the integration
+URL routing works in both cases.
+"""
+import os
+
+import django
+from django.conf import settings
+
+
+def pytest_configure(config):
+    if not settings.configured:
+        os.environ.setdefault(
+            "DJANGO_SETTINGS_MODULE",
+            "tests.integration.cotton_app.settings",
+        )
+        django.setup()
diff --git a/tests/integration/cotton_app/__init__.py b/tests/integration/cotton_app/__init__.py
diff --git a/tests/integration/cotton_app/settings.py b/tests/integration/cotton_app/settings.py
@@ -0,0 +1,25 @@
+from pathlib import Path
+
+BASE_DIR = Path(__file__).parent
+
+SECRET_KEY = "test-secret-key-not-for-production"
+DEBUG = True
+INSTALLED_APPS = [
+    "django.contrib.contenttypes",
+    "django.contrib.auth",
+    "django.contrib.staticfiles",
+    "cf_ui.django.CfUiConfig",
+]
+DATABASES = {"default": {"ENGINE": "django.db.backends.sqlite3", "NAME": ":memory:"}}
+TEMPLATES = [{
+    "BACKEND": "django.template.backends.django.DjangoTemplates",
+    "DIRS": [BASE_DIR / "templates"],
+    "APP_DIRS": True,
+    "OPTIONS": {
+        "context_processors": [],
+        "libraries": {"cf_ui": "cf_ui.templatetags.cf_ui"},
+    },
+}]
+CF_UI_THEME = "bulma"
+ROOT_URLCONF = "tests.integration.cotton_app.urls"
+STATIC_URL = "/static/"
diff --git a/tests/integration/cotton_app/templates/cotton_gallery/card.html b/tests/integration/cotton_app/templates/cotton_gallery/card.html
@@ -0,0 +1,3 @@
+<c-cf.card header="Card Title" footer="Card Footer">
+  Card body content
+</c-cf.card>
diff --git a/tests/integration/cotton_app/templates/cotton_gallery/form_field.html b/tests/integration/cotton_app/templates/cotton_gallery/form_field.html
@@ -0,0 +1,2 @@
+<c-cf.form-field name="{{ name }}" label="{{ label }}" value="{{ value }}"
+                 error="{{ error }}" type="{{ type }}" />
diff --git a/tests/integration/cotton_app/templates/cotton_gallery/modal.html b/tests/integration/cotton_app/templates/cotton_gallery/modal.html
@@ -0,0 +1,4 @@
+<c-cf.modal id="{{ modal_id }}">
+  <c-slot name="header">Test Modal</c-slot>
+  Modal body content
+</c-cf.modal>
diff --git a/tests/integration/cotton_app/urls.py b/tests/integration/cotton_app/urls.py
@@ -0,0 +1,8 @@
+from django.urls import path
+from tests.integration.cotton_app import views
+
+urlpatterns = [
+    path("form-field/", views.form_field_view),
+    path("modal/", views.modal_view),
+    path("card/", views.card_view),
+]
diff --git a/tests/integration/cotton_app/views.py b/tests/integration/cotton_app/views.py
@@ -0,0 +1,16 @@
+from django.shortcuts import render
+
+
+def form_field_view(request):
+    return render(request, "cotton_gallery/form_field.html", {
+        "name": "email", "label": "Email", "value": "", "error": "", "type": "email",
+        "required": "false",
+    })
+
+
+def modal_view(request):
+    return render(request, "cotton_gallery/modal.html", {"modal_id": "test-modal"})
+
+
+def card_view(request):
+    return render(request, "cotton_gallery/card.html", {})
diff --git a/tests/integration/jinja_app/__init__.py b/tests/integration/jinja_app/__init__.py
diff --git a/tests/integration/jinja_app/main.py b/tests/integration/jinja_app/main.py
@@ -0,0 +1,95 @@
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from jinjax import Catalog
+
+from cf_ui.fastapi import install_cf_ui
+
+catalog = Catalog()
+install_cf_ui(catalog, theme="bulma")
+
+app = FastAPI()
+
+
+@app.get("/form-field", response_class=HTMLResponse)
+async def form_field():
+    return catalog.render(
+        "Cf:FormField",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="email",
+        required=False,
+        extra_class="",
+    )
+
+
+@app.get("/modal", response_class=HTMLResponse)
+async def modal():
+    return catalog.render("Cf:Modal", id="test-modal", extra_class="")
+
+
+@app.get("/card", response_class=HTMLResponse)
+async def card():
+    return catalog.render(
+        "Cf:Card",
+        _content="Card body",
+        header="Card Title",
+        footer="",
+        extra_class="",
+    )
+
+
+@app.get("/navbar", response_class=HTMLResponse)
+async def navbar():
+    return catalog.render("Cf:Navbar", brand="", start="", end="", extra_class="")
+
+
+@app.get("/tabs", response_class=HTMLResponse)
+async def tabs():
+    return catalog.render(
+        "Cf:Tabs",
+        tabs=[{"id": "one", "url": "/tab/one/"}, {"id": "two", "url": "/tab/two/"}],
+        hx_target="tab-content",
+        extra_class="",
+    )
+
+
+@app.get("/gallery", response_class=HTMLResponse)
+async def gallery():
+    modal_html = catalog.render("Cf:Modal", id="e2e-modal", extra_class="")
+    notification_html = catalog.render(
+        "Cf:Notification", message="Hello!", type="info", dismissible=True, extra_class=""
+    )
+    navbar_html = catalog.render("Cf:Navbar", brand="Brand", start="", end="", extra_class="")
+    panel_html = catalog.render(
+        "Cf:Panel", title="Accordion", _content="Hidden content", open=False, extra_class=""
+    )
+    tabs_html = catalog.render(
+        "Cf:Tabs",
+        tabs=[{"id": "tab1", "url": "/tab/one/"}, {"id": "tab2", "url": "/tab/two/"}],
+        hx_target="tab-content",
+        _content="Initial content",
+        extra_class="",
+    )
+    return f"""<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
+  <style>[x-cloak] {{ display: none !important; }}</style>
+</head>
+<body>
+  <section class="section">
+    {navbar_html}
+    <button id="open-modal">Open Modal</button>
+    {modal_html}
+    {notification_html}
+    {panel_html}
+    {tabs_html}
+  </section>
+  <script src="/static/cf_ui/cf_ui_alpine.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script>
+</body>
+</html>"""
diff --git a/tests/integration/test_cotton_integration.py b/tests/integration/test_cotton_integration.py
@@ -0,0 +1,29 @@
+import pytest
+
+
+@pytest.fixture
+def client():
+    from django.test import Client
+    return Client()
+
+
+def test_form_field_cotton_renders(client):
+    r = client.get("/form-field/")
+    assert r.status_code == 200
+    assert b'name="email"' in r.content
+    assert b"Email" in r.content
+
+
+def test_modal_cotton_renders(client):
+    r = client.get("/modal/")
+    assert r.status_code == 200
+    assert b"modal" in r.content
+    assert b"test-modal" in r.content
+
+
+def test_card_cotton_renders(client):
+    r = client.get("/card/")
+    assert r.status_code == 200
+    assert b"Card Title" in r.content
+    assert b"Card body content" in r.content
+    assert b"Card Footer" in r.content
diff --git a/tests/integration/test_jinja_integration.py b/tests/integration/test_jinja_integration.py
diff --git a/tests/unit/jinja/test_content.py b/tests/unit/jinja/test_content.py
diff --git a/tests/unit/jinja/test_feedback.py b/tests/unit/jinja/test_feedback.py
diff --git a/tests/unit/jinja/test_forms.py b/tests/unit/jinja/test_forms.py
diff --git a/tests/unit/jinja/test_navigation.py b/tests/unit/jinja/test_navigation.py
diff --git a/tests/unit/test_core.py b/tests/unit/test_core.py
