chore: import upstream snapshot with attribution

tests/ui_tests/test_api_key_enter_save.js

@@ -0,0 +1,267 @@
+const puppeteer = require('puppeteer');
+const AuthHelper = require('./auth_helper');
+const { getPuppeteerLaunchOptions } = require('./puppeteer_config');
+
+// Color codes for terminal output
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m'
+};
+
+function log(message, type = 'info') {
+    const timestamp = new Date().toISOString();
+    const prefix = {
+        info: `${colors.blue}ℹ`,
+        success: `${colors.green}✓`,
+        error: `${colors.red}ERROR:`,
+        warn: `${colors.yellow}⚠`
+    }[type] || '';
+
+    console.log(`${prefix}[${timestamp}] ${message}${colors.reset}`);
+}
+
+(async () => {
+    let browser;
+    let authHelper;
+
+    try {
+        // Test configuration
+        const TEST_API_KEY_1 = 'enter-save-test-key-12345';
+        const TEST_API_KEY_2 = 'enter-save-changed-67890';
+        const BASE_URL = 'http://localhost:5000';
+
+        log(`${colors.bright}=== Testing API Key Save with Enter Key ===${colors.reset}`, 'info');
+
+        // Launch browser
+    browser = await puppeteer.launch(getPuppeteerLaunchOptions());
+
+        log('Browser launched in visible mode', 'success');
+
+        const page = await browser.newPage();
+        await page.setViewport({ width: 1920, height: 1080 });
+
+        // Log browser console errors
+        page.on('console', msg => {
+            if (msg.type() === 'error') {
+                log(`Browser console: ${msg.text()}`, 'error');
+            }
+        });
+
+        // Listen for page dialogs (alerts, confirms)
+        page.on('dialog', async dialog => {
+            log(`Dialog appeared: ${dialog.message()}`, 'warn');
+            await dialog.accept();
+        });
+
+        // Initialize auth helper
+        authHelper = new AuthHelper(page);
+
+        // Create test user
+        const timestamp = Date.now();
+        const testUsername = `enter_test_${timestamp}`;
+        const testPassword = 'testpass123';
+
+        log(`Creating user: ${testUsername}`, 'info');
+
+        // Register and login
+        await authHelper.register(testUsername, testPassword);
+        const isAuthenticated = await authHelper.isLoggedIn();
+        if (!isAuthenticated) {
+            throw new Error('Failed to authenticate after registration');
+        }
+        log('User authenticated successfully', 'success');
+
+        // Navigate to settings page
+        log('Navigating to settings page...', 'info');
+        await page.goto(`${BASE_URL}/settings`, { waitUntil: 'domcontentloaded' });
+
+        // Wait a bit for page to fully load
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        // Take initial screenshot
+        await page.screenshot({
+            path: `/tmp/enter_key_test_initial_${timestamp}.png`,
+            fullPage: false
+        });
+        log('Screenshot saved: Initial settings page', 'info');
+
+        // Find the API key input field
+        log('Looking for OpenAI Endpoint API key field...', 'info');
+
+        const apiKeySelectors = [
+            'input[name="llm.openai_endpoint.api_key"]',
+            'input[id="llm.openai_endpoint.api_key"]',
+            'input[data-setting="llm.openai_endpoint.api_key"]',
+            '#llm\\.openai_endpoint\\.api_key'
+        ];
+
+        let apiKeyInput = null;
+        for (const selector of apiKeySelectors) {
+            try {
+                apiKeyInput = await page.$(selector);
+                if (apiKeyInput) {
+                    log(`Found API key input with selector: ${selector}`, 'success');
+                    break;
+                }
+            } catch {
+                // Continue with next selector
+            }
+        }
+
+        if (!apiKeyInput) {
+            throw new Error('Could not find OpenAI Endpoint API key input field');
+        }
+
+        // Scroll the input into view
+        await apiKeyInput.evaluate(el => el.scrollIntoView({ behavior: 'smooth', block: 'center' }));
+        await new Promise(resolve => setTimeout(resolve, 500));
+
+        // Clear any existing value and type the first API key
+        log(`Clearing field and typing API key: ${TEST_API_KEY_1}`, 'info');
+        await apiKeyInput.click({ clickCount: 3 });
+        await page.keyboard.press('Backspace');
+        await apiKeyInput.type(TEST_API_KEY_1);
+
+        // Take screenshot before pressing Enter
+        await page.screenshot({
+            path: `/tmp/enter_key_test_before_enter_${timestamp}.png`,
+            fullPage: false
+        });
+        log('Screenshot saved: Before pressing Enter', 'info');
+
+        // Press Enter to save
+        log('Pressing Enter to save...', 'info');
+        await page.keyboard.press('Enter');
+
+        // Wait for any save operation to complete
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        // Take screenshot after Enter
+        await page.screenshot({
+            path: `/tmp/enter_key_test_after_enter_${timestamp}.png`,
+            fullPage: false
+        });
+        log('Screenshot saved: After pressing Enter', 'info');
+
+        // Check for any success messages or indicators
+        const successIndicators = [
+            '.alert-success',
+            '.success-message',
+            '[class*="success"]',
+            '.saved-indicator',
+            '.toast-success'
+        ];
+
+        let successFound = false;
+        for (const selector of successIndicators) {
+            const element = await page.$(selector);
+            if (element) {
+                const text = await element.evaluate(el => el.textContent);
+                log(`Success indicator found: ${text}`, 'success');
+                successFound = true;
+                break;
+            }
+        }
+
+        // Check if the value persisted by reloading
+        log('Reloading page to check persistence...', 'info');
+        await page.reload({ waitUntil: 'domcontentloaded' });
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        // Find the input again
+        apiKeyInput = null;
+        for (const selector of apiKeySelectors) {
+            apiKeyInput = await page.$(selector);
+            if (apiKeyInput) break;
+        }
+
+        if (apiKeyInput) {
+            const currentValue = await apiKeyInput.evaluate(el => el.value);
+            log(`Value after reload: ${currentValue ? '***' + currentValue.slice(-5) : 'empty'}`, 'info');
+
+            // Now try the second API key
+            log(`Trying second API key: ${TEST_API_KEY_2}`, 'info');
+            await apiKeyInput.click({ clickCount: 3 });
+            await page.keyboard.press('Backspace');
+            await apiKeyInput.type(TEST_API_KEY_2);
+
+            // Try different save methods
+            log('Testing different save triggers...', 'info');
+
+            // Method 1: Press Enter
+            log('Method 1: Pressing Enter', 'info');
+            await page.keyboard.press('Enter');
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            // Method 2: Tab away (blur event)
+            log('Method 2: Tabbing away from field', 'info');
+            await page.keyboard.press('Tab');
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            // Method 3: Click elsewhere
+            log('Method 3: Clicking elsewhere on page', 'info');
+            await page.click('body');
+            await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+
+        // Check if there's a form around the input
+        const formInfo = await page.evaluate(() => {
+            const input = document.querySelector('input[name="llm.openai_endpoint.api_key"]');
+            if (!input) return null;
+
+            const form = input.closest('form');
+            return {
+                hasForm: !!form,
+                formAction: form?.action,
+                formMethod: form?.method,
+                inputType: input.type,
+                hasOnChange: !!input.onchange,
+                hasOnKeyPress: !!input.onkeypress,
+                dataAttributes: Object.keys(input.dataset || {})
+            };
+        });
+
+        log(`Form analysis: ${JSON.stringify(formInfo, null, 2)}`, 'info');
+
+        // Final screenshot
+        await page.screenshot({
+            path: `/tmp/enter_key_test_final_${timestamp}.png`,
+            fullPage: false
+        });
+        log('Screenshot saved: Final state', 'info');
+
+        log('Test completed - check screenshots to see results', 'success');
+        log('Note: Browser is left open for manual inspection', 'info');
+
+        // Keep browser open for manual inspection
+        log('Browser will remain open for 30 seconds...', 'info');
+        await new Promise(resolve => setTimeout(resolve, 30000));
+
+    } catch (error) {
+        log(`Test failed: ${error.message}`, 'error');
+        console.error(error);
+
+        // Take error screenshot
+        if (browser) {
+            const page = (await browser.pages())[0];
+            if (page) {
+                await page.screenshot({
+                    path: `/tmp/enter_key_test_error_${Date.now()}.png`,
+                    fullPage: false
+                });
+                log('Error screenshot saved', 'info');
+            }
+        }
+
+        process.exit(1);
+    } finally {
+        if (browser) {
+            await browser.close();
+            log('Browser closed', 'success');
+        }
+    }
+})();