segnapunti/tests/e2e/basic-flow.spec.cjs

const { test, expect } = require('@playwright/test');

test.describe('Basic Flow: Controller ↔ Display', () => {

    test('dovrebbe caricare Display e Controller con i titoli corretti', async ({ context }) => {
        const displayPage = await context.newPage();
        const controllerPage = await context.newPage();

        await displayPage.goto('http://localhost:3000');
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');

        await expect(displayPage).toHaveTitle(/Segnapunti/);
        await expect(controllerPage).toHaveTitle(/Controller/);
    });

    test('il punteggio iniziale dovrebbe essere 0-0', async ({ context }) => {
        const controllerPage = await context.newPage();
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');

        // Attende la connessione WebSocket
        await controllerPage.waitForSelector('.conn-bar.connected');

        const homeScore = controllerPage.locator('.team-score.home-bg .team-pts');
        const guestScore = controllerPage.locator('.team-score.guest-bg .team-pts');
        await expect(homeScore).toHaveText('0');
        await expect(guestScore).toHaveText('0');
    });

    test('click +1 Home sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
        const displayPage = await context.newPage();
        const controllerPage = await context.newPage();

        await displayPage.goto('http://localhost:3000');
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');

        // Attende la connessione WebSocket del controller
        await controllerPage.waitForSelector('.conn-bar.connected');

        // Reset per stato pulito
        await controllerPage.getByText(/Reset/i).first().click();
        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
        if (await btnConfirm.isVisible()) {
            await btnConfirm.click();
        }
        // doReset apre automaticamente il dialog di configurazione: chiudilo
        const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
        if (await cfgCancel.isVisible()) {
            await cfgCancel.click();
        }
        await controllerPage.waitForTimeout(200);

        // Click +1 Home
        await controllerPage.locator('.team-score.home-bg').click();
        await controllerPage.waitForTimeout(200);

        // Verifica Controller mostra 1
        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('1');

        // Verifica Display mostra 1 (il punteggio grande)
        await expect(displayPage.locator('.punt.home')).toHaveText('1');
    });

    test('click +1 Guest sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
        const displayPage = await context.newPage();
        const controllerPage = await context.newPage();

        await displayPage.goto('http://localhost:3000');
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');

        await controllerPage.waitForSelector('.conn-bar.connected');

        // Reset
        await controllerPage.getByText(/Reset/i).first().click();
        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
        if (await btnConfirm.isVisible()) {
            await btnConfirm.click();
        }
        // doReset apre automaticamente il dialog di configurazione: chiudilo
        const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
        if (await cfgCancel.isVisible()) {
            await cfgCancel.click();
        }
        await controllerPage.waitForTimeout(200);

        // Click +1 Guest
        await controllerPage.locator('.team-score.guest-bg').click();
        await controllerPage.waitForTimeout(200);

        // Verifica Controller
        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('1');

        // Verifica Display
        await expect(displayPage.locator('.punt.guest')).toHaveText('1');
    });

    test('la sincronizzazione dovrebbe funzionare con punti alternati', async ({ context }) => {
        const displayPage = await context.newPage();
        const controllerPage = await context.newPage();

        await displayPage.goto('http://localhost:3000');
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');

        await controllerPage.waitForSelector('.conn-bar.connected');

        // Reset
        await controllerPage.getByText(/Reset/i).first().click();
        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
        if (await btnConfirm.isVisible()) {
            await btnConfirm.click();
        }
        // doReset apre automaticamente il dialog di configurazione: chiudilo
        const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
        if (await cfgCancel.isVisible()) {
            await cfgCancel.click();
        }
        await controllerPage.waitForTimeout(200);

        // Home +1, Guest +1, Home +1
        await controllerPage.locator('.team-score.home-bg').click();
        await controllerPage.waitForTimeout(100);
        await controllerPage.locator('.team-score.guest-bg').click();
        await controllerPage.waitForTimeout(100);
        await controllerPage.locator('.team-score.home-bg').click();
        await controllerPage.waitForTimeout(200);

        // Controller: Home 2, Guest 1
        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('2');
        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('1');

        // Display: Home 2, Guest 1
        await expect(displayPage.locator('.punt.home')).toHaveText('2');
        await expect(displayPage.locator('.punt.guest')).toHaveText('1');
    });
});