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

/**
 * E2E Tests for Chat Mode `?q=` URL Auto-Send
 *
 * The init code at chat.js reads `?q=` from the URL and
 * auto-sends the message after the session has been created. This is
 * the integration seam used by research.js, which redirects to
 *
 *     /chat/<session_id>?q=<query>
 *
 * after the home page creates a fresh chat session. Note: the
 * `sessionId` guard on chat.js means `?q=` is only consumed when
 * the URL also includes a session id in its path (which is how the
 * production redirect builds it) — visiting bare `/chat/?q=...`
 * without a session id is a no-op for new users.
 *
 * Contract verified here:
 *   - Visiting /chat/<session_id>?q=<query> auto-sends the query
 *   - The query appears as a user message bubble
 *   - The URL is cleaned via replaceState (?q= is removed)
 *   - Empty ?q= is a no-op
 *
 * No LLM required — we stop at the user-side bubble.
 *
 * 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_qparam_${name}_${Date.now()}.png`);
    try {
        await page.screenshot({ path: file, fullPage: true });
    } catch (_) {}
}

// Create a chat session via API and return its id. Mirrors the
// production redirect path from research.js.
async function createSessionViaApi(page) {
    await page.goto(`${BASE_URL}/chat/`, {
        waitUntil: 'domcontentloaded',
        timeout: TIMEOUTS.navigation,
    });
    await page.waitForSelector('.ldr-chat-container', { timeout: TIMEOUTS.selector });
    const token = await page.evaluate(() => {
        const m = document.querySelector('meta[name="csrf-token"]');
        return m ? m.content : '';
    });
    const result = await page.evaluate(
        async (csrf) => {
            const r = await fetch('/api/chat/sessions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrf,
                },
                body: JSON.stringify({ initial_query: 'qparam-test session' }),
            });
            const data = await r.json().catch(() => ({}));
            return { ok: r.ok, status: r.status, data };
        },
        token
    );
    if (!result.ok || !result.data.success || !result.data.session_id) {
        throw new Error(
            `Session creation failed: status=${result.status} body=${JSON.stringify(result.data)}`
        );
    }
    return result.data.session_id;
}

async function run() {
    console.log(`Running chat ?q= URL param 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: ?q= triggers auto-send and the query appears in the chat
        console.log('Test 1: /chat/<session>/?q=<query> auto-sends the query');
        try {
            const sessionId = await createSessionViaApi(page);
            const probe = `qparam probe ${Date.now()}`;
            const target = `${BASE_URL}/chat/${sessionId}?q=${encodeURIComponent(probe)}`;
            await page.goto(target, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation,
            });
            await page.waitForSelector('.ldr-chat-container', {
                timeout: TIMEOUTS.selector,
            });

            // Wait for the user bubble with our probe
            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
            );

            // Welcome should have disappeared
            const welcomeHidden = await page.$eval('#chat-welcome', (el) => {
                return !el || getComputedStyle(el).display === 'none';
            });
            if (!welcomeHidden) throw new Error('Welcome screen still visible');

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

        // Test 2: URL is cleaned — ?q= removed via replaceState (chat.js)
        console.log('Test 2: ?q= is stripped from URL after auto-send');
        try {
            const sessionId = await createSessionViaApi(page);
            const probe = `qparam clean probe ${Date.now()}`;
            const target = `${BASE_URL}/chat/${sessionId}?q=${encodeURIComponent(probe)}`;
            await page.goto(target, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation,
            });
            // The replaceState fires synchronously in the init handler.
            await page.waitForFunction(
                () => !window.location.search.includes('q='),
                { timeout: TIMEOUTS.selector }
            );
            const url = page.url();
            if (url.includes('q=')) throw new Error(`URL still has q=: ${url}`);
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'cleaned');
            failed++;
        }

        // Test 3: Empty ?q= does NOT trigger a send — the guard at
        //         chat.js is `if (initialQuery && sessionId && !isProcessing)`.
        //         An empty string is falsy so handleSend should not fire.
        console.log('Test 3: Empty ?q= leaves chat state unchanged');
        try {
            const sessionId = await createSessionViaApi(page);
            await page.goto(`${BASE_URL}/chat/${sessionId}?q=`, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation,
            });
            await page.waitForSelector('.ldr-chat-container', {
                timeout: TIMEOUTS.selector,
            });
            // Wait for the network to settle. The chat init runs on
            // load and may fetch session/messages; once those quiet
            // down, any spurious POST that an empty ?q= MIGHT have
            // triggered would also have fired. Deterministic substitute
            // for a wall-clock setTimeout.
            await page
                .waitForNetworkIdle({ idleTime: 500, timeout: TIMEOUTS.element })
                .catch(() => {});

            // A fresh session with empty ?q= should have zero user bubbles
            // (the session was just created via API and has no messages).
            const userBubbleCount = await page.$$eval(
                '.ldr-chat-message-user .ldr-chat-message-text',
                (els) => els.length
            );
            if (userBubbleCount !== 0) {
                throw new Error(`Expected 0 user bubbles, got ${userBubbleCount}`);
            }
            console.log('PASSED');
            passed++;
        } catch (e) {
            console.log(`FAILED: ${e.message}`);
            await snap(page, 'empty_q');
            failed++;
        }
    } catch (e) {
        console.log(`Test suite error: ${e.message}`);
        failed++;
    } finally {
        await browser.close();
    }

    console.log('-'.repeat(50));
    console.log(`Chat ?q= URL 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);
});