chore: import upstream snapshot with attribution

tests/ui_tests/test_settings_validation.js

@@ -0,0 +1,232 @@
+/**
+ * Settings Form Validation Test
+ * Tests that settings form inputs validate correctly
+ * CI-compatible: Works in both local and CI environments
+ */
+
+const puppeteer = require('puppeteer');
+const AuthHelper = require('./auth_helper');
+const { Timer, CI_TEST_USER } = require('./auth_helper');
+const { getPuppeteerLaunchOptions } = require('./puppeteer_config');
+const fs = require('fs');
+const path = require('path');
+
+// NAVIGATION NOTE: Using 'domcontentloaded' instead of 'networkidle2' for page.goto()
+// because networkidle2 waits for no network activity for 500ms, but WebSocket
+// connections and background polling keep the network active, causing infinite hangs.
+// See: test_login_validation.js and auth_helper.js for detailed explanation.
+async function testSettingsValidation() {
+    const isCI = !!process.env.CI;
+    const testTimer = new Timer('test_settings_validation');
+    console.log(`🧪 Running settings validation 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();
+    const baseUrl = 'http://127.0.0.1:5000';
+
+    // Increase default timeout in CI
+    if (isCI) {
+        page.setDefaultTimeout(60000);
+        page.setDefaultNavigationTimeout(60000);
+    }
+
+    let testsPassed = 0;
+    let testsFailed = 0;
+
+    console.log('🧪 Starting settings validation tests...\n');
+
+    try {
+        // Authenticate (CI uses pre-created user for speed)
+        console.log('📋 Setup: Authenticating...');
+        const authHelper = new AuthHelper(page, baseUrl);
+
+        try {
+            // Use ensureAuthenticated which tries CI user first, then falls back to registration
+            await authHelper.ensureAuthenticatedWithTimeout();
+            console.log('✅ Authenticated\n');
+        } catch (authError) {
+            console.log(`⚠️  Could not authenticate: ${authError.message}`);
+            console.log('❌ Cannot authenticate - skipping settings tests');
+            await browser.close();
+            testTimer.summary();
+            process.exit(1);
+        }
+
+        // Navigate to settings page
+        console.log('📄 Navigating to settings page...');
+        await page.goto(`${baseUrl}/settings/`, {
+            waitUntil: 'domcontentloaded',
+            timeout: 30000
+        });
+
+        const currentUrl = page.url();
+        if (!currentUrl.includes('/settings')) {
+            console.log(`❌ Could not access settings page, redirected to: ${currentUrl}`);
+            throw new Error('Cannot access settings page');
+        }
+        console.log('✅ Settings page loaded\n');
+
+        // Test 1: Page loads without JavaScript errors
+        console.log('📋 Test 1: Settings page loads without JS errors');
+
+        // Check for console errors
+        const consoleErrors = [];
+        page.on('console', msg => {
+            if (msg.type() === 'error') {
+                consoleErrors.push(msg.text());
+            }
+        });
+
+        // Wait a moment for any delayed JS to run
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        if (consoleErrors.length === 0) {
+            console.log('✅ No JavaScript console errors detected');
+            testsPassed++;
+        } else {
+            console.log(`⚠️  ${consoleErrors.length} console error(s) detected:`);
+            consoleErrors.slice(0, 3).forEach(err => console.log(`   - ${err.substring(0, 80)}`));
+            // Don't fail - some console errors might be acceptable
+        }
+
+        // Test 2: Check for number inputs with validation
+        console.log('\n📋 Test 2: Number inputs have min/max attributes');
+
+        const numberInputs = await page.$$('input[type="number"]');
+        console.log(`   Found ${numberInputs.length} number inputs`);
+
+        let inputsWithValidation = 0;
+        for (const input of numberInputs.slice(0, 5)) { // Check first 5
+            const attrs = await page.evaluate(el => ({
+                name: el.name || el.id,
+                min: el.min,
+                max: el.max,
+                step: el.step
+            }), input);
+
+            if (attrs.min || attrs.max) {
+                inputsWithValidation++;
+                console.log(`   ✓ "${attrs.name}" has min=${attrs.min} max=${attrs.max}`);
+            }
+        }
+
+        if (inputsWithValidation > 0 || numberInputs.length === 0) {
+            console.log('✅ Number inputs have validation attributes');
+            testsPassed++;
+        } else {
+            console.log('⚠️  Number inputs may lack validation attributes');
+        }
+
+        // Test 3: Settings form exists and has inputs
+        console.log('\n📋 Test 3: Settings form structure');
+
+        const formInputs = await page.$$('input, select, textarea');
+        console.log(`   Found ${formInputs.length} form inputs`);
+
+        if (formInputs.length > 0) {
+            console.log('✅ Settings page has form inputs');
+            testsPassed++;
+        } else {
+            console.log('❌ Settings page has no form inputs');
+            testsFailed++;
+        }
+
+        // Test 4: Check for checkboxes and toggles
+        console.log('\n📋 Test 4: Checkbox/toggle inputs');
+
+        const checkboxInputs = await page.$$('input[type="checkbox"]');
+        console.log(`   Found ${checkboxInputs.length} checkbox inputs`);
+
+        if (checkboxInputs.length > 0) {
+            // Try to toggle a checkbox
+            try {
+                const firstCheckbox = checkboxInputs[0];
+                const initialState = await page.evaluate(el => el.checked, firstCheckbox);
+                await firstCheckbox.click();
+                await new Promise(resolve => setTimeout(resolve, 500));
+                const newState = await page.evaluate(el => el.checked, firstCheckbox);
+
+                if (initialState !== newState) {
+                    console.log('✅ Checkboxes are interactive');
+                    testsPassed++;
+                } else {
+                    console.log('⚠️  Checkbox click did not change state');
+                }
+
+                // Toggle back
+                await firstCheckbox.click();
+            } catch (e) {
+                console.log(`⚠️  Could not test checkbox interaction: ${e.message}`);
+            }
+        } else {
+            console.log('⚠️  No checkboxes found');
+        }
+
+        // Test 5: No error alerts on page load
+        console.log('\n📋 Test 5: No error alerts on page load');
+
+        const errorAlerts = await page.$$('.alert-danger, .error-message, .alert-error');
+        if (errorAlerts.length === 0) {
+            console.log('✅ No error alerts on settings page');
+            testsPassed++;
+        } else {
+            console.log(`⚠️  Found ${errorAlerts.length} error alert(s) on page`);
+            for (const alert of errorAlerts.slice(0, 2)) {
+                const text = await page.evaluate(el => el.textContent, alert);
+                console.log(`   - ${text.trim().substring(0, 60)}`);
+            }
+        }
+
+        // Take a screenshot of the settings page (skip in CI)
+        if (!isCI) {
+            await page.screenshot({
+                path: path.join(screenshotsDir, 'settings_validation_test.png'),
+                fullPage: true
+            });
+            console.log('\n📸 Screenshot saved to screenshots/settings_validation_test.png');
+        }
+
+        // Summary
+        console.log('\n' + '='.repeat(50));
+        console.log(`📊 Test Summary: ${testsPassed} passed, ${testsFailed} failed`);
+        console.log('='.repeat(50));
+
+        if (testsFailed > 0) {
+            throw new Error(`${testsFailed} test(s) failed`);
+        }
+
+        console.log('\n🎉 All settings validation tests passed!');
+
+    } catch (error) {
+        console.error('\n❌ Test failed:', error.message);
+
+        // Take error screenshot (skip in CI)
+        if (!isCI) {
+            try {
+                await page.screenshot({
+                    path: path.join(screenshotsDir, 'settings_validation_error.png'),
+                    fullPage: true
+                });
+                console.log('📸 Error screenshot saved');
+            } catch (screenshotError) {
+                console.log('⚠️  Could not take error screenshot:', screenshotError.message);
+            }
+        }
+
+        await browser.close();
+        testTimer.summary();
+        process.exit(1);
+    }
+
+    await browser.close();
+    testTimer.summary();
+    console.log('\n✅ Test completed successfully');
+}
+
+// Run the test
+testSettingsValidation().catch(console.error);