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

/**
 * E2E Tests for Chat Mode Keyboard + Input Behavior
 *
 * Covers the keyboard contract documented in chat.html lines 102-108:
 *   - Enter alone submits the message (handled in chat.js)
 *   - Shift+Enter inserts a newline (no submission)
 * Plus input-state behavior:
 *   - Send button disabled when input is empty or whitespace-only
 *     (chat.js)
 *   - Textarea auto-resize on input (chat.js)
 *
 * No LLM required: assertions stop at "did the send fire?" by observing
 * the welcome screen disappearing and a user message bubble appearing.
 *
 * 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,
    element: isCI ? 10000 : 5000,
};

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_keyboard_${name}_${Date.now()}.png`);
    try {
        await page.screenshot({ path: file, fullPage: true });
    } catch (_) {}
}

async function gotoChat(page) {
    await page.goto(`${BASE_URL}/chat/`, {
        waitUntil: 'domcontentloaded',
        timeout: TIMEOUTS.navigation,
    });
    await page.waitForSelector('.ldr-chat-container', { timeout: TIMEOUTS.selector });
    await page.waitForSelector('#chat-input', { timeout: TIMEOUTS.selector });
    await page.waitForSelector('#send-btn', { timeout: TIMEOUTS.selector });
    // chat.js wires input/keyboard listeners synchronously in init() and
    // exposes data-init-complete once init() (including the async
    // restore of the most-recent session) has fully settled. Wait for
    // that, then force a clean New Chat state: a bare /chat/ visit
    // auto-resumes the last session, which would hide the welcome screen
    // these tests assert on and could leave send disabled via a restored
    // in-progress research. Starting fresh makes the suite deterministic
    // regardless of what earlier tests (or a CI retry) left behind.
    await page.waitForSelector('#chat-input[data-init-complete="true"]', { timeout: TIMEOUTS.selector });
    await page.evaluate(() => window.chatComponent.startNewChat());
    await page.waitForFunction(
        () => {
            const el = document.getElementById('chat-welcome');
            return el && getComputedStyle(el).display !== 'none';
        },
        { timeout: TIMEOUTS.selector }
    );
}

async function run() {
    console.log(`Running chat keyboard/input 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();

        // Test 1: Send button disabled when input empty
        console.log('Test 1: Send button disabled when input empty');
        try {
            await gotoChat(page);
            const disabled = await page.$eval('#send-btn', (b) => b.disabled);
            if (!disabled) throw new Error('Send button should be disabled with empty input');
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'send_btn_empty');
            failed++;
        }

        // Test 2: Send button enabled after typing
        console.log('Test 2: Send button enables when input has text');
        try {
            await gotoChat(page);
            await page.click('#chat-input');
            await page.type('#chat-input', 'Hello there');
            // chat.js wires the input listener to flip disabled
            const disabled = await page.$eval('#send-btn', (b) => b.disabled);
            if (disabled) throw new Error('Send button should be enabled after typing');
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'send_btn_typed');
            failed++;
        }

        // Test 3: Whitespace-only does not enable send (handleSend trims at chat.js)
        // The button's `input` listener already gates on .trim() — chat.js.
        console.log('Test 3: Whitespace-only input keeps send disabled');
        try {
            await gotoChat(page);
            await page.click('#chat-input');
            await page.type('#chat-input', '     ');
            const disabled = await page.$eval('#send-btn', (b) => b.disabled);
            if (!disabled) throw new Error('Send button should stay disabled for whitespace');
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'send_btn_whitespace');
            failed++;
        }

        // Test 4: Shift+Enter inserts a newline, does NOT submit
        console.log('Test 4: Shift+Enter inserts newline without submitting');
        try {
            await gotoChat(page);
            await page.click('#chat-input');
            await page.type('#chat-input', 'line one');
            await page.keyboard.down('Shift');
            await page.keyboard.press('Enter');
            await page.keyboard.up('Shift');
            await page.type('#chat-input', 'line two');

            const value = await page.$eval('#chat-input', (t) => t.value);
            if (!value.includes('\n')) {
                throw new Error(`Expected newline in textarea, got: ${JSON.stringify(value)}`);
            }
            if (!value.includes('line one') || !value.includes('line two')) {
                throw new Error(`Both lines expected; got: ${JSON.stringify(value)}`);
            }

            // The welcome screen should still be visible (no submit happened)
            const welcomeVisible = await page.$eval(
                '#chat-welcome',
                (el) => getComputedStyle(el).display !== 'none'
            );
            if (!welcomeVisible) {
                throw new Error('Welcome screen disappeared — submission fired on Shift+Enter');
            }

            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'shift_enter');
            failed++;
        }

        // Test 5: Enter alone submits (welcome hidden + user bubble appears)
        console.log('Test 5: Enter alone submits the message');
        try {
            await gotoChat(page);
            await page.click('#chat-input');
            const probe = 'Keyboard submit probe ' + Date.now();
            await page.type('#chat-input', probe);
            await page.keyboard.press('Enter');

            // Wait for the welcome screen to be hidden (hideWelcomeScreen, chat.js)
            await page.waitForFunction(
                () => {
                    const el = document.getElementById('chat-welcome');
                    return !el || getComputedStyle(el).display === 'none';
                },
                { timeout: TIMEOUTS.selector }
            );

            // Wait for a user message bubble containing the probe text
            await page.waitForFunction(
                (needle) => {
                    const nodes = document.querySelectorAll(
                        '.ldr-chat-message-user .ldr-chat-message-text'
                    );
                    return Array.from(nodes).some((n) =>
                        (n.textContent || '').includes(needle)
                    );
                },
                { timeout: TIMEOUTS.selector },
                probe
            );

            // Input should be cleared (chat.js)
            const cleared = await page.$eval('#chat-input', (t) => t.value === '');
            if (!cleared) throw new Error('Input not cleared after Enter submit');

            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'enter_submit');
            failed++;
        }

        // Test 6: Textarea grows on input (auto-resize at chat.js)
        console.log('Test 6: Textarea auto-resizes with multi-line input');
        try {
            await gotoChat(page);
            await page.click('#chat-input');
            const initialH = await page.$eval(
                '#chat-input',
                (t) => t.getBoundingClientRect().height
            );
            // Type multiple newlines via Shift+Enter
            for (let i = 0; i < 5; i++) {
                await page.type('#chat-input', `line ${i}`);
                await page.keyboard.down('Shift');
                await page.keyboard.press('Enter');
                await page.keyboard.up('Shift');
            }
            const grownH = await page.$eval(
                '#chat-input',
                (t) => t.getBoundingClientRect().height
            );
            if (!(grownH > initialH)) {
                throw new Error(
                    `Textarea did not grow: initial=${initialH}, after=${grownH}`
                );
            }
            console.log(`PASSED (grew ${initialH} -> ${grownH})`);
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'autoresize');
            failed++;
        }
    } catch (e) {
        console.log(`Test suite error: ${e.message}`);
        failed++;
    } finally {
        await browser.close();
    }

    console.log('-'.repeat(50));
    console.log(`Chat Keyboard/Input 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);
});