segnapunti/tests/component/DisplayPage.test.js

// @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()
            // il punteggio si ricava dalla striscia: 15 punti home + 12 guest
            wrapper.vm.state.sp.striscia.at(-1).ris = 'h'.repeat(15) + 'g'.repeat(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')
        })
    })
})