glow-all/true-headless-browser
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

React Integration Test Suite + Convergence Loop — Readme + CI + Kompatibilitätsmatrix #34

New issue
Closed
opened 2026-06-17 16:35:54 +00:00 by Artur · 1 comment
Artur commented 2026-06-17 16:35:54 +00:00
Owner
Copy link

Problem

Nachdem #30–#33 implementiert sind, wissen wir noch nicht ob React-Apps wirklich funktionieren. Wir brauchen:

  1. Einen Integration-Test, der React-Code lädt und rendert
  2. Einen Convergence-Loop-Prozess für jede scheiternde App
  3. Eine Kompatibilitätsmatrix (öffentlich dokumentiert)

Lösung

Teil 1: React Integration Test Suite

tests/integration/react/ — jeder Test lädt ein React-Snippet und prüft:

describe("React 19 Integration", () => {
  it("createRoot + render App component");          // Grundlegendes Rendering
  it("useState + click updates DOM");               // State + Events
  it("useEffect runs after render");                // Lifecycle
  it("form action={fn} submits FormData");           // #31 Forms
  it("Suspense + lazy loading");                    // Async rendering
  it("useTransition keeps UI responsive");          // #33 Concurrent
  it("useDeferredValue debounces updates");         // #33 Concurrent
  it("error boundary catches render errors");       // Error handling
})

Jeder Test erzeugt ein HTML-Dokument mit:

<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // React-Code hier
</script>

Das testet echten React-Code über das Netzwerk — kein Mock, kein Polyfill im Test.

Teil 2: Convergence Loop

1. React-App auswählen (Tiny Counter → Todo → Form → Router → Real App)
2. Mit discovery mode scrapen: `bun run cli --url <app> --discovery`
3. API-Report auswerten: was fehlt, was crasht
4. Top-3 Blocker in Issues dokumentieren
5. Implementieren (TDD) → Tests → Commit
6. React-App erneut testen → wenn grün → Matrix aktualisieren
7. Repeat bis 99.9%

Teil 3: Kompatibilitätsmatrix

COMPATIBILITY.md im Repo:

# React Compatibility Matrix

| App | React Version | Status | Letzter Test |
|-----|--------------|--------|-------------|
| createRoot + Counter | 19 | ✅ | 2026-06-17 |
| Todo (useState + Events) | 19 | ✅ | 2026-06-17 |
| Form mit action={fn} | 19 | ✅ | 2026-06-17 |
| Suspense + lazy | 19 | 🔄 | - |
| react-router | 18 | ❌ #37 | - |
| styled-components | 18 | ❌ #38 | - |
| MUI (Material UI) | 18 | ❌ #39 | - |
| Next.js SSR | 19 | ❓ | - |

Teil 4: CI Pipeline

.forgejo/workflows/react-compat.yml:

  • Läuft nach jedem Merge
  • Führt Integration-Tests aus
  • Aktualisiert COMPATIBILITY.md
  • Bricht bei Regression

Betroffene Dateien

Datei Änderung
tests/integration/react/basic-render.test.ts Neu: createRoot + Counter
tests/integration/react/state-events.test.ts Neu: useState + Click
tests/integration/react/forms.test.ts Neu: React 19 Forms
tests/integration/react/concurrent.test.ts Neu: Suspense, useTransition
COMPATIBILITY.md Neu: Kompatibilitätsmatrix
.forgejo/workflows/react-compat.yml Neu: CI Pipeline

Akzeptanzkriterien

  • React Counter render + click increment funktioniert
  • React Todo (add/remove/toggle) funktioniert
  • React 19 Form mit action={fn} funktioniert
  • COMPATIBILITY.md existiert mit aktuellen Status
  • CI Pipeline läuft und bricht bei Regression

Cross-Referenzen

  • #30 MO-Batching foundation
  • #31 Form-API foundation
  • #32 Events foundation
  • #33 Concurrent foundation
