chess/tests/e2e/layout-stability.spec.js

/**
 * Layout Stability Tests
 * Tests that column widths and row heights remain stable during gameplay
 */

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

test.describe('Layout Stability', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/');
    });

    test('chess board has fixed dimensions', async ({ page }) => {
        const board = page.locator('#chess-board');
        const box = await board.boundingBox();
        
        expect(box.width).toBe(600);
        expect(box.height).toBe(600);
    });

    test('board squares are 75px x 75px', async ({ page }) => {
        const firstSquare = page.locator('.square').first();
        const box = await firstSquare.boundingBox();
        
        expect(box.width).toBe(75);
        expect(box.height).toBe(75);
    });

    test('column widths remain stable when pieces are captured', async ({ page }) => {
        // Get initial column widths
        const leftSidebar = page.locator('.captured-white').first();
        const boardSection = page.locator('.board-section');
        const rightSidebar = page.locator('.game-sidebar');
        
        const initialLeft = await leftSidebar.boundingBox();
        const initialBoard = await boardSection.boundingBox();
        const initialRight = await rightSidebar.boundingBox();
        
        // Make moves that capture pieces
        // e2 to e4
        await page.locator('.square[data-row="6"][data-col="4"]').click();
        await page.locator('.square[data-row="4"][data-col="4"]').click();
        
        // Wait a bit for any animations
        await page.waitForTimeout(500);
        
        // Get widths after move
        const afterLeft = await leftSidebar.boundingBox();
        const afterBoard = await boardSection.boundingBox();
        const afterRight = await rightSidebar.boundingBox();
        
        // Widths should remain exactly the same
        expect(afterLeft.width).toBe(initialLeft.width);
        expect(afterBoard.width).toBe(initialBoard.width);
        expect(afterRight.width).toBe(initialRight.width);
    });

    test('row heights remain stable when highlighting moves', async ({ page }) => {
        // Get initial row heights by measuring first and last square
        const firstSquare = page.locator('.square').first();
        const initialBox = await firstSquare.boundingBox();
        
        // Click a piece to highlight legal moves
        await page.locator('.square[data-row="6"][data-col="4"]').click();
        
        // Wait for highlighting
        await page.waitForTimeout(300);
        
        // Check that square dimensions haven't changed
        const afterBox = await firstSquare.boundingBox();
        expect(afterBox.height).toBe(initialBox.height);
    });

    test('last-move highlighting does not change layout', async ({ page }) => {
        const board = page.locator('#chess-board');
        const initialBox = await board.boundingBox();
        
        // Make a move (e2 to e4)
        await page.locator('.square[data-row="6"][data-col="4"]').click();
        await page.locator('.square[data-row="4"][data-col="4"]').click();
        
        // Wait for last-move highlight to apply
        await page.waitForTimeout(300);
        
        // Board dimensions should not change
        const afterBox = await board.boundingBox();
        expect(afterBox.width).toBe(initialBox.width);
        expect(afterBox.height).toBe(initialBox.height);
    });
});