Playground

Der Playground unter frontend/apps/playground bindet dieselbe veröffentlichte Umfrage mit jeder Einbettungsmethode ein – als lauffähige Beispiel-Apps zum Ausprobieren, als Vorlage für eigene Integrationen und als Grundlage des E2E-Tests e2e/playground.spec.ts, der jede Variante in Chromium, Firefox und WebKit beantwortet.

Variante	Verzeichnis	Technik	Kanal	Port
Übersicht	static (index.html)	Links auf alle Varianten	–	5251
Script-Snippet	static (script.html)	data-pollyou-survey + embed.js vom Embed-CDN	script	5251
iframe	static (iframe.html)	/p/{publicId} im iframe + iframe-resizer.js	iframe	5251
<embed>/<object>	static (embed.html)	/p/{publicId} mit fester Höhe	iframe	5251
AngularJS	static (angularjs.html)	AngularJS 1.8, UMD-Build von @pollyou/angularjs, embed.js	angularjs	5251
React	react-vite	React 19 + Vite, @pollyou/react	react	5252
Vue	vue	Vue 3 + Vite, @pollyou/vue mit Plugin	vue	5253
Next.js	nextjs	App Router, 'use client'-Seite, @pollyou/react	react	5254
Angular	angular	Angular CLI mit SSR, Standalone + providePollYou()	angular	5255
Direktlink	– (Backend)	/s/{publicId}	link	8480

Alle Apps hängen per workspace:* an den Paketen im Repository, zeigen also immer den aktuellen Stand von embed-core und den Framework-Paketen.

Parameter

Jede Seite liest ihre Einstellungen aus der Adresse:

Parameter	Bedeutung	Standard
survey	Öffentliche ID der Umfrage (Pflicht)	–
api	Origin der Collector-API	http://localhost:8480
cdn	Embed-CDN (nur statische Seiten, ohne /embed.js)	http://localhost:5174/v1
locale	Sprache der Umfrage	de

Unter der Umfrage protokolliert jede Seite die Ereignisse (ready, answer, start, complete, …) in einer Liste mit data-testid="event-log". <embed>/<object> und der Direktlink melden der Host-Seite keine Ereignisse.

Lokal starten

Voraussetzung ist der laufende Stack (make up, siehe Lokale Entwicklung) und eine veröffentlichte Umfrage, z. B. im Dashboard angelegt; ihre öffentliche ID steht im Einbetten-Dialog. Für Tests mehrfach abstimmen lässt sich mit der Mehrfachabstimmung „keine“ (Dedup none).

pnpm install
pnpm playground:build                      # baut embed-core, die Framework-Pakete und alle Apps
pnpm --filter @pollyou/embed-core serve:cdn  # Embed-CDN auf :5174 (oder make embed-cdn)

Dann jede App in einem eigenen Terminal:

pnpm --filter @pollyou/playground-static start   # http://127.0.0.1:5251/?survey=PUBLIC_ID
pnpm --filter @pollyou/playground-react start    # http://127.0.0.1:5252/?survey=PUBLIC_ID
pnpm --filter @pollyou/playground-vue start      # http://127.0.0.1:5253/?survey=PUBLIC_ID
pnpm --filter @pollyou/playground-nextjs start   # http://127.0.0.1:5254/?survey=PUBLIC_ID (next start)
pnpm --filter @pollyou/playground-angular start  # http://127.0.0.1:5255/?survey=PUBLIC_ID (SSR-Server)

Die Übersichtsseite http://127.0.0.1:5251/?survey=PUBLIC_ID verlinkt alle Varianten und reicht die Parameter weiter. Zum Entwickeln mit Hot Reload gibt es bei React, Vue, Next.js und Angular zusätzlich dev (gleicher Port).

127.0.0.1 statt Datei oder fremder Domain

Chrome blockiert mit Local Network Access Anfragen von öffentlichen Seiten an localhost. Die Beispiele laufen deshalb auf eigenen Servern unter 127.0.0.1; eine per file:// geöffnete HTML-Datei funktioniert nicht zuverlässig.

Einzelheiten

• Statische Seiten: static/build.mjs kopiert die Seiten nach dist/ und legt angular.min.js und den UMD-Build von @pollyou/angularjs daneben. embed.js und iframe-resizer.js kommen wie bei Kunden vom Embed-CDN (cdn). Ausgeliefert wird mit frontend/apps/playground/serve.mjs (Node, ohne Abhängigkeiten), den auch der E2E-Test verwendet.
• Next.js: next build rendert die Seite vor (die Umfrage-ID kommt per useSearchParams erst im Browser, deshalb die Suspense-Grenze). Im Monorepo zeigt @pollyou/embed-core auf seine TypeScript-Quellen, daher transpilePackages in next.config.ts – mit dem veröffentlichten Paket ist das nicht nötig.
• Angular: ng build erzeugt Browser- und Server-Bundle (outputMode: "server"); / wird pro Anfrage serverseitig gerendert (die Umfrage-ID aus der Query steht schon im HTML), /about beim Build vorgerendert. security.allowedHosts in angular.json erlaubt 127.0.0.1 und localhost.
• CI: ci/frontend.sh baut den Playground (pnpm playground:build, Typprüfung inklusive), ci/e2e.sh baut ihn vor der Playwright-Suite. Die Apps haben keine eigenen test/lint-Skripte und tauchen in pnpm build/pnpm test nicht auf.

E2E-Test

pnpm playground:build
pnpm exec playwright test e2e/playground.spec.ts                    # Chromium, Firefox, WebKit
pnpm exec playwright test e2e/playground.spec.ts --project=chromium

Der Test registriert ein Konto, veröffentlicht eine Umfrage über die API und startet die Apps selbst (statische Server, next start, Angular-SSR-Server) auf eigenen Ports je Browser: Chromium 5251–5255, Firefox +10, WebKit +20. Für jede Variante prüft er:

1. die Abstimmung im Browser bis zur Ergebnisansicht,
2. den Kanal der Sitzung (channel im POST …/sessions) und die angenommene Abgabe (complete → 200),
3. dass das Backend die Antwort zählt (GET /api/collect/surveys/{publicId}/results mit dem Session-Token, totalResponses steigt je Variante um eins),
4. die Reihenfolge der Ereignisse im Protokoll: ready, answer, start, complete,

außerdem, dass das serverseitige Rendern von Next.js und Angular funktioniert. Den Kanal liest der Test aus der Anfrage des Browsers – die Dashboard-API gibt den gespeicherten Kanal einzelner Antworten (noch) nicht aus.