test_tiled.py

"""
Visual regression test for Space Jam 1996 landing page recreation (tiled background version).
Compares rendered page against reference screenshot.
"""
import http.server
import socketserver
import threading
import os
from pathlib import Path

from playwright.sync_api import sync_playwright
from PIL import Image
import numpy as np


REFERENCE_SCREENSHOT = Path(__file__).parent / "screenshot.png"
TEST_SCREENSHOT = Path(__file__).parent / "test_tiled_output.png"
DIFF_SCREENSHOT = Path(__file__).parent / "diff_tiled_output.png"
HTML_FILE = Path(__file__).parent / "index_tiled.html"
PORT = 8767

EXPECTED_WIDTH = 1791
EXPECTED_HEIGHT = 1000


class ReuseAddrTCPServer(socketserver.TCPServer):
    allow_reuse_address = True


def start_server():
    """Start a simple HTTP server to serve the static files."""
    os.chdir(Path(__file__).parent)
    handler = http.server.SimpleHTTPRequestHandler
    httpd = ReuseAddrTCPServer(("", PORT), handler)
    thread = threading.Thread(target=httpd.serve_forever, daemon=True)
    thread.start()
    return httpd


def calculate_pixel_difference(img1_path: Path, img2_path: Path, diff_path: Path) -> tuple[int, float]:
    """
    Calculate pixel-by-pixel difference between two images.
    Returns (different_pixel_count, percentage_different).
    Saves a diff image highlighting differences.
    """
    img1 = Image.open(img1_path).convert('RGB')
    img2 = Image.open(img2_path).convert('RGB')

    if img1.size != img2.size:
        print(f"Size mismatch: {img1.size} vs {img2.size}")
        img2 = img2.resize(img1.size, Image.Resampling.LANCZOS)

    arr1 = np.array(img1)
    arr2 = np.array(img2)

    diff = np.abs(arr1.astype(int) - arr2.astype(int))

    threshold = 5
    diff_mask = np.any(diff > threshold, axis=2)
    different_pixels = np.sum(diff_mask)
    total_pixels = diff_mask.size
    percentage = (different_pixels / total_pixels) * 100

    # Create diff image (red highlights differences)
    diff_img = np.zeros_like(arr1)
    diff_img[diff_mask] = [255, 0, 0]
    diff_img[~diff_mask] = arr1[~diff_mask] // 2

    Image.fromarray(diff_img.astype(np.uint8)).save(diff_path)

    return different_pixels, percentage


def test_tiled_version():
    """Test the tiled background version against reference."""

    if not HTML_FILE.exists():
        raise AssertionError(f"index_tiled.html not found at {HTML_FILE}")

    server = start_server()

    try:
        with sync_playwright() as p:
            browser = p.chromium.launch(headless=True)
            page = browser.new_page()

            page.set_viewport_size({"width": EXPECTED_WIDTH, "height": EXPECTED_HEIGHT})

            page.goto(f"http://localhost:{PORT}/index_tiled.html")
            page.wait_for_load_state("networkidle")

            page.screenshot(path=str(TEST_SCREENSHOT))
            print(f"Screenshot saved to {TEST_SCREENSHOT}")

            browser.close()

        diff_pixels, diff_percentage = calculate_pixel_difference(
            REFERENCE_SCREENSHOT, TEST_SCREENSHOT, DIFF_SCREENSHOT
        )

        print(f"Different pixels: {diff_pixels:,} ({diff_percentage:.2f}%)")
        print(f"Diff image saved to {DIFF_SCREENSHOT}")

        return diff_pixels, diff_percentage

    finally:
        server.shutdown()


if __name__ == "__main__":
    diff_pixels, diff_pct = test_tiled_version()
    if diff_pct < 0.1:
        print("SUCCESS: Page matches reference screenshot!")
    else:
        print(f"Page differs by {diff_pct:.2f}% - continuing to optimize...")