segnapunti/tests/e2e/visual-regression.spec.cjs

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

// Helper: reset dal controller
async function resetGame(controllerPage) {
    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(300);
}

test.describe('Visual Regression', () => {

    test('Display: screenshot a 0-0', async ({ context }) => {
        const controllerPage = await context.newPage();
        const displayPage = await context.newPage();

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

        // Reset per stato pulito
        await resetGame(controllerPage);

        // Attende che il display riceva lo stato
        await displayPage.waitForTimeout(500);

        await expect(displayPage).toHaveScreenshot('display-0-0.png', {
            maxDiffPixelRatio: 0.05,
        });
    });

    test('Display: screenshot durante partita (15-12)', async ({ context }) => {
        const controllerPage = await context.newPage();
        const displayPage = await context.newPage();

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

        await resetGame(controllerPage);

        // Porta il punteggio a 15-12
        for (let i = 0; i < 15; i++) {
            await controllerPage.locator('.team-score.home-bg').click();
            await controllerPage.waitForTimeout(20);
        }
        for (let i = 0; i < 12; i++) {
            await controllerPage.locator('.team-score.guest-bg').click();
            await controllerPage.waitForTimeout(20);
        }
        await displayPage.waitForTimeout(500);

        await expect(displayPage).toHaveScreenshot('display-15-12.png', {
            maxDiffPixelRatio: 0.05,
        });
    });

    test('Controller: screenshot stato iniziale', async ({ context }) => {
        const controllerPage = await context.newPage();
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');
        await controllerPage.waitForSelector('.conn-bar.connected');

        await resetGame(controllerPage);

        await expect(controllerPage).toHaveScreenshot('controller-initial.png', {
            maxDiffPixelRatio: 0.05,
        });
    });

    test('Controller: screenshot con modal config aperta', async ({ context }) => {
        const controllerPage = await context.newPage();
        await controllerPage.setViewportSize({ width: 390, height: 844 });
        await controllerPage.goto('http://localhost:3000/controller');
        await controllerPage.waitForSelector('.conn-bar.connected');

        // Apri config
        await controllerPage.getByText('Config').click();
        await controllerPage.waitForSelector('.dialog-config');
        await controllerPage.waitForTimeout(300);

        await expect(controllerPage).toHaveScreenshot('controller-config-modal.png', {
            maxDiffPixelRatio: 0.05,
        });
    });
});