From da01149a2aff8eb23d718d15080e8d029a50c6c2 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Fri, 3 Jul 2026 10:58:40 +0200
Subject: [PATCH] test(display): copri l'overlay time out (video, placeholder,
 countdown)

Nessun test component copriva ancora l'overlay introdotto con
startTimeout/stopTimeout: placeholder senza video, riproduzione con
src corretto, fallback a fine video, countdown e dissolvenza oltre i
30s. Stub di play/pause/load su HTMLMediaElement, non implementati da
happy-dom.
---
 tests/component/DisplayPage.test.js | 82 +++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/tests/component/DisplayPage.test.js b/tests/component/DisplayPage.test.js
index 4b8f52d..0cc6167 100644
--- a/tests/component/DisplayPage.test.js
+++ b/tests/component/DisplayPage.test.js
@@ -31,6 +31,12 @@ vi.stubGlobal('speechSynthesis', {
     getVoices: () => []
 })
 
+// happy-dom non implementa la riproduzione media: stub di play/pause/load
+// così l'overlay time out può montare il <video> senza errori.
+Object.defineProperty(HTMLMediaElement.prototype, 'play', { value: vi.fn().mockResolvedValue(undefined), writable: true })
+Object.defineProperty(HTMLMediaElement.prototype, 'pause', { value: vi.fn(), writable: true })
+Object.defineProperty(HTMLMediaElement.prototype, 'load', { value: vi.fn(), writable: true })
+
 function mountDisplay() {
     return mount(DisplayPage, {
         global: {
@@ -175,6 +181,82 @@ describe('DisplayPage.vue', () => {
         })
     })
 
+    // =============================================
+    // OVERLAY TIME OUT
+    // =============================================
+    describe('Overlay time out', () => {
+        // Attiva il time out impostando lo stato come farebbe il server.
+        async function attivaTimeout(wrapper, { team = 'home', video = null, startedAt = Date.now() } = {}) {
+            wrapper.vm.state.timeoutTeam = team
+            wrapper.vm.state.timeoutVideo = video
+            wrapper.vm.state.timeoutStartedAt = startedAt
+            wrapper.vm.state.timeout = true
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick()
+        }
+
+        it('non mostra l\'overlay quando il time out non è attivo', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(false)
+        })
+
+        it('senza video mostra il placeholder con il nome della squadra', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { team: 'home', video: null })
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(true)
+            const placeholder = wrapper.find('.timeout-placeholder')
+            expect(placeholder.text()).toContain('TIME OUT')
+            expect(placeholder.text()).toContain('Antoniana')
+            expect(wrapper.find('.timeout-video').exists()).toBe(false)
+        })
+
+        it('con un video lo riproduce nell\'overlay', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { team: 'guest', video: 'a.mp4' })
+            const video = wrapper.find('.timeout-video')
+            expect(video.exists()).toBe(true)
+            expect(video.element.src).toContain('/spot/a.mp4')
+            expect(wrapper.find('.timeout-placeholder').exists()).toBe(false)
+        })
+
+        it('a fine video mostra il placeholder fino allo stop del server', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { video: 'a.mp4' })
+            const video = wrapper.find('.timeout-video')
+            video.element.onended()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.timeout-video').exists()).toBe(false)
+            expect(wrapper.find('.timeout-placeholder').exists()).toBe(true)
+        })
+
+        it('il countdown parte da timeoutStartedAt', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { startedAt: Date.now() - 5000 })
+            expect(wrapper.vm.timeoutRemaining).toBe(25)
+            expect(wrapper.find('.timeout-countdown').text()).toBe('00:25')
+        })
+
+        it('timeoutFading è true solo con video oltre i 30s negli ultimi istanti', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { video: 'a.mp4', startedAt: Date.now() - 29500 })
+            // video corto: mai dissolvenza
+            wrapper.vm.spotVideoDuration = 20
+            expect(wrapper.vm.timeoutFading).toBe(false)
+            // video più lungo dei 30s: dissolvenza nell'ultimo secondo
+            wrapper.vm.spotVideoDuration = 45
+            expect(wrapper.vm.timeoutRemaining).toBe(1)
+            expect(wrapper.vm.timeoutFading).toBe(true)
+        })
+
+        it('alla fine del time out l\'overlay scompare', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper)
+            wrapper.vm.state.timeout = false
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(false)
+        })
+    })
+
     // =============================================
     // ICONA SERVIZIO
     // =============================================