test(vitest): amplia la suite con test unitari, integrazione, componenti e stress

- aggiunge test per gameState e utilita server
- aggiunge test di integrazione WebSocket
- aggiunge test componenti Vue (ControllerPage/DisplayPage)
- aggiunge test stress su carico WebSocket
- aggiorna configurazione Vitest per includere nuove cartelle e ambiente componenti
- aggiorna script npm e dipendenze di test

tests/component/DisplayPage.test.js

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DisplayPage from '../../src/components/DisplayPage.vue'
+
+// Mock globale WebSocket per jsdom
+class MockWebSocket {
+    static OPEN = 1
+    static CONNECTING = 0
+    readyState = 0
+    onopen = null
+    onclose = null
+    onmessage = null
+    onerror = null
+    send = vi.fn()
+    close = vi.fn()
+    constructor() {
+        setTimeout(() => {
+            this.readyState = 1
+            if (this.onopen) this.onopen()
+        }, 0)
+    }
+}
+
+vi.stubGlobal('WebSocket', MockWebSocket)
+
+// Mock requestFullscreen e speechSynthesis
+vi.stubGlobal('speechSynthesis', {
+    speak: vi.fn(),
+    cancel: vi.fn(),
+    getVoices: () => []
+})
+
+function mountDisplay() {
+    return mount(DisplayPage, {
+        global: {
+            stubs: { 'w-app': true }
+        }
+    })
+}
+
+describe('DisplayPage.vue', () => {
+
+    beforeEach(() => {
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    // =============================================
+    // RENDERING PUNTEGGIO
+    // =============================================
+    describe('Rendering punteggio', () => {
+        it('dovrebbe mostrare i nomi dei team', () => {
+            const wrapper = mountDisplay()
+            const text = wrapper.text()
+            expect(text).toContain('Antoniana')
+            expect(text).toContain('Guest')
+        })
+
+        it('dovrebbe mostrare punteggio iniziale 0-0', () => {
+            const wrapper = mountDisplay()
+            const punti = wrapper.findAll('.punt')
+            expect(punti[0].text()).toBe('0')
+            expect(punti[1].text()).toBe('0')
+        })
+
+        it('dovrebbe mostrare i set corretti', () => {
+            const wrapper = mountDisplay()
+            const text = wrapper.text()
+            expect(text).toContain('set 0')
+        })
+
+        it('dovrebbe aggiornare il punteggio quando lo stato cambia', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.sp.punt.home = 15
+            wrapper.vm.state.sp.punt.guest = 12
+            await wrapper.vm.$nextTick()
+            const punti = wrapper.findAll('.punt')
+            expect(punti[0].text()).toBe('15')
+            expect(punti[1].text()).toBe('12')
+        })
+    })
+
+    // =============================================
+    // ORDINE TEAM
+    // =============================================
+    describe('Ordine team', () => {
+        it('order=true → Home prima di Guest', () => {
+            const wrapper = mountDisplay()
+            const headers = wrapper.findAll('.hea')
+            expect(headers[0].classes()).toContain('home')
+            expect(headers[1].classes()).toContain('guest')
+        })
+
+        it('order=false → Guest prima di Home', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.order = false
+            await wrapper.vm.$nextTick()
+            const headers = wrapper.findAll('.hea')
+            expect(headers[0].classes()).toContain('guest')
+            expect(headers[1].classes()).toContain('home')
+        })
+    })
+
+    // =============================================
+    // FORMAZIONE vs PUNTEGGIO
+    // =============================================
+    describe('visuForm toggle', () => {
+        it('visuForm=false → mostra punteggio grande', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.punteggio-container').exists()).toBe(true)
+            expect(wrapper.find('.form').exists()).toBe(false)
+        })
+
+        it('visuForm=true → mostra formazione', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuForm = true
+            await wrapper.vm.$nextTick()
+            expect(wrapper.findAll('.form').length).toBeGreaterThan(0)
+            expect(wrapper.find('.punteggio-container').exists()).toBe(false)
+        })
+
+        it('formazione mostra 6 giocatori per team', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuForm = true
+            await wrapper.vm.$nextTick()
+            const formDivs = wrapper.findAll('.formdiv')
+            // 6 per home + 6 per guest = 12
+            expect(formDivs).toHaveLength(12)
+        })
+    })
+
+    // =============================================
+    // STRISCIA
+    // =============================================
+    describe('visuStriscia toggle', () => {
+        it('visuStriscia=true → mostra la striscia', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.striscia').exists()).toBe(true)
+        })
+
+        it('visuStriscia=false → nasconde la striscia', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuStriscia = false
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.striscia').exists()).toBe(false)
+        })
+    })
+
+    // =============================================
+    // INDICATORE CONNESSIONE
+    // =============================================
+    describe('Indicatore connessione', () => {
+        it('dovrebbe avere classe "disconnected" quando non connesso', () => {
+            const wrapper = mountDisplay()
+            const status = wrapper.find('.connection-status')
+            expect(status.classes()).toContain('disconnected')
+        })
+
+        it('dovrebbe avere classe "connected" quando connesso', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.wsConnected = true
+            await wrapper.vm.$nextTick()
+            const status = wrapper.find('.connection-status')
+            expect(status.classes()).toContain('connected')
+        })
+
+        it('dovrebbe mostrare "Disconnesso" quando non connesso', () => {
+            const wrapper = mountDisplay()
+            const status = wrapper.find('.connection-status')
+            expect(status.text()).toContain('Disconnesso')
+        })
+    })
+
+    // =============================================
+    // ICONA SERVIZIO
+    // =============================================
+    describe('Icona servizio', () => {
+        it('dovrebbe mostrare l\'icona servizio sul team home quando servHome=true', () => {
+            const wrapper = mountDisplay()
+            // v-show imposta display:none. In happy-dom controlliamo lo style.
+            const imgs = wrapper.findAll('.serv-slot img')
+            // Con state.order=true e servHome=true:
+            // - la prima img (home) è visibile (no display:none)
+            // - la seconda img (guest) ha display:none
+            const homeStyle = imgs[0].attributes('style') || ''
+            const guestStyle = imgs[1].attributes('style') || ''
+            expect(homeStyle).not.toContain('display: none')
+            expect(guestStyle).toContain('display: none')
+        })
+    })
+})