From 8d53178c541b4a94b60c81888fee988d8128c757 Mon Sep 17 00:00:00 2001 From: Davide Grilli Date: Fri, 3 Jul 2026 10:58:53 +0200 Subject: [PATCH] test(controller): copri la modal e il banner del time out Copre apertura modal con fetch di /spot/list (incluso il fallback di rete), il vincolo squadra obbligatoria su Avvia, l'invio di startTimeout/stopTimeout e il banner con countdown durante il time out attivo. --- tests/component/ControllerPage.test.js | 80 +++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/tests/component/ControllerPage.test.js b/tests/component/ControllerPage.test.js index 3cad251..53cbeca 100644 --- a/tests/component/ControllerPage.test.js +++ b/tests/component/ControllerPage.test.js @@ -1,6 +1,6 @@ // @vitest-environment happy-dom import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { mount } from '@vue/test-utils' +import { mount, flushPromises } from '@vue/test-utils' import ControllerPage from '../../src/components/ControllerPage.vue' import { generaReferto } from '../../src/referto.js' @@ -29,6 +29,10 @@ class MockWebSocket { vi.stubGlobal('WebSocket', MockWebSocket) +// Mock di fetch per /spot/list (usato dalla modal time out). +const fetchMock = vi.fn().mockResolvedValue({ json: async () => [] }) +vi.stubGlobal('fetch', fetchMock) + // Forza l'orientamento portrait → il controller usa il layout "mobile" // (con .team-pts, .btn-ctrl, ecc.) su cui questi test fanno asserzioni. Object.defineProperty(window, 'innerWidth', { value: 400, writable: true, configurable: true }) @@ -287,6 +291,80 @@ describe('ControllerPage.vue', () => { }) }) + // ============================================= + // TIME OUT + // ============================================= + describe('Time Out', () => { + it('il click su Time Out apre la modal con l\'elenco dei video', async () => { + fetchMock.mockResolvedValueOnce({ json: async () => ['a.mp4', 'b.mp4'] }) + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + expect(wrapper.vm.showTimeoutModal).toBe(true) + expect(wrapper.find('.dialog-timeout').exists()).toBe(true) + expect(wrapper.vm.spotList).toEqual(['a.mp4', 'b.mp4']) + // le opzioni sono i video più "Nessun video" + expect(wrapper.findAll('.timeout-video-option')).toHaveLength(3) + }) + + it('se /spot/list fallisce la modal si apre comunque senza video', async () => { + fetchMock.mockRejectedValueOnce(new Error('rete assente')) + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + expect(wrapper.vm.showTimeoutModal).toBe(true) + expect(wrapper.vm.spotList).toEqual([]) + }) + + it('Avvia è disabilitato finché non si sceglie la squadra', async () => { + const wrapper = mountController() + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + const avvia = wrapper.find('.dialog-timeout .btn-confirm') + expect(avvia.attributes('disabled')).toBeDefined() + await wrapper.find('.dialog-timeout .btn-set.home-bg').trigger('click') + expect(avvia.attributes('disabled')).toBeUndefined() + }) + + it('Avvia invia startTimeout con squadra e video e chiude la modal', async () => { + fetchMock.mockResolvedValueOnce({ json: async () => ['a.mp4'] }) + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + await wrapper.find('.btn-timeout').trigger('click') + await flushPromises() + await wrapper.find('.dialog-timeout .btn-set.guest-bg').trigger('click') + wrapper.vm.timeoutVideoSel = 'a.mp4' + await wrapper.find('.dialog-timeout .btn-confirm').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'startTimeout', team: 'guest', video: 'a.mp4' }) + expect(wrapper.vm.showTimeoutModal).toBe(false) + }) + + it('durante il time out il bottone invia stopTimeout', async () => { + const wrapper = mountController() + const spy = vi.spyOn(wrapper.vm, 'sendAction') + wrapper.vm.state.timeout = true + wrapper.vm.state.timeoutTeam = 'home' + await wrapper.vm.$nextTick() + await wrapper.find('.btn-timeout').trigger('click') + expect(spy).toHaveBeenCalledWith({ type: 'stopTimeout' }) + }) + + it('durante il time out mostra banner con squadra e countdown', async () => { + const wrapper = mountController() + wrapper.vm.state.timeoutTeam = 'home' + wrapper.vm.state.timeoutStartedAt = Date.now() - 10000 + wrapper.vm.state.timeout = true + await wrapper.vm.$nextTick() + const banner = wrapper.find('.timeout-banner') + expect(banner.exists()).toBe(true) + expect(banner.text()).toContain('TIME OUT') + expect(banner.text()).toContain('Antoniana') + expect(banner.text()).toContain('00:20') + // anche il bottone mostra il countdown + expect(wrapper.find('.btn-timeout').text()).toBe('00:20') + }) + }) + // ============================================= // BARRA CONNESSIONE // =============================================