chess/tests/e2e/status-message.spec.js

/**
 * Status Message Display Tests
 * Tests the status message element functionality and visibility
 */

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

test.describe('Status Message Display', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/');
    });

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

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

    test('new game shows status message', async ({ page }) => {
        // Accept the confirm dialog that appears when clicking new game
        page.on('dialog', dialog => dialog.accept());

        await page.click('#btn-new-game');

        const statusMessage = page.locator('#status-message');
        await expect(statusMessage).toBeVisible({ timeout: 2000 });
    });

    test('status message has correct CSS classes', async ({ page }) => {
        const statusMessage = page.locator('#status-message');
        await expect(statusMessage).toHaveClass(/status-message/);
    });
});