diff --git a/CLAUDE.md b/CLAUDE.md index e6cc6a9..39c377f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -40,11 +40,15 @@ Display (Vue) ──WebSocket──┤── websocket-handler.js ── gam Punteggio, set e servizio si ricavano sempre dalla `striscia`: al primo punto di ogni set `applyAction('incPunt')` salva in `formInizio` uno snapshot della formazione di partenza (usato dal referto); `decPunt` lo rimuove se il set torna a 0-0. +Ogni voce della `striscia` accumula anche lo storico di cambi e time out del set, popolato lazy (nessun campo se il set non ha eventi), senza timestamp — il "quando" è il punteggio al momento dell'evento, non l'orologio: +- `set.timeouts`: array di `{ team, punteggio: { home, guest } }`, appeso da `startTimeout` (solo se il time out non è già attivo, per non duplicare l'evento su un restart). +- `set.cambi`: array di `{ team, in, out, punteggio }`, uno per ogni sostituzione effettivamente applicata da `confermaCambi` (nulla viene registrato se la validazione del cambio fallisce). + `src/websocket-handler.js` riceve i messaggi WebSocket, valida che il mittente sia un `controller` (non un `display`), chiama `applyAction`, fa il broadcast del nuovo stato a tutti i client, poi invoca `onStateChange` per persistere su disco. `src/wsMixin.js` è il mixin Vue lato client: gestisce connessione/riconnessione WebSocket (backoff esponenziale) ed espone i computed `punt`/`servHome`/`set`. -`src/referto.js` genera il referto di gara: `buildRefertoHtml(state, now)` è una funzione pura che restituisce l'HTML (testabile), mentre `generaReferto(state)` è il wrapper che apre la finestra con `window.open` e avvia la stampa. +`src/referto.js` genera il referto di gara: `buildRefertoHtml(state, now)` è una funzione pura che restituisce l'HTML (testabile), mentre `generaReferto(state)` è il wrapper che apre la finestra con `window.open` e avvia la stampa. Per ogni set, oltre alla formazione di partenza e alla griglia punti, mostra (se presenti) l'elenco di `set.timeouts` e `set.cambi` ordinato per punteggio crescente. `src/persist.js` carica/salva lo stato su `.segnapunti/state.json`. `src/server-utils.js` ricava gli IP di rete (`getNetworkIPs`, con sorgente iniettabile) e stampa gli URL all'avvio. `src/spot-utils.js` espone `listSpotVideos(spotDir)`, che elenca i `.mp4` (ordinati) della cartella `spot/`; ritorna `[]` se la cartella manca. @@ -74,6 +78,8 @@ In sviluppo, `vite-plugin-websocket.js` incorpora il server WebSocket dentro il I test E2E girano in serie (`workers: 1`) per evitare race condition sullo stato WebSocket. Eseguire `npm run serve` prima di `npm run test:e2e`. +La copertura statement/linee della suite Vitest è oltre il 99%. Per testare `startServer()` (`server.js`) o i rami platform-dependent di `getNetworkIPs()` (`server-utils.js`) senza effetti collaterali reali (scrittura su `.segnapunti/state.json`, dipendenza dalla piattaforma), si mocka il modulo con `vi.mock`/`vi.doMock` (vedi `tests/integration/startServer.test.js` e `tests/unit/server-utils-platform.test.js`) invece di eseguire il codice reale. + ## Deploy Il progetto si distribuisce tramite Docker. L'immagine è pubblicata sul registry Gitea self-hosted (`santantonio.sytes.net`): diff --git a/README.md b/README.md index a770413..6b89a00 100644 --- a/README.md +++ b/README.md @@ -242,8 +242,12 @@ Lo stato viene salvato in `.segnapunti/state.json` anche in modalità dev. | `npm run test:e2e` | Playwright — Chromium, Firefox, Mobile Chrome | Le suite Vitest coprono la logica di gioco (`gameState`, inclusa `formInizio`), -il protocollo e il routing del server, la persistenza, il client WebSocket -(`wsMixin`), i componenti Vue e la generazione del referto. +il protocollo e il routing del server (incluso l'avvio effettivo di +`startServer`), la persistenza, il rilevamento di rete/piattaforma +(`server-utils`, inclusi i rami WSL/PowerShell), il client WebSocket +(`wsMixin`, connessione/riconnessione/cleanup), i componenti Vue e la +generazione del referto (inclusi i suoi side-effect di stampa). La copertura +statement complessiva è oltre il 99%. > I test E2E richiedono il server in esecuzione (`npm run serve`) e i browser Playwright installati: > ```bash diff --git a/src/gameState.js b/src/gameState.js index d27491e..6df447f 100644 --- a/src/gameState.js +++ b/src/gameState.js @@ -171,6 +171,13 @@ export function applyAction(state, action) { case "startTimeout": { const team = action.team if (team !== 'home' && team !== 'guest') break + if (!s.timeout) { + const setCorrente = s.sp.striscia.at(-1) + ;(setCorrente.timeouts ??= []).push({ + team, + punteggio: punteggio(s.sp.striscia), + }) + } s.timeout = true s.timeoutTeam = team s.timeoutVideo = action.video ?? null @@ -209,6 +216,7 @@ export function applyAction(state, action) { const cambi = action.cambi || [] const form = s.sp.form[team].map((val) => String(val).trim()) const formAggiornata = [...form] + const cambiApplicati = [] let valid = true for (const cambio of cambi) { @@ -223,11 +231,19 @@ export function applyAction(state, action) { const idx = formAggiornata.findIndex((val) => String(val).trim() === cout) if (idx !== -1) { formAggiornata.splice(idx, 1, cin) + cambiApplicati.push({ in: cin, out: cout }) } } if (valid) { s.sp.form[team] = formAggiornata + if (cambiApplicati.length > 0) { + const setCorrente = s.sp.striscia.at(-1) + const puntAttuale = punteggio(s.sp.striscia) + ;(setCorrente.cambi ??= []).push( + ...cambiApplicati.map(c => ({ team, ...c, punteggio: { ...puntAttuale } })) + ) + } } break } diff --git a/src/referto.js b/src/referto.js index c08e5ec..c2a59cf 100644 --- a/src/referto.js +++ b/src/referto.js @@ -44,6 +44,31 @@ export function buildRefertoHtml(state, now = new Date()) { ` } + const nomeTeam = (team) => team === 'home' ? nomi.home : nomi.guest + + const eventiHtml = (s) => { + const eventi = [ + ...(s.timeouts ?? []).map(t => ({ tipo: 'timeout', ...t })), + ...(s.cambi ?? []).map(c => ({ tipo: 'cambio', ...c })), + ].sort((a, b) => (a.punteggio.home + a.punteggio.guest) - (b.punteggio.home + b.punteggio.guest)) + + if (eventi.length === 0) return '' + + const righe = eventi.map(e => { + const sul = `sul ${e.punteggio.home}-${e.punteggio.guest}` + const testo = e.tipo === 'timeout' + ? `Time out ${nomeTeam(e.team)} ${sul}` + : `Cambio ${nomeTeam(e.team)}: entra ${e.in} per ${e.out} ${sul}` + return `
  • ${testo}
    • ` + }).join('') + + return ` +
    +
    Cambi e time out
    + +
    ` + } + const setsHtml = setReali.map((s, i) => { let h = 0, g = 0 const punti = [] @@ -62,17 +87,31 @@ export function buildRefertoHtml(state, now = new Date()) { return `
    -
    - Set ${i + 1}  —  ${nomi.home} ${h} · ${g} ${nomi.guest}${etichettaVinc} +
    SET${i + 1}
    +
    +
    + ${nomi.home} ${h} · ${g} ${nomi.guest}${etichettaVinc} +
    +
    +
    Formazione di partenza
    + ${formazioneHtml(s.formInizio)} +
    ${eventiHtml(s)} +
    ${puntiHtml || 'Nessun punto registrato'}
    -
    -
    Formazione di partenza
    - ${formazioneHtml(s.formInizio)} -
    -
    ${puntiHtml || 'Nessun punto registrato'}
    ` }).join('') + const risultatoSetHtml = setReali.map((s, i) => { + let h = 0, g = 0 + for (const c of s.ris) c === 'h' ? h++ : g++ + const vinc = vincitoreSet(s) + return ` + ${i + 1} + ${h} + ${g} + ` + }).join('') + const html = ` @@ -80,50 +119,93 @@ export function buildRefertoHtml(state, now = new Date()) { Referto — ${nomi.home} vs ${nomi.guest} -
    -
    Referto di Gara
    -
    ${dataOra}  ·  Modalità: ${modalitaPartita}
    -
    +
    +
    +
    +
    Referto di Gara
    +
    ${dataOra}  ·  Modalità: ${modalitaPartita}
    +
    +
    + A + ${nomi.home} + vs + ${nomi.guest} + B +
    +
    -
    -
    ${nomi.home}
    -
    vs
    -
    ${nomi.guest}
    -
    -
    ${setVinti.home} – ${setVinti.guest}
    -
    set vinti
    + ${setsHtml} - ${setsHtml} +
    +
    +
    Risultato finale
    + + + ${risultatoSetHtml} +
    SetAB
    +
    Vince ${setVinti.home >= setVinti.guest ? nomi.home : nomi.guest}  ${setVinti.home} – ${setVinti.guest}
    +
    + +
    +
    ` diff --git a/tests/README.md b/tests/README.md index 2192baf..469a056 100644 --- a/tests/README.md +++ b/tests/README.md @@ -94,7 +94,9 @@ Esempi reali nel progetto: - time out (`startTimeout`/`stopTimeout`: squadra, video, timestamp) - generazione del referto (`buildRefertoHtml`) - persistenza stato su disco (`persist.js`, con `fs` mockato) -- utility di rete (`server-utils.js`) +- utility di rete (`server-utils.js`), incluso il rilevamento piattaforma + (WSL/PowerShell vs. `os.networkInterfaces()`, con `fs`/`child_process`/`os` + mockati per non dipendere dalla macchina che esegue i test) - elenco video spot (`spot-utils.js`, su cartella temporanea reale) Quando falliscono: @@ -119,6 +121,8 @@ Esempi reali nel progetto: - autorizzazioni (solo controller puo inviare certe azioni) - timer server-side del time out (auto-`stopTimeout` dopo 30s, `startedAt` impostato dal server) - routing del server Express (`createApp`: rotte display/controller/asset, `/spot/list` e file statici `/spot/`) +- rami di errore del WebSocket handler (`ws.send`/`ws.terminate` che lanciano, `applyAction` che fallisce a metà azione: lo stato precedente va ripristinato senza propagare l'eccezione) +- avvio effettivo di `startServer` (`server.js`): ascolto HTTP, upgrade su `/ws`, rifiuto su altri percorsi, persistenza dopo un'azione — con `persist.js` mockato per non toccare mai `.segnapunti/state.json` reale Quando falliscono: - spesso c'e problema nel protocollo messaggi o nei controlli di ruolo @@ -138,8 +142,9 @@ Esempi reali nel progetto: - dialog reset/config/cambi - modal time out del controller (scelta squadra/video, banner, countdown) - overlay time out del display (video, placeholder, countdown, dissolvenza) -- bottone REFERTO nel dialog PARTITA FINITA -- client WebSocket (`wsMixin`: connessione, riconnessione, `sendWs`, errori) +- bottone REFERTO nel dialog PARTITA FINITA e generazione del referto stampabile (`generaReferto`: `window.open`, scrittura HTML, stampa) +- client WebSocket (`wsMixin`: connessione, riconnessione con backoff, cleanup allo smontaggio, `sendWs`, errori) +- layout esteso/landscape del controller (pannelli squadra, popup automatico SET VINTO con soglia decisiva) Quando falliscono: - spesso hai rotto template, computed, metodi o binding @@ -190,8 +195,8 @@ Note importanti: Caso OK (verde): ```text -Test Files 10 passed (10) -Tests 212 passed (212) +Test Files 15 passed (15) +Tests 362 passed (362) ``` Significa: @@ -208,7 +213,7 @@ Caso KO (rosso): Caso OK: ```text -75 passed +81 passed ``` Caso KO: @@ -279,7 +284,23 @@ npm run test:e2e -- --update-snapshots npm run test:e2e ``` -## 10) Come aggiungere un nuovo test (consigli pratici) +## 10) Copertura del codice + +Non c'è uno script `npm` dedicato, ma si può controllare la copertura in +qualsiasi momento con: + +```bash +npx vitest run tests/unit tests/integration tests/component --coverage +``` + +Il report a schermo mostra percentuale e righe scoperte per file. La suite +attuale copre oltre il 99% di statement/linee; le poche righe rimaste +scoperte sono documentate nei commit dei rispettivi test come codice morto, +difensivo, oppure legato a HMR (`import.meta.hot`) o all'avvio diretto +(`node server.js`) — casi non testabili in modo significativo senza side +effect reali sull'ambiente. + +## 11) Come aggiungere un nuovo test (consigli pratici) - metti i test nel posto giusto: - `tests/unit` per logica pura diff --git a/tests/component/ControllerPage.test.js b/tests/component/ControllerPage.test.js index 53cbeca..1c6ffc9 100644 --- a/tests/component/ControllerPage.test.js +++ b/tests/component/ControllerPage.test.js @@ -133,6 +133,14 @@ describe('ControllerPage.vue', () => { const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla')) expect(btn.attributes('disabled')).toBeDefined() }) + + it('il click quando abilitato invia cambiaPalla', async () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla')) + await btn.trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'cambiaPalla' }) + }) }) // ============================================= @@ -349,6 +357,25 @@ describe('ControllerPage.vue', () => { expect(spy).toHaveBeenCalledWith({ type: 'stopTimeout' }) }) + it('avviaTimeout non invia nulla se nessuna squadra è selezionata', () => { + const wrapper = mountController() + wrapper.vm.timeoutTeamSel = null + const spy = vi.spyOn(wrapper.vm, 'sendAction') + wrapper.vm.avviaTimeout() + expect(spy).not.toHaveBeenCalled() + }) + + it('il ticker del time out aggiorna nowTick periodicamente', async () => { + const wrapper = mountController() + wrapper.vm.state.timeoutTeam = 'home' + wrapper.vm.state.timeoutStartedAt = Date.now() + wrapper.vm.state.timeout = true + await wrapper.vm.$nextTick() + const before = wrapper.vm.nowTick + vi.advanceTimersByTime(500) + expect(wrapper.vm.nowTick).toBeGreaterThan(before) + }) + it('durante il time out mostra banner con squadra e countdown', async () => { const wrapper = mountController() wrapper.vm.state.timeoutTeam = 'home' @@ -365,6 +392,587 @@ describe('ControllerPage.vue', () => { }) }) + // ============================================= + // MODALITÀ ESTESA (landscape) + // ============================================= + describe('Modalità estesa', () => { + it('con isLandscape=true mostra il layout esteso con i pannelli squadra', async () => { + const wrapper = mountController() + wrapper.vm.isLandscape = true + await wrapper.vm.$nextTick() + expect(wrapper.find('.e-dash').exists()).toBe(true) + expect(wrapper.findAll('.e-panel')).toHaveLength(2) + // in modalità estesa non compare il layout mobile + expect(wrapper.find('.score-preview').exists()).toBe(false) + }) + + it('il resize della finestra aggiorna isLandscape', async () => { + const wrapper = mountController() + expect(wrapper.vm.isLandscape).toBe(false) + Object.defineProperty(window, 'innerWidth', { value: 800, writable: true, configurable: true }) + Object.defineProperty(window, 'innerHeight', { value: 400, writable: true, configurable: true }) + window.dispatchEvent(new Event('resize')) + await wrapper.vm.$nextTick() + expect(wrapper.vm.isLandscape).toBe(true) + // ripristina le dimensioni portrait usate dagli altri test + Object.defineProperty(window, 'innerWidth', { value: 400, writable: true, configurable: true }) + Object.defineProperty(window, 'innerHeight', { value: 800, writable: true, configurable: true }) + }) + + it('il click sul punteggio in modalità estesa invia incPunt', async () => { + const wrapper = mountController() + wrapper.vm.isLandscape = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.findAll('.e-panel__score')[0].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incPunt', team: 'home' }) + }) + + it('smontare il componente rimuove i listener di resize e ferma il ticker del time out', async () => { + const wrapper = mountController() + wrapper.vm.state.timeout = true + await wrapper.vm.$nextTick() + expect(vi.getTimerCount()).toBeGreaterThan(0) + const removeSpy = vi.spyOn(window, 'removeEventListener') + wrapper.unmount() + expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function)) + expect(removeSpy).toHaveBeenCalledWith('orientationchange', expect.any(Function)) + }) + }) + + // ============================================= + // SET VINTO AUTOMATICO (watch squadraVincente) + // ============================================= + describe('Set vinto automatico', () => { + it('apre la modal SET VINTO quando il punteggio raggiunge la soglia', async () => { + const wrapper = mountController() + setScore(wrapper, 25, 10) + await wrapper.vm.$nextTick() + expect(wrapper.vm.showSetVinto).toBe(true) + expect(wrapper.vm.setVintoTeam).toBe('home') + expect(wrapper.find('.dialog-title').text()).toBe('SET VINTO') + }) + + it('non riapre la modal se è già aperta', async () => { + const wrapper = mountController() + setScore(wrapper, 25, 10) + await wrapper.vm.$nextTick() + wrapper.vm.setVintoTeam = 'guest' + setScore(wrapper, 25, 24) + await wrapper.vm.$nextTick() + // il watch non deve sovrascrivere setVintoTeam perché showSetVinto è già true + expect(wrapper.vm.setVintoTeam).toBe('guest') + }) + + it('INDIETRO annulla l\'ultimo punto e chiude la modal', async () => { + const wrapper = mountController() + setScore(wrapper, 25, 10) + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.btn-cancel').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'decPunt' }) + expect(wrapper.vm.showSetVinto).toBe(false) + }) + + it('VAI AL SET SUCCESSIVO invia nuovoSet e apre la configurazione', async () => { + const wrapper = mountController() + setScore(wrapper, 25, 10) + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const btn = wrapper.findAll('.btn-confirm').find(b => b.text().includes('SET SUCCESSIVO')) + await btn.trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'nuovoSet', team: 'home' }) + expect(wrapper.vm.showSetVinto).toBe(false) + expect(wrapper.vm.showConfig).toBe(true) + }) + }) + + // ============================================= + // CONFIGURAZIONE + // ============================================= + describe('Configurazione', () => { + it('apre la modal di configurazione precompilata con lo stato corrente', async () => { + const wrapper = mountController() + await wrapper.find('.btn-ctrl:not(.btn-timeout)').exists() + const btn = wrapper.findAll('.btn-ctrl').find(b => b.text() === 'Config') + await btn.trigger('click') + expect(wrapper.vm.showConfig).toBe(true) + expect(wrapper.vm.configData.nomeHome).toBe('Antoniana') + expect(wrapper.vm.configData.nomeGuest).toBe('Guest') + expect(wrapper.vm.configData.modalita).toBe('3/5') + }) + + it('OK invia le action di configurazione e chiude la modal', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + wrapper.vm.configData = { + nomeHome: 'Casa', nomeGuest: 'Ospiti', modalita: '2/3', + formHome: ['1', '2', '3', '4', '5', '6'], + formGuest: ['1', '2', '3', '4', '5', '6'], + } + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.dialog-config .btn-confirm').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'setNomi', home: 'Casa', guest: 'Ospiti' }) + expect(spy).toHaveBeenCalledWith({ type: 'setModalita', modalita: '2/3' }) + expect(spy).toHaveBeenCalledWith({ type: 'setFormazione', team: 'home', form: ['1', '2', '3', '4', '5', '6'] }) + expect(spy).toHaveBeenCalledWith({ type: 'setFormazione', team: 'guest', form: ['1', '2', '3', '4', '5', '6'] }) + expect(wrapper.vm.showConfig).toBe(false) + }) + + it('Annulla chiude la modal di configurazione senza inviare nulla', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.dialog-config .btn-cancel').trigger('click') + expect(spy).not.toHaveBeenCalled() + expect(wrapper.vm.showConfig).toBe(false) + }) + + it('scegliendo la modalità 2/3 il bottone diventa attivo', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + const btn23 = wrapper.findAll('.btn-mode').find(b => b.text() === '2/3') + await btn23.trigger('click') + expect(wrapper.vm.configData.modalita).toBe('2/3') + expect(btn23.classes()).toContain('active') + }) + }) + + // ============================================= + // GESTIONE CAMBI GIOCATORE + // ============================================= + describe('Gestione cambi', () => { + it('il click su Cambi apre la selezione squadra, poi la modal cambio per la squadra scelta', async () => { + const wrapper = mountController() + const btnCambi = wrapper.findAll('.btn-ctrl').find(b => b.text() === 'Cambi') + await btnCambi.trigger('click') + expect(wrapper.vm.showCambiTeam).toBe(true) + await wrapper.find('.dialog-title').exists() + const btnHome = wrapper.find('.overlay .btn-set.home-bg') + await btnHome.trigger('click') + expect(wrapper.vm.showCambiTeam).toBe(false) + expect(wrapper.vm.showCambi).toBe(true) + expect(wrapper.vm.cambiTeam).toBe('home') + }) + + it('Annulla chiude la modal cambi e azzera i campi', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + wrapper.vm.cambiData = [{ in: '10', out: '1' }, { in: '', out: '' }] + await wrapper.vm.$nextTick() + await wrapper.find('.dialog .btn-cancel').trigger('click') + expect(wrapper.vm.showCambi).toBe(false) + expect(wrapper.vm.cambiData).toEqual([{ in: '', out: '' }, { in: '', out: '' }]) + }) + + it('CONFERMA con un cambio valido invia confermaCambi e chiude la modal', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + wrapper.vm.cambiData = [{ in: '10', out: '1' }, { in: '', out: '' }] + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.dialog .btn-confirm').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'confermaCambi', team: 'home', cambi: [{ in: '10', out: '1' }] }) + expect(wrapper.vm.showCambi).toBe(false) + }) + + it('segnala errore se il numero del giocatore non è formato da sole cifre', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + wrapper.vm.cambiData = [{ in: 'ab', out: '1' }, { in: '', out: '' }] + wrapper.vm.confermaCambi() + expect(wrapper.vm.cambiError).toBe('I numeri dei giocatori devono essere cifre') + }) + + it('segnala errore se il giocatore entrante coincide con l\'uscente', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + wrapper.vm.cambiData = [{ in: '1', out: '1' }, { in: '', out: '' }] + wrapper.vm.confermaCambi() + expect(wrapper.vm.cambiError).toBe('Il giocatore 1 non può sostituire sé stesso') + }) + + it('segnala errore se il giocatore entrante è già in formazione', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + // "2" è già presente nella formazione di default ["1".."6"] + wrapper.vm.cambiData = [{ in: '2', out: '1' }, { in: '', out: '' }] + wrapper.vm.confermaCambi() + expect(wrapper.vm.cambiError).toBe('Il giocatore 2 è già in formazione') + }) + + it('segnala errore se il giocatore uscente non è in formazione', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + wrapper.vm.cambiData = [{ in: '10', out: '9' }, { in: '', out: '' }] + wrapper.vm.confermaCambi() + expect(wrapper.vm.cambiError).toBe('Il giocatore 9 non è in formazione') + }) + + it('confermaCambi non fa nulla se cambiValid è false', () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + const spy = vi.spyOn(wrapper.vm, 'sendAction') + wrapper.vm.cambiData = [{ in: '', out: '' }, { in: '', out: '' }] + wrapper.vm.confermaCambi() + expect(spy).not.toHaveBeenCalled() + }) + }) + + // ============================================= + // GESTIONE ERRORI WEBSOCKET + // ============================================= + describe('Gestione errori WebSocket', () => { + it('onWsMessage con type error logga il messaggio', () => { + const wrapper = mountController() + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) + wrapper.vm.onWsMessage({ type: 'error', message: 'boom' }) + expect(spy).toHaveBeenCalledWith('[Controller] Error:', 'boom') + spy.mockRestore() + }) + + it('sendAction senza type non invia nulla', () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendWs') + wrapper.vm.sendAction({}) + expect(spy).not.toHaveBeenCalled() + }) + + it('sendAction mostra un feedback di errore se non connesso', () => { + const wrapper = mountController() + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}) + wrapper.vm.wsConnected = false + wrapper.vm.sendAction({ type: 'incPunt', team: 'home' }) + expect(errSpy).toHaveBeenCalledWith('[Controller] Error:', 'Non connesso al server') + errSpy.mockRestore() + }) + }) + + // ============================================= + // DURATA VIDEO SPOT + // ============================================= + describe('Durata video spot', () => { + it('formatDurata mostra i secondi arrotondati o un placeholder', () => { + const wrapper = mountController() + expect(wrapper.vm.formatDurata(12.4)).toBe('12s') + expect(wrapper.vm.formatDurata(undefined)).toBe('…') + expect(wrapper.vm.formatDurata(NaN)).toBe('…') + }) + + it('probeDurata popola spotDurations quando i metadata del video sono pronti', () => { + const wrapper = mountController() + const videoEls = [] + const originalCreateElement = document.createElement.bind(document) + vi.spyOn(document, 'createElement').mockImplementation((tag) => { + const el = originalCreateElement(tag) + if (tag === 'video') videoEls.push(el) + return el + }) + wrapper.vm.probeDurata('a.mp4') + const videoEl = videoEls[0] + Object.defineProperty(videoEl, 'duration', { value: 42, configurable: true }) + videoEl.onloadedmetadata() + expect(wrapper.vm.spotDurations['a.mp4']).toBe(42) + document.createElement.mockRestore() + }) + }) + + // ============================================= + // PULSANTI MOBILE (click reali sui bottoni) + // ============================================= + describe('Pulsanti layout mobile', () => { + it('ANNULLA PUNTO invia decPunt', async () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.btn-undo').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'decPunt' }) + }) + + it('i due bottoni SET inviano incSet per la rispettiva squadra', async () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const setBtns = wrapper.findAll('.action-row .btn-set') + await setBtns[0].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incSet', team: 'home' }) + await setBtns[1].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incSet', team: 'guest' }) + }) + + it('Formazioni/Striscia/Inverti/Voce inviano le rispettive action', async () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const byLabel = (label) => wrapper.findAll('.btn-ctrl').find(b => b.text().includes(label)) + await byLabel('Formazioni').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'toggleFormazione' }) + await byLabel('Striscia').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'toggleStriscia' }) + await byLabel('Inverti').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'toggleOrder' }) + const wsSendSpy = vi.spyOn(wrapper.vm, 'sendWs') + wrapper.vm.wsConnected = true + wrapper.vm.ws = { readyState: 1, send: vi.fn() } + await byLabel('Voce').trigger('click') + expect(wsSendSpy).toHaveBeenCalled() + }) + + it('con order=false lo score-preview mostra prima guest e poi home', async () => { + const wrapper = mountController() + wrapper.vm.state.order = false + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const scores = wrapper.findAll('.team-score') + expect(scores[0].classes()).toContain('guest-bg') + expect(scores[1].classes()).toContain('home-bg') + await scores[0].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incPunt', team: 'guest' }) + }) + }) + + // ============================================= + // MODALITÀ ESTESA: interazioni aggiuntive + // ============================================= + describe('Modalità estesa: interazioni', () => { + it('il click sul punteggio e sul bottone SET della seconda squadra funzionano', async () => { + const wrapper = mountController() + wrapper.vm.isLandscape = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.findAll('.e-panel__score')[1].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incPunt', team: 'guest' }) + await wrapper.findAll('.e-panel__setbtn')[0].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incSet', team: 'home' }) + await wrapper.findAll('.e-panel__setbtn')[1].trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'incSet', team: 'guest' }) + }) + + it('la barra e-actions invia le action corrispondenti ai bottoni', async () => { + const wrapper = mountController() + wrapper.vm.isLandscape = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const byLabel = (label) => wrapper.findAll('.e-act').find(b => b.text().includes(label)) + await byLabel('Annulla').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'decPunt' }) + await byLabel('Cambio Palla').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'cambiaPalla' }) + await byLabel('Inverti').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'toggleOrder' }) + await byLabel('Striscia').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'toggleStriscia' }) + expect(wrapper.vm.showCambiTeam).toBe(false) + const btnCambi = wrapper.findAll('.e-act').find(b => b.text() === 'Cambi') + await btnCambi.trigger('click') + expect(wrapper.vm.showCambiTeam).toBe(true) + wrapper.vm.showCambiTeam = false + await byLabel('Config').trigger('click') + expect(wrapper.vm.showConfig).toBe(true) + wrapper.vm.showConfig = false + await wrapper.find('.e-act--danger').trigger('click') + expect(wrapper.vm.confirmReset).toBe(true) + }) + + it('il bottone Voce e il bottone Time Out della barra estesa funzionano', async () => { + const wrapper = mountController() + wrapper.vm.isLandscape = true + await wrapper.vm.$nextTick() + wrapper.vm.wsConnected = true + wrapper.vm.ws = { readyState: 1, send: vi.fn() } + const wsSendSpy = vi.spyOn(wrapper.vm, 'sendWs') + const btnVoce = wrapper.findAll('.e-act').find(b => b.text() === 'Voce') + await btnVoce.trigger('click') + expect(wsSendSpy).toHaveBeenCalled() + + const btnTimeout = wrapper.find('.e-act.btn-timeout') + await btnTimeout.trigger('click') + expect(wrapper.vm.showTimeoutModal).toBe(true) + wrapper.vm.showTimeoutModal = false + wrapper.vm.state.timeout = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await btnTimeout.trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'stopTimeout' }) + }) + }) + + // ============================================= + // CHIUSURA DIALOG CLICCANDO FUORI (overlay self) + // ============================================= + describe('Chiusura dialog cliccando fuori', () => { + it('conferma reset si chiude cliccando fuori dal dialog', async () => { + const wrapper = mountController() + wrapper.vm.confirmReset = true + await wrapper.vm.$nextTick() + await wrapper.find('.overlay').trigger('click') + expect(wrapper.vm.confirmReset).toBe(false) + }) + + it('configurazione si chiude cliccando fuori dal dialog', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + await wrapper.find('.overlay').trigger('click') + expect(wrapper.vm.showConfig).toBe(false) + }) + + it('scelta squadra cambi si chiude cliccando fuori dal dialog', async () => { + const wrapper = mountController() + wrapper.vm.showCambiTeam = true + await wrapper.vm.$nextTick() + await wrapper.find('.overlay').trigger('click') + expect(wrapper.vm.showCambiTeam).toBe(false) + }) + + it('la modal cambi si chiude cliccando fuori dal dialog', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + await wrapper.vm.$nextTick() + await wrapper.find('.overlay').trigger('click') + expect(wrapper.vm.showCambi).toBe(false) + }) + + it('la modal time out si chiude cliccando fuori dal dialog', async () => { + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + await wrapper.find('.overlay').trigger('click') + expect(wrapper.vm.showTimeoutModal).toBe(false) + }) + }) + + // ============================================= + // DIALOG PARTITA FINITA / CONFIGURAZIONE: dettagli + // ============================================= + describe('Dettagli dialog', () => { + it('CHIUDI chiude il dialog partita finita senza inviare action', async () => { + const wrapper = mountController() + wrapper.vm.state.modalitaPartita = '2/3' + wrapper.vm.state.sp.striscia = [ + { serv: 'h', ris: '', vinc: 'h' }, + { serv: 'h', ris: '', vinc: null }, + ] + wrapper.vm.setVintoTeam = 'home' + wrapper.vm.showSetVinto = true + await wrapper.vm.$nextTick() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + const chiudi = wrapper.findAll('.btn-confirm').find(b => b.text() === 'CHIUDI') + await chiudi.trigger('click') + expect(spy).not.toHaveBeenCalled() + expect(wrapper.vm.showSetVinto).toBe(false) + }) + + it('isPartitaFinita è false in modalità amichevole anche a set vinto', () => { + const wrapper = mountController() + wrapper.vm.state.modalitaPartita = 'amichevole' + wrapper.vm.setVintoTeam = 'home' + expect(wrapper.vm.isPartitaFinita).toBe(false) + }) + + it('la vittoria della squadra guest apre comunque la modal SET VINTO', async () => { + const wrapper = mountController() + setScore(wrapper, 10, 25, 'g') + await wrapper.vm.$nextTick() + expect(wrapper.vm.setVintoTeam).toBe('guest') + }) + + it('nel set decisivo la soglia di vittoria scende a 15 punti', async () => { + const wrapper = mountController() + // 4 set già assegnati (2 a testa): il quinto è il set decisivo (3/5) + wrapper.vm.state.sp.striscia = [ + { serv: 'h', ris: '', vinc: 'h' }, + { serv: 'h', ris: '', vinc: 'g' }, + { serv: 'h', ris: '', vinc: 'h' }, + { serv: 'h', ris: '', vinc: 'g' }, + { serv: 'h', ris: '', vinc: null }, + ] + setScore(wrapper, 15, 10) + await wrapper.vm.$nextTick() + expect(wrapper.vm.setVintoTeam).toBe('home') + }) + + it('i bottoni modalità 3/5 e amichevole aggiornano configData', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + const btn35 = wrapper.findAll('.btn-mode').find(b => b.text() === '3/5') + await btn35.trigger('click') + expect(wrapper.vm.configData.modalita).toBe('3/5') + const btnAmichevole = wrapper.findAll('.btn-mode').find(b => b.text() === 'Amichevole') + await btnAmichevole.trigger('click') + expect(wrapper.vm.configData.modalita).toBe('amichevole') + expect(btnAmichevole.classes()).toContain('active') + }) + + it('i campi di testo di configurazione aggiornano configData tramite v-model', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + const inputs = wrapper.findAll('.dialog-config .input-field') + await inputs[0].setValue('Casa Nuova') + await inputs[1].setValue('Ospiti Nuovi') + expect(wrapper.vm.configData.nomeHome).toBe('Casa Nuova') + expect(wrapper.vm.configData.nomeGuest).toBe('Ospiti Nuovi') + }) + + it('i campi numerici della formazione aggiornano configData tramite v-model', async () => { + const wrapper = mountController() + wrapper.vm.showConfig = true + await wrapper.vm.$nextTick() + const numInputs = wrapper.findAll('.dialog-config .input-num') + // 6 campi per home + 6 per guest: li valorizziamo tutti per coprire ogni binding v-model + for (let i = 0; i < numInputs.length; i++) { + await numInputs[i].setValue(String(i)) + } + // il DOM ordina le celle come 3,2,1 / 4,5,0: verifichiamo l'insieme dei valori digitati + expect(new Set(wrapper.vm.configData.formHome)).toEqual(new Set(['0', '1', '2', '3', '4', '5'])) + expect(new Set(wrapper.vm.configData.formGuest)).toEqual(new Set(['6', '7', '8', '9', '10', '11'])) + }) + + it('la selezione squadra guest per i cambi apre la modal con cambiTeam=guest', async () => { + const wrapper = mountController() + wrapper.vm.showCambiTeam = true + await wrapper.vm.$nextTick() + await wrapper.find('.overlay .btn-set.guest-bg').trigger('click') + expect(wrapper.vm.cambiTeam).toBe('guest') + expect(wrapper.vm.showCambi).toBe(true) + }) + + it('i campi IN/OUT della modal cambi aggiornano cambiData tramite v-model', async () => { + const wrapper = mountController() + wrapper.vm.openCambi('home') + await wrapper.vm.$nextTick() + const inField = wrapper.find('.cambi-in-field') + const outField = wrapper.find('.cambi-out-field') + await inField.setValue('10') + await outField.setValue('1') + expect(wrapper.vm.cambiData[0]).toEqual({ in: '10', out: '1' }) + }) + + it('nella modal time out si può selezionare un video dall\'elenco tramite radio', async () => { + fetchMock.mockResolvedValueOnce({ json: async () => ['a.mp4'] }) + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + const radios = wrapper.findAll('input[type=radio]') + await radios[0].setValue(true) + expect(wrapper.vm.timeoutVideoSel).toBe('a.mp4') + await radios[1].setValue(true) + expect(wrapper.vm.timeoutVideoSel).toBe(null) + }) + + it('Annulla nella modal time out la chiude senza avviarlo', async () => { + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.dialog-timeout .btn-cancel').trigger('click') + expect(spy).not.toHaveBeenCalled() + expect(wrapper.vm.showTimeoutModal).toBe(false) + }) + }) + // ============================================= // BARRA CONNESSIONE // ============================================= diff --git a/tests/component/DisplayPage.test.js b/tests/component/DisplayPage.test.js index 0cc6167..2527b29 100644 --- a/tests/component/DisplayPage.test.js +++ b/tests/component/DisplayPage.test.js @@ -31,6 +31,15 @@ vi.stubGlobal('speechSynthesis', { getVoices: () => [] }) +// happy-dom non implementa la Web Speech API: stub minimo dell'utterance. +vi.stubGlobal('SpeechSynthesisUtterance', class { + constructor(text) { + this.text = text + this.voice = null + this.lang = '' + } +}) + // happy-dom non implementa la riproduzione media: stub di play/pause/load // così l'overlay time out può montare il