learningcircuit--local-deep-research/tests/ui_tests/chat/test_chat_aria_live.js

/**
 * E2E Test for Chat Mode Screen-Reader (ARIA Live Region) Attributes
 *
 * The chat page has two live regions so screen-reader users
 * are notified of new content:
 *   - `.ldr-chat-messages` gets role="log" + aria-live="polite" so new
 *     message bubbles are announced as they appear.
 *   - `#chat-progress-wrapper` gets role="status" + aria-live="polite"
 *     so the "Current Task" updates during research are announced.
 *
 * This test verifies the attributes are present and well-formed. It
 * does not exercise an actual screen reader.
 *
 * Prerequisites: Web server on http://127.0.0.1:5000 (override BASE_URL).
 */

const puppeteer = require('puppeteer');
const AuthHelper = require('../auth_helper');
const { getPuppeteerLaunchOptions } = require('../puppeteer_config');
const fs = require('fs');
const path = require('path');

const BASE_URL = process.env.BASE_URL || 'http://127.0.0.1:5000';
const isCI = !!process.env.CI;

const TIMEOUTS = {
    navigation: isCI ? 60000 : 30000,
    selector: isCI ? 30000 : 10000,
};

const SCREENSHOTS_DIR = path.join(__dirname, '..', 'screenshots');

async function snap(page, name) {
    if (!fs.existsSync(SCREENSHOTS_DIR)) {
        fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
    }
    const file = path.join(
        SCREENSHOTS_DIR,
        `chat_aria_${name}_${Date.now()}.png`
    );
    try {
        await page.screenshot({ path: file, fullPage: true });
    } catch (_) {}
}

async function run() {
    console.log(`Running chat ARIA-live tests (CI mode: ${isCI})`);

    const browser = await puppeteer.launch(getPuppeteerLaunchOptions());
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });
    if (isCI) {
        page.setDefaultTimeout(60000);
        page.setDefaultNavigationTimeout(60000);
    }

    page.on('pageerror', (e) => console.log('PAGE ERROR:', e.message));
    page.on('console', (m) => {
        if (m.type() === 'error') console.log('BROWSER ERROR:', m.text());
    });

    const auth = new AuthHelper(page, BASE_URL);

    let passed = 0;
    let failed = 0;

    try {
        await auth.ensureAuthenticated();
        await page.goto(`${BASE_URL}/chat/`, {
            waitUntil: 'domcontentloaded',
            timeout: TIMEOUTS.navigation,
        });
        await page.waitForSelector('.ldr-chat-container', { timeout: TIMEOUTS.selector });

        // Test 1: chat-messages container has role="log" + aria-live="polite"
        console.log('Test 1: messages container has role=log + aria-live=polite');
        try {
            const attrs = await page.$eval('#chat-messages', (el) => ({
                role: el.getAttribute('role'),
                ariaLive: el.getAttribute('aria-live'),
                ariaAtomic: el.getAttribute('aria-atomic'),
                ariaLabel: el.getAttribute('aria-label'),
            }));
            if (attrs.role !== 'log')
                throw new Error(`role=log expected, got ${attrs.role}`);
            if (attrs.ariaLive !== 'polite')
                throw new Error(`aria-live=polite expected, got ${attrs.ariaLive}`);
            // aria-atomic and aria-label are nice-to-have; if present they
            // should be sensible.
            if (attrs.ariaAtomic && attrs.ariaAtomic !== 'false')
                throw new Error(`aria-atomic should be false when present, got ${attrs.ariaAtomic}`);
            if (attrs.ariaLabel === '') throw new Error('aria-label, if set, must not be empty');
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'messages_container');
            failed++;
        }

        // Test 2: progress wrapper has role=status + aria-live=polite
        console.log('Test 2: progress wrapper has role=status + aria-live=polite');
        try {
            const attrs = await page.$eval('#chat-progress-wrapper', (el) => ({
                role: el.getAttribute('role'),
                ariaLive: el.getAttribute('aria-live'),
            }));
            if (attrs.role !== 'status')
                throw new Error(`role=status expected, got ${attrs.role}`);
            if (attrs.ariaLive !== 'polite')
                throw new Error(`aria-live=polite expected, got ${attrs.ariaLive}`);
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'progress_wrapper');
            failed++;
        }

        // Test 3: suggestion chips render and have an interactive
        //         focus-visible rule available in the stylesheet (we
        //         can't directly probe :focus-visible computed style on
        //         a non-focused element, but we can confirm the rule
        //         exists by reading document.styleSheets).
        console.log('Test 3: suggestion-chip focus-visible rule present');
        try {
            const hasRule = await page.evaluate(() => {
                for (const sheet of document.styleSheets) {
                    let rules;
                    try {
                        rules = sheet.cssRules;
                    } catch (_) {
                        continue;
                    }
                    if (!rules) continue;
                    for (const r of rules) {
                        if (
                            r.selectorText &&
                            r.selectorText.includes('.ldr-chat-suggestion:focus-visible')
                        ) {
                            return true;
                        }
                    }
                }
                return false;
            });
            if (!hasRule) {
                throw new Error(
                    'No CSS rule found matching ".ldr-chat-suggestion:focus-visible"'
                );
            }
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'focus_visible');
            failed++;
        }
    } catch (e) {
        console.log(`Test suite error: ${e.message}`);
        failed++;
    } finally {
        await browser.close();
    }

    console.log('-'.repeat(50));
    console.log(`Chat ARIA-Live Tests — passed: ${passed}, failed: ${failed}`);
    console.log('-'.repeat(50));
    if (failed > 0) process.exit(1);
}

run().catch((e) => {
    console.error('Test runner error:', e);
    process.exit(1);
});