## Problem Nachdem #30–#33 implementiert sind, wissen wir noch nicht ob React-Apps wirklich funktionieren. Wir brauchen: 1. Einen **Integration-Test, der React-Code lädt und rendert** 2. Einen **Convergence-Loop-Prozess** für jede scheiternde App 3. Eine **Kompatibilitätsmatrix** (öffentlich dokumentiert) ## Lösung ### Teil 1: React Integration Test Suite `tests/integration/react/` — jeder Test lädt ein React-Snippet und prüft: ```typescript describe("React 19 Integration", () => { it("createRoot + render App component"); // Grundlegendes Rendering it("useState + click updates DOM"); // State + Events it("useEffect runs after render"); // Lifecycle it("form action={fn} submits FormData"); // #31 Forms it("Suspense + lazy loading"); // Async rendering it("useTransition keeps UI responsive"); // #33 Concurrent it("useDeferredValue debounces updates"); // #33 Concurrent it("error boundary catches render errors"); // Error handling }) ``` Jeder Test erzeugt ein HTML-Dokument mit: ```html <script src="https://unpkg.com/react@19/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> // React-Code hier </script> ``` Das testet **echten React-Code** über das Netzwerk — kein Mock, kein Polyfill im Test. ### Teil 2: Convergence Loop ``` 1. React-App auswählen (Tiny Counter → Todo → Form → Router → Real App) 2. Mit discovery mode scrapen: `bun run cli --url <app> --discovery` 3. API-Report auswerten: was fehlt, was crasht 4. Top-3 Blocker in Issues dokumentieren 5. Implementieren (TDD) → Tests → Commit 6. React-App erneut testen → wenn grün → Matrix aktualisieren 7. Repeat bis 99.9% ``` ### Teil 3: Kompatibilitätsmatrix `COMPATIBILITY.md` im Repo: ```markdown # React Compatibility Matrix | App | React Version | Status | Letzter Test | |-----|--------------|--------|-------------| | createRoot + Counter | 19 | ✅ | 2026-06-17 | | Todo (useState + Events) | 19 | ✅ | 2026-06-17 | | Form mit action={fn} | 19 | ✅ | 2026-06-17 | | Suspense + lazy | 19 | 🔄 | - | | react-router | 18 | ❌ #37 | - | | styled-components | 18 | ❌ #38 | - | | MUI (Material UI) | 18 | ❌ #39 | - | | Next.js SSR | 19 | ❓ | - | ``` ### Teil 4: CI Pipeline `.forgejo/workflows/react-compat.yml`: - Läuft nach jedem Merge - Führt Integration-Tests aus - Aktualisiert COMPATIBILITY.md - Bricht bei Regression ## Betroffene Dateien | Datei | Änderung | |-------|----------| | `tests/integration/react/basic-render.test.ts` | **Neu:** createRoot + Counter | | `tests/integration/react/state-events.test.ts` | **Neu:** useState + Click | | `tests/integration/react/forms.test.ts` | **Neu:** React 19 Forms | | `tests/integration/react/concurrent.test.ts` | **Neu:** Suspense, useTransition | | `COMPATIBILITY.md` | **Neu:** Kompatibilitätsmatrix | | `.forgejo/workflows/react-compat.yml` | **Neu:** CI Pipeline | ## Akzeptanzkriterien - [ ] React Counter render + click increment funktioniert - [ ] React Todo (add/remove/toggle) funktioniert - [ ] React 19 Form mit action={fn} funktioniert - [ ] COMPATIBILITY.md existiert mit aktuellen Status - [ ] CI Pipeline läuft und bricht bei Regression ## Cross-Referenzen - #30 MO-Batching foundation - #31 Form-API foundation - #32 Events foundation - #33 Concurrent foundation
Artur commented 2026-06-18 06:28:05 +00:00
Author
Owner
Copy link

React Integration Test Suite + Convergence Loop — Readme + CI + Kompatibilitätsmatrix. ✅ Tests existieren (react-comprehensive.test.ts, react-rendering.test.ts, react19-*.test.ts). COMPATIBILITY.md vorhanden. Wird in #40 aktualisiert.

React Integration Test Suite + Convergence Loop — Readme + CI + Kompatibilitätsmatrix. ✅ Tests existieren (react-comprehensive.test.ts, react-rendering.test.ts, react19-*.test.ts). COMPATIBILITY.md vorhanden. Wird in #40 aktualisiert.
Artur closed this issue 2026-06-18 06:28:05 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
feat/issue-128-html5ever-native
feat/issue-118-119-dom-perfection
feat/issue-103-csp-trusted-types
feat/issue-96-cssom-optimization
feat/phase-a-specproxy
No results found.
Labels
Clear labels   
bug
Bug or incorrect behavior

  
docs

   
feature
New feature or API

  
housekeeping

   
html-spec
HTML Spec Compliance Gap

  
performance
Performance improvement

  
react-compat
React compatibility issues

No labels
bug
docs
feature
housekeeping
html-spec
performance
react-compat
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
glow
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow-all/true-headless-browser#34
No description provided.