chess/tests/ui/status-message.test.js

/**
 * Status Message Display Tests - Issue #7
 * Tests for the status message element and its functionality
 */

import { test, expect } from '@playwright/test';

test.describe('Status Message Display', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('http://localhost:8080');
        await page.waitForLoadState('networkidle');
    });

    test('status message element exists in DOM', async ({ page }) => {
        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeAttached();
    });

    test('status message is hidden by default', async ({ page }) => {
        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toHaveCSS('display', 'none');
    });

    test('new game shows status message', async ({ page }) => {
        const newGameBtn = await page.locator('#btn-new-game');

        // Accept the confirm dialog
        page.on('dialog', dialog => dialog.accept());
        await newGameBtn.click();

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeVisible();
        await expect(statusMessage).toContainText('New game started!');
    });

    test('status message auto-hides after 3 seconds', async ({ page }) => {
        const newGameBtn = await page.locator('#btn-new-game');

        // Accept the confirm dialog
        page.on('dialog', dialog => dialog.accept());
        await newGameBtn.click();

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeVisible();

        // Wait for message to auto-hide
        await page.waitForTimeout(3100);
        await expect(statusMessage).toHaveCSS('display', 'none');
    });

    test('check message displays with info styling', async ({ page }) => {
        // Create a check situation (this would require setting up a specific board state)
        // For now, we'll test that the element can receive the info class
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Check! black king is in check', 'info');
            }
        });

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeVisible();
        await expect(statusMessage).toHaveClass(/info/);
        await expect(statusMessage).toContainText('Check!');
    });

    test('checkmate message displays with success styling', async ({ page }) => {
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Checkmate! white wins!', 'success');
            }
        });

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeVisible();
        await expect(statusMessage).toHaveClass(/success/);
        await expect(statusMessage).toContainText('Checkmate!');
    });

    test('error messages display with error styling', async ({ page }) => {
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Invalid move!', 'error');
            }
        });

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toBeVisible();
        await expect(statusMessage).toHaveClass(/error/);
    });

    test('multiple messages display sequentially', async ({ page }) => {
        // Show first message
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('First message', 'info');
            }
        });

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toContainText('First message');

        // Show second message (should replace first)
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Second message', 'success');
            }
        });

        await expect(statusMessage).toContainText('Second message');
        await expect(statusMessage).toHaveClass(/success/);
    });

    test('status message has correct CSS classes', async ({ page }) => {
        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Test message', 'info');
            }
        });

        const statusMessage = await page.locator('#status-message');
        await expect(statusMessage).toHaveClass('status-message info');
    });

    test('console warning not shown when element exists', async ({ page }) => {
        const consoleWarnings = [];
        page.on('console', msg => {
            if (msg.type() === 'warning') {
                consoleWarnings.push(msg.text());
            }
        });

        await page.evaluate(() => {
            const app = window.app;
            if (app && app.showMessage) {
                app.showMessage('Test message', 'info');
            }
        });

        expect(consoleWarnings.filter(w => w.includes('Status message element not found'))).toHaveLength(0);
    });
});