Cesar Mendivil
543d6bc6af
- Changed development port for studio-panel from 3001 to 3020 in package.json and vite.config.ts. - Refactored Studio component in studio-panel to improve token handling and error diagnostics. - Added utility functions for token validation and JWT decoding in Studio component. - Enhanced error handling and user feedback in Studio component when token is invalid. - Implemented sessionStorage management for token and server URL in Studio component. - Created Docker setup for broadcast-panel including Dockerfile, Dockerfile.dev, and docker-compose.yml. - Added Nginx configuration for serving the broadcast-panel as a Single Page Application. - Introduced Banner component in broadcast-panel for displaying messages and actions. - Added start-docker.sh script for easy Docker management of broadcast-panel. - Implemented Playwright E2E tests for token handling and UI interactions between broadcast-panel and studio-panel. - Included SSL certificates for local development in studio-panel.
76 lines
3.3 KiB
JavaScript
76 lines
3.3 KiB
JavaScript
const { chromium } = require('playwright')
|
|
|
|
;(async () => {
|
|
console.log('E2E: solicitando token al token-server...')
|
|
const tokenRes = await fetch('http://localhost:3010/api/token?room=test&username=Playwright')
|
|
if (!tokenRes.ok) throw new Error('No se pudo obtener token desde http://localhost:3010')
|
|
const tokenData = await tokenRes.json()
|
|
console.log('E2E: token recibido (longitud):', tokenData.token ? tokenData.token.length : 'n/a')
|
|
|
|
const shortId = Math.random().toString(36).slice(2, 10)
|
|
const studioUrl = `http://localhost:3020/${shortId}`
|
|
|
|
console.log('E2E: lanzando navegador headless...')
|
|
const browser = await chromium.launch({ headless: true })
|
|
const context = await browser.newContext()
|
|
|
|
// Abrir una 'broadcast page' (simula origen que realiza window.open y postMessage)
|
|
const broadcastPage = await context.newPage()
|
|
try {
|
|
await broadcastPage.goto('http://localhost:5175', { waitUntil: 'domcontentloaded', timeout: 8000 })
|
|
console.log('E2E: broadcast-page abierta')
|
|
} catch (err) {
|
|
console.warn('E2E: no se pudo cargar broadcast UI, continuamos (no es obligatorio):', err.message)
|
|
}
|
|
|
|
// Preparar espera de la nueva página (studio)
|
|
const newPagePromise = context.waitForEvent('page')
|
|
|
|
// Desde la broadcastPage crear la ventana y enviar postMessage (imitando el comportamiento de la app)
|
|
await broadcastPage.evaluate(({ studioUrl, tokenData }) => {
|
|
const win = window.open(studioUrl, '_blank')
|
|
// Intentar enviar token repetidamente hasta que la ventana esté lista
|
|
let attempts = 0
|
|
const tryPost = () => {
|
|
attempts++
|
|
try {
|
|
const origin = new URL(studioUrl).origin
|
|
win.postMessage({ type: 'AVANZACAST_TOKEN', token: tokenData.token, serverUrl: tokenData.serverUrl, room: 'test', user: 'Playwright' }, origin)
|
|
// eslint-disable-next-line no-console
|
|
console.log('E2E: postMessage enviado desde broadcast page')
|
|
} catch (e) {
|
|
if (attempts < 15) setTimeout(tryPost, 200)
|
|
else console.error('E2E: no se pudo enviar postMessage a la ventana del studio')
|
|
}
|
|
}
|
|
tryPost()
|
|
}, { studioUrl, tokenData })
|
|
|
|
const studioPage = await newPagePromise
|
|
await studioPage.waitForLoadState('domcontentloaded')
|
|
console.log('E2E: studio page abierta, esperando que el banner de DEMO desaparezca si llega...')
|
|
|
|
// El componente muestra un banner de modo demo; si recibimos token, ese banner debería desaparecer.
|
|
try {
|
|
// Si existe el banner, esperamos que desaparezca
|
|
const demoLocator = studioPage.locator('text=⚠️ MODO DEMO')
|
|
// Esperar a que sea visible (si no aparece, skip)
|
|
await demoLocator.waitFor({ state: 'visible', timeout: 3000 }).catch(() => {})
|
|
// Ahora esperar a que se oculte tras recibir el token
|
|
await demoLocator.waitFor({ state: 'hidden', timeout: 8000 })
|
|
console.log('E2E: banner de DEMO desapareció -> token aplicado')
|
|
} catch (err) {
|
|
console.warn('E2E: no se pudo confirmar desaparición del banner DEMO (puede que la página ya estuviera en modo no-demo):', err.message)
|
|
}
|
|
|
|
// Tomar un snapshot de la página (longitud del HTML)
|
|
const html = await studioPage.content()
|
|
console.log('E2E: longitud del HTML del studio:', html.length)
|
|
|
|
await browser.close()
|
|
console.log('E2E: prueba finalizada correctamente')
|
|
})().catch(err => {
|
|
console.error('E2E: error en la prueba', err)
|
|
process.exit(1)
|
|
})
|