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

/**
 * E2E Tests for Chat Page Navigation
 * Tests basic page loading and navigation for the chat feature
 *
 * Prerequisites: Web server running on http://127.0.0.1:5000
 */

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;

// Timeouts adjusted for CI environment
const TIMEOUTS = {
    navigation: isCI ? 60000 : 30000,
    selector: isCI ? 30000 : 10000,
    element: isCI ? 10000 : 5000,
};

async function testChatPageNavigation() {
    console.log(`🧪 Running chat page navigation test (CI mode: ${isCI})`);

    // Create screenshots directory if it doesn't exist
    const screenshotsDir = path.join(__dirname, '..', 'screenshots');
    if (!fs.existsSync(screenshotsDir)) {
        fs.mkdirSync(screenshotsDir, { recursive: true });
    }

    const browser = await puppeteer.launch(getPuppeteerLaunchOptions());
    const page = await browser.newPage();

    // Set viewport
    await page.setViewport({ width: 1280, height: 800 });

    // Set timeouts
    if (isCI) {
        page.setDefaultTimeout(60000);
        page.setDefaultNavigationTimeout(60000);
    }

    // Enable console logging for debugging
    page.on('console', msg => {
        if (msg.type() === 'error') {
            console.log(`BROWSER ERROR: ${msg.text()}`);
        }
    });

    page.on('pageerror', error => {
        console.log('PAGE ERROR:', error.message);
    });

    const authHelper = new AuthHelper(page, BASE_URL);

    let testsPassed = 0;
    let testsFailed = 0;

    try {
        // Ensure we're logged in
        console.log('🔐 Ensuring authentication...');
        await authHelper.ensureAuthenticated();
        console.log('✅ Authentication verified\n');

        // Test 1: Chat page loads successfully
        console.log('📋 Test 1: Chat page loads successfully');
        try {
            await page.goto(`${BASE_URL}/chat/`, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation
            });

            const chatContainer = await page.waitForSelector('.ldr-chat-container', {
                timeout: TIMEOUTS.selector
            });

            if (!chatContainer) {
                throw new Error('Chat container not found');
            }

            const currentUrl = page.url();
            if (!currentUrl.includes('/chat')) {
                throw new Error(`Expected URL to contain /chat, got: ${currentUrl}`);
            }

            console.log('✅ Test 1 PASSED: Chat page loaded successfully\n');
            testsPassed++;
        } catch (error) {
            console.log(`❌ Test 1 FAILED: ${error.message}\n`);
            await page.screenshot({ path: path.join(screenshotsDir, 'chat_page_load_failed.png') });
            testsFailed++;
        }

        // Test 2: Chat page has input area
        console.log('📋 Test 2: Chat page has input area');
        try {
            await page.goto(`${BASE_URL}/chat/`, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation
            });

            await page.waitForSelector('.ldr-chat-container', {
                timeout: TIMEOUTS.selector
            });

            // Look for input field for sending messages
            const inputSelectors = [
                'textarea.chat-input',
                'input.chat-input',
                '#chat-input',
                '[data-testid="chat-input"]',
                '.ldr-chat-input textarea',
                '.ldr-chat-input input',
                '.ldr-chat-container textarea',
                '.ldr-chat-container input[type="text"]'
            ];

            let inputFound = false;
            for (const selector of inputSelectors) {
                const input = await page.$(selector);
                if (input) {
                    inputFound = true;
                    console.log(`   Found input with selector: ${selector}`);
                    break;
                }
            }

            if (!inputFound) {
                throw new Error('No chat input field found');
            }

            console.log('✅ Test 2 PASSED: Chat input area found\n');
            testsPassed++;
        } catch (error) {
            console.log(`❌ Test 2 FAILED: ${error.message}\n`);
            await page.screenshot({ path: path.join(screenshotsDir, 'chat_input_not_found.png') });
            testsFailed++;
        }

        // Test 3: Chat page has send button or submit mechanism
        console.log('📋 Test 3: Chat page has send button');
        try {
            await page.goto(`${BASE_URL}/chat/`, {
                waitUntil: 'domcontentloaded',
                timeout: TIMEOUTS.navigation
            });

            await page.waitForSelector('.ldr-chat-container', {
                timeout: TIMEOUTS.selector
            });

            // Look for send button
            const buttonSelectors = [
                'button.chat-send',
                '#chat-send-btn',
                '[data-testid="chat-send"]',
                '.ldr-chat-send',
                'button[type="submit"]',
                '.ldr-chat-container button'
            ];

            let buttonFound = false;
            for (const selector of buttonSelectors) {
                const button = await page.$(selector);
                if (button) {
                    buttonFound = true;
                    console.log(`   Found button with selector: ${selector}`);
                    break;
                }
            }

            if (!buttonFound) {
                throw new Error('No send button found');
            }

            console.log('✅ Test 3 PASSED: Send button found\n');
            testsPassed++;
        } catch (error) {
            console.log(`❌ Test 3 FAILED: ${error.message}\n`);
            await page.screenshot({ path: path.join(screenshotsDir, 'chat_button_not_found.png') });
            testsFailed++;
        }

    } catch (error) {
        console.log(`💥 Test suite error: ${error.message}`);
        testsFailed++;
    } finally {
        await browser.close();
    }

    // Print summary
    console.log('─'.repeat(50));
    console.log(`📊 Chat Page Navigation Tests Summary`);
    console.log(`   ✅ Passed: ${testsPassed}`);
    console.log(`   ❌ Failed: ${testsFailed}`);
    console.log('─'.repeat(50));

    if (testsFailed > 0) {
        process.exit(1);
    }
}

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