diff --git a/tests/mjs/71-cmd-k-api-scroll.test.mjs b/tests/mjs/71-cmd-k-api-scroll.test.mjs
new file mode 100644
index 0000000..d3bf0ac
--- /dev/null
+++ b/tests/mjs/71-cmd-k-api-scroll.test.mjs
@@ -0,0 +1,208 @@
+#!/usr/bin/env bun
+/**
+ * CMD+K API SCROLL POSITION TEST
+ * ==============================
+ * Tests the /api/cmd-k endpoint integration with ninja-keys command palette.
+ *
+ * Tests:
+ * 1. API returns valid JSON with experiences, projects, courses
+ * 2. ninja-keys receives data from API (not hardcoded)
+ * 3. Scroll navigation works for dynamic entries:
+ * - Experience items (e.g., Olympic Broadcasting)
+ * - Project items (e.g., Somos Una Ola)
+ * - Course items (e.g., Codecademy Certifications)
+ * 4. Static navigation actions still work (e.g., Skills section)
+ *
+ * Related: doc/16-CMD-K-API.md
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testCmdKScroll() {
+ console.log('🎯 CMD+K SCROLL POSITION TEST\n');
+ console.log('='.repeat(70));
+
+ const browser = await chromium.launch({ headless: process.env.HEADLESS === 'true' });
+ const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+ const errors = [];
+ const testResults = [];
+
+ page.on('console', msg => {
+ if (msg.type() === 'error') {
+ errors.push(msg.text());
+ console.log(`❌ ERROR: ${msg.text()}`);
+ }
+ });
+
+ console.log("\n1️⃣ Loading page...");
+ await page.goto(URL);
+ await page.waitForTimeout(2000);
+
+ // Helper function to check if element is in viewport
+ async function isElementInViewport(selector) {
+ return await page.evaluate((sel) => {
+ const el = document.querySelector(sel);
+ if (!el) return { found: false };
+ const rect = el.getBoundingClientRect();
+ return {
+ found: true,
+ top: rect.top,
+ inViewport: rect.top >= 0 && rect.top < window.innerHeight
+ };
+ }, selector);
+ }
+
+ // Helper function to scroll to top
+ async function scrollToTop() {
+ await page.evaluate(() => window.scrollTo(0, 0));
+ await page.waitForTimeout(300);
+ }
+
+ // Helper function to invoke ninja-keys action directly by ID
+ async function invokeNinjaKeyAction(actionId) {
+ const result = await page.evaluate((id) => {
+ const nk = document.getElementById('cmd-k-bar');
+ if (!nk || !nk.data) return { success: false, reason: 'ninja-keys not found' };
+
+ const action = nk.data.find(a => a.id === id);
+ if (!action) return { success: false, reason: `action ${id} not found` };
+
+ if (action.handler) {
+ action.handler();
+ return { success: true, actionTitle: action.title };
+ }
+ return { success: false, reason: 'no handler' };
+ }, actionId);
+
+ console.log(` [DEBUG] Action "${actionId}": ${result.success ? 'invoked ' + result.actionTitle : result.reason}`);
+ await page.waitForTimeout(1000);
+ return result.success;
+ }
+
+ // ========================================================================
+ // TEST 1: Scroll to Experience item (Olympic Broadcasting)
+ // ========================================================================
+ console.log("\n2️⃣ Testing scroll to Experience (Olympic Broadcasting)...");
+ await scrollToTop();
+
+ const expBefore = await isElementInViewport('#exp-olympic-broadcasting');
+ console.log(` Element found: ${expBefore.found}`);
+ console.log(` Before: Element top position = ${expBefore.top?.toFixed(0) || 'N/A'}`);
+
+ // API now returns exp-olympic-broadcasting as the action ID
+ await invokeNinjaKeyAction('exp-olympic-broadcasting');
+
+ const expAfter = await isElementInViewport('#exp-olympic-broadcasting');
+ console.log(` After: Element top position = ${expAfter.top?.toFixed(0) || 'N/A'}`);
+
+ const expPassed = expBefore.found && expAfter.found && expAfter.inViewport;
+ console.log(` ${expPassed ? '✅ PASS' : '❌ FAIL'} - Scrolled to Olympic Broadcasting`);
+ testResults.push({ test: 'Experience - Olympic Broadcasting', passed: expPassed });
+
+ // ========================================================================
+ // TEST 2: Scroll to Project item (Somos Una Ola)
+ // ========================================================================
+ console.log("\n3️⃣ Testing scroll to Project (Somos Una Ola)...");
+ await scrollToTop();
+
+ const projBefore = await isElementInViewport('#proj-somos-una-ola');
+ console.log(` Element found: ${projBefore.found}`);
+ console.log(` Before: Element top position = ${projBefore.top?.toFixed(0) || 'N/A'}`);
+
+ // API now returns proj-somos-una-ola as the action ID
+ await invokeNinjaKeyAction('proj-somos-una-ola');
+
+ const projAfter = await isElementInViewport('#proj-somos-una-ola');
+ console.log(` After: Element top position = ${projAfter.top?.toFixed(0) || 'N/A'}`);
+
+ const projPassed = projBefore.found && projAfter.found && projAfter.inViewport;
+ console.log(` ${projPassed ? '✅ PASS' : '❌ FAIL'} - Scrolled to Somos Una Ola`);
+ testResults.push({ test: 'Project - Somos Una Ola', passed: projPassed });
+
+ // ========================================================================
+ // TEST 3: Scroll to Course item (Codecademy)
+ // ========================================================================
+ console.log("\n4️⃣ Testing scroll to Course (Codecademy)...");
+ await scrollToTop();
+
+ const courseBefore = await isElementInViewport('#course-codecademy-certifications');
+ console.log(` Element found: ${courseBefore.found}`);
+ console.log(` Before: Element top position = ${courseBefore.top?.toFixed(0) || 'N/A'}`);
+
+ // API now returns course-codecademy-certifications as the action ID
+ await invokeNinjaKeyAction('course-codecademy-certifications');
+
+ const courseAfter = await isElementInViewport('#course-codecademy-certifications');
+ console.log(` After: Element top position = ${courseAfter.top?.toFixed(0) || 'N/A'}`);
+
+ const coursePassed = courseBefore.found && courseAfter.found && courseAfter.inViewport;
+ console.log(` ${coursePassed ? '✅ PASS' : '❌ FAIL'} - Scrolled to Codecademy Certifications`);
+ testResults.push({ test: 'Course - Codecademy', passed: coursePassed });
+
+ // ========================================================================
+ // TEST 4: Scroll to section (Skills)
+ // ========================================================================
+ console.log("\n5️⃣ Testing scroll to Section (Skills)...");
+ await scrollToTop();
+
+ const skillsBefore = await isElementInViewport('#skills');
+ console.log(` Element found: ${skillsBefore.found}`);
+ console.log(` Before: Element top position = ${skillsBefore.top?.toFixed(0) || 'N/A'}`);
+
+ await invokeNinjaKeyAction('nav-skills');
+
+ const skillsAfter = await isElementInViewport('#skills');
+ console.log(` After: Element top position = ${skillsAfter.top?.toFixed(0) || 'N/A'}`);
+
+ const skillsPassed = skillsBefore.found && skillsAfter.found && skillsAfter.inViewport;
+ console.log(` ${skillsPassed ? '✅ PASS' : '❌ FAIL'} - Scrolled to Skills section`);
+ testResults.push({ test: 'Section - Skills', passed: skillsPassed });
+
+ // ========================================================================
+ // FINAL SUMMARY
+ // ========================================================================
+ console.log("\n" + "=".repeat(70));
+ console.log("📊 TEST SUMMARY\n");
+
+ const totalTests = testResults.length;
+ const passedTests = testResults.filter(r => r.passed).length;
+ const failedTests = totalTests - passedTests;
+
+ testResults.forEach(result => {
+ console.log(` ${result.passed ? '✅' : '❌'} ${result.test}`);
+ });
+
+ console.log(`\n Total: ${passedTests}/${totalTests} tests passed`);
+
+ if (errors.length === 0) {
+ console.log("\n✅ NO CONSOLE ERRORS");
+ } else {
+ console.log(`\n❌ ${errors.length} CONSOLE ERRORS FOUND:\n`);
+ errors.forEach((err, i) => {
+ console.log(`${i + 1}. ${err}`);
+ });
+ }
+
+ console.log("=".repeat(70) + "\n");
+
+ if (failedTests === 0 && errors.length === 0) {
+ console.log("🎉 ALL CMD+K SCROLL TESTS PASSED!");
+ } else {
+ console.log("⚠️ SOME TESTS FAILED - See details above");
+ }
+
+ // Auto-close after tests if HEADLESS env is set, otherwise keep open
+ if (process.env.HEADLESS === 'true') {
+ await browser.close();
+ process.exit(failedTests === 0 ? 0 : 1);
+ } else {
+ console.log("\nBrowser will stay open for manual inspection.");
+ console.log("Press Ctrl+C when done.\n");
+ await new Promise(() => {}); // Keep browser open
+ }
+}
+
+await testCmdKScroll();
diff --git a/tests/mjs/72-cmd-k-button.test.mjs b/tests/mjs/72-cmd-k-button.test.mjs
new file mode 100644
index 0000000..02d8a2e
--- /dev/null
+++ b/tests/mjs/72-cmd-k-button.test.mjs
@@ -0,0 +1,143 @@
+#!/usr/bin/env bun
+/**
+ * CMD+K BUTTON FUNCTIONALITY TEST
+ * ================================
+ * Tests that the CMD+K button:
+ * - Has a distinct icon from zoom button
+ * - Click handler opens ninja-keys
+ * - At-bottom illumination works
+ * - Has distinct color from zoom button
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testCmdKButton() {
+ console.log('🎯 CMD+K BUTTON FUNCTIONALITY TEST\n');
+ console.log('='.repeat(70));
+
+ const browser = await chromium.launch({ headless: process.env.HEADLESS === 'true' });
+ const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+ const testResults = [];
+
+ await page.goto(URL);
+ await page.waitForTimeout(2000);
+
+ // ========================================================================
+ // TEST 1: Button exists with distinct icon
+ // ========================================================================
+ console.log('\n1️⃣ Testing button exists with distinct icon...');
+
+ const cmdKButton = await page.$('#cmd-k-button');
+ const buttonExists = cmdKButton !== null;
+ console.log(` Button exists: ${buttonExists}`);
+
+ let iconsDistinct = false;
+ if (buttonExists) {
+ const cmdKIcon = await page.$eval('#cmd-k-button iconify-icon', el => el.getAttribute('icon'));
+ const zoomIcon = await page.$eval('#zoom-toggle-button iconify-icon', el => el.getAttribute('icon'));
+
+ console.log(` CMD+K icon: ${cmdKIcon}`);
+ console.log(` Zoom icon: ${zoomIcon}`);
+ iconsDistinct = cmdKIcon !== zoomIcon;
+ console.log(` ${iconsDistinct ? '✅ PASS' : '❌ FAIL'} - Icons are distinct`);
+ }
+ testResults.push({ test: 'Icons are distinct', passed: buttonExists && iconsDistinct });
+
+ // ========================================================================
+ // TEST 2: Button click opens ninja-keys
+ // ========================================================================
+ console.log('\n2️⃣ Testing button click opens ninja-keys...');
+
+ await page.click('#cmd-k-button');
+ await page.waitForTimeout(500);
+
+ const ninjaKeysOpen = await page.$eval('#cmd-k-bar', el => el.hasAttribute('open'));
+ console.log(` Ninja-keys open: ${ninjaKeysOpen}`);
+ console.log(` ${ninjaKeysOpen ? '✅ PASS' : '❌ FAIL'} - Click opens ninja-keys`);
+ testResults.push({ test: 'Click opens ninja-keys', passed: ninjaKeysOpen });
+
+ // Close ninja-keys
+ await page.keyboard.press('Escape');
+ await page.waitForTimeout(300);
+
+ // ========================================================================
+ // TEST 3: At-bottom illumination
+ // ========================================================================
+ console.log('\n3️⃣ Testing at-bottom illumination...');
+
+ // Scroll to very top - use scroll() which fires event naturally
+ await page.evaluate(() => window.scrollTo(0, 0));
+ await page.waitForTimeout(100);
+ // Trigger handleScroll manually via hyperscript's behavior
+ await page.evaluate(() => window.dispatchEvent(new Event('scroll')));
+ await page.waitForTimeout(300);
+ const atTopClass = await page.$eval('#cmd-k-button', el => el.classList.contains('at-bottom'));
+ console.log(` At top - has at-bottom class: ${atTopClass}`);
+
+ // Scroll to bottom using mouse wheel to trigger actual scroll
+ await page.mouse.wheel(0, 100000);
+ await page.waitForTimeout(1000);
+ const atBottomClass = await page.$eval('#cmd-k-button', el => el.classList.contains('at-bottom'));
+ const zoomAtBottomClass = await page.$eval('#zoom-toggle-button', el => el.classList.contains('at-bottom'));
+ const infoAtBottomClass = await page.$eval('#info-button', el => el.classList.contains('at-bottom'));
+ console.log(` At bottom - CMD+K has at-bottom: ${atBottomClass}`);
+ console.log(` At bottom - Zoom has at-bottom: ${zoomAtBottomClass}`);
+ console.log(` At bottom - Info has at-bottom: ${infoAtBottomClass}`);
+
+ const illuminationWorks = !atTopClass && atBottomClass;
+ console.log(` ${illuminationWorks ? '✅ PASS' : '❌ FAIL'} - At-bottom illumination works`);
+ testResults.push({ test: 'At-bottom illumination', passed: illuminationWorks });
+
+ // ========================================================================
+ // TEST 4: Distinct color from zoom button
+ // ========================================================================
+ console.log('\n4️⃣ Testing distinct color at bottom...');
+
+ const cmdKBgColor = await page.$eval('#cmd-k-button', el => window.getComputedStyle(el).backgroundColor);
+ const zoomBgColor = await page.$eval('#zoom-toggle-button', el => window.getComputedStyle(el).backgroundColor);
+
+ console.log(` CMD+K bg color: ${cmdKBgColor}`);
+ console.log(` Zoom bg color: ${zoomBgColor}`);
+
+ const colorsDistinct = cmdKBgColor !== zoomBgColor;
+ console.log(` ${colorsDistinct ? '✅ PASS' : '❌ FAIL'} - Colors are distinct`);
+ testResults.push({ test: 'Colors are distinct', passed: colorsDistinct });
+
+ // ========================================================================
+ // FINAL SUMMARY
+ // ========================================================================
+ console.log("\n" + "=".repeat(70));
+ console.log("📊 TEST SUMMARY\n");
+
+ const totalTests = testResults.length;
+ const passedTests = testResults.filter(r => r.passed).length;
+ const failedTests = totalTests - passedTests;
+
+ testResults.forEach(result => {
+ console.log(` ${result.passed ? '✅' : '❌'} ${result.test}`);
+ });
+
+ console.log(`\n Total: ${passedTests}/${totalTests} tests passed`);
+ console.log("=".repeat(70) + "\n");
+
+ if (failedTests === 0) {
+ console.log("🎉 ALL CMD+K BUTTON TESTS PASSED!");
+ } else {
+ console.log("⚠️ SOME TESTS FAILED - See details above");
+ }
+
+ // Auto-close after tests if HEADLESS env is set
+ if (process.env.HEADLESS === 'true') {
+ await browser.close();
+ process.exit(failedTests === 0 ? 0 : 1);
+ } else {
+ console.log("\nBrowser will stay open for manual inspection.");
+ console.log("Press Ctrl+C when done.\n");
+ await new Promise(() => {}); // Keep browser open
+ }
+}
+
+await testCmdKButton();
diff --git a/tests/mjs/73-contact-form.test.mjs b/tests/mjs/73-contact-form.test.mjs
new file mode 100644
index 0000000..97f3315
--- /dev/null
+++ b/tests/mjs/73-contact-form.test.mjs
@@ -0,0 +1,329 @@
+#!/usr/bin/env bun
+/**
+ * CONTACT FORM TEST
+ * =================
+ * Tests contact form functionality and error handling
+ * - Modal opens correctly
+ * - Form elements and validation
+ * - HTMX attributes for error handling
+ * - Timestamp reset on modal open
+ * - Form submission flow
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testContactForm() {
+ console.log('📧 CONTACT FORM TEST\n');
+ console.log('='.repeat(70));
+
+ const browser = await chromium.launch({ headless: true });
+ const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+ const errors = [];
+ const testResults = [];
+
+ page.on('console', msg => {
+ const text = msg.text();
+ if (msg.type() === 'error') {
+ errors.push(text);
+ console.log(`❌ ERROR: ${text}`);
+ }
+ });
+
+ console.log("\n1️⃣ Loading page...");
+ await page.goto(URL);
+ await page.waitForTimeout(2000);
+
+ // ========================================================================
+ // TEST 1: Contact modal exists
+ // ========================================================================
+ console.log("\n2️⃣ Testing Contact Modal Elements...");
+ const modalTest = await page.evaluate(() => {
+ const modal = document.querySelector('#contact-modal');
+ const form = document.querySelector('#contact-form');
+ const emailField = document.querySelector('#contact-email');
+ const messageField = document.querySelector('#contact-message');
+ const submitBtn = document.querySelector('.contact-submit-btn');
+
+ return {
+ modalExists: !!modal,
+ formExists: !!form,
+ emailExists: !!emailField,
+ messageExists: !!messageField,
+ submitExists: !!submitBtn
+ };
+ });
+
+ console.log(` Contact modal: ${modalTest.modalExists ? '✅' : '❌'}`);
+ console.log(` Contact form: ${modalTest.formExists ? '✅' : '❌'}`);
+ console.log(` Email field: ${modalTest.emailExists ? '✅' : '❌'}`);
+ console.log(` Message field: ${modalTest.messageExists ? '✅' : '❌'}`);
+ console.log(` Submit button: ${modalTest.submitExists ? '✅' : '❌'}`);
+
+ const allElementsExist = modalTest.modalExists && modalTest.formExists &&
+ modalTest.emailExists && modalTest.messageExists && modalTest.submitExists;
+ console.log(` ${allElementsExist ? '✅ PASS' : '❌ FAIL'} - Contact form elements exist`);
+ testResults.push({ test: 'Contact Form Elements Exist', passed: allElementsExist });
+
+ // ========================================================================
+ // TEST 2: Contact button opens modal
+ // ========================================================================
+ console.log("\n3️⃣ Testing Contact Button Opens Modal...");
+
+ const contactBtn = await page.$('.fixed-btn.contact-btn, .contact-btn, [data-modal-trigger="contact"]');
+
+ if (contactBtn) {
+ await contactBtn.click();
+ await page.waitForTimeout(500);
+
+ const modalOpened = await page.evaluate(() => {
+ const modal = document.querySelector('#contact-modal');
+ if (!modal) return false;
+ return modal.hasAttribute('open') || modal.classList.contains('open') ||
+ window.getComputedStyle(modal).display !== 'none';
+ });
+
+ console.log(` Modal opened: ${modalOpened ? '✅' : '❌'}`);
+ console.log(` ${modalOpened ? '✅ PASS' : '❌ FAIL'} - Contact modal opens`);
+ testResults.push({ test: 'Contact Modal Opens', passed: modalOpened });
+
+ // Close it for next test
+ await page.keyboard.press('Escape');
+ await page.waitForTimeout(300);
+ } else {
+ console.log(` ⚠️ SKIP - Contact button not found`);
+ testResults.push({ test: 'Contact Modal Opens', passed: false });
+ }
+
+ // ========================================================================
+ // TEST 3: Form has hyperscript for success detection (content-based, not HTTP status)
+ // ========================================================================
+ console.log("\n4️⃣ Testing Hyperscript Success Detection...");
+
+ const hsTest = await page.evaluate(() => {
+ const form = document.querySelector('#contact-form');
+ if (!form) return { found: false };
+
+ const hsAttribute = form.getAttribute('_') || '';
+ const hasAfterRequest = hsAttribute.includes('htmx:afterRequest');
+ const checksSuccessElement = hsAttribute.includes('.contact-success');
+
+ return {
+ found: true,
+ hasAfterRequest,
+ checksSuccessElement
+ };
+ });
+
+ if (hsTest.found) {
+ console.log(` Handles htmx:afterRequest: ${hsTest.hasAfterRequest ? '✅' : '❌'}`);
+ console.log(` Checks for .contact-success: ${hsTest.checksSuccessElement ? '✅' : '❌'}`);
+
+ const handlerCorrect = hsTest.hasAfterRequest && hsTest.checksSuccessElement;
+ console.log(` ${handlerCorrect ? '✅ PASS' : '❌ FAIL'} - Success detection via content (not HTTP status)`);
+ testResults.push({ test: 'Hyperscript Success Detection', passed: handlerCorrect });
+ } else {
+ console.log(` ❌ FAIL - Form not found`);
+ testResults.push({ test: 'Hyperscript Success Detection', passed: false });
+ }
+
+ // ========================================================================
+ // TEST 4: Timestamp field exists and resets on modal open
+ // ========================================================================
+ console.log("\n5️⃣ Testing Timestamp Reset...");
+
+ // Get initial timestamp
+ const initialTimestamp = await page.$eval('#contact-form-loaded-at', el => el.value);
+ console.log(` Initial timestamp: ${initialTimestamp}`);
+
+ // Open modal again
+ if (contactBtn) {
+ await page.waitForTimeout(1000);
+ await contactBtn.click();
+ await page.waitForTimeout(500);
+
+ const newTimestamp = await page.$eval('#contact-form-loaded-at', el => el.value);
+ console.log(` After modal open: ${newTimestamp}`);
+
+ const timestampReset = parseInt(newTimestamp) > parseInt(initialTimestamp);
+ console.log(` Timestamp updated: ${timestampReset ? '✅' : '❌'}`);
+ console.log(` ${timestampReset ? '✅ PASS' : '❌ FAIL'} - Timestamp resets on modal open`);
+ testResults.push({ test: 'Timestamp Reset on Modal Open', passed: timestampReset });
+
+ // Keep modal open for next test
+ } else {
+ console.log(` ⚠️ SKIP - Contact button not found`);
+ testResults.push({ test: 'Timestamp Reset on Modal Open', passed: false });
+ }
+
+ // ========================================================================
+ // TEST 5: Form HTMX attributes
+ // ========================================================================
+ console.log("\n6️⃣ Testing Form HTMX Configuration...");
+
+ const formConfig = await page.evaluate(() => {
+ const form = document.querySelector('#contact-form');
+ if (!form) return { found: false };
+
+ return {
+ found: true,
+ hxPost: form.getAttribute('hx-post'),
+ hxTarget: form.getAttribute('hx-target'),
+ hxSwap: form.getAttribute('hx-swap'),
+ hxIndicator: form.getAttribute('hx-indicator'),
+ hasHeaders: form.hasAttribute('hx-headers')
+ };
+ });
+
+ if (formConfig.found) {
+ console.log(` hx-post: ${formConfig.hxPost || 'N/A'}`);
+ console.log(` hx-target: ${formConfig.hxTarget || 'N/A'}`);
+ console.log(` hx-swap: ${formConfig.hxSwap || 'N/A'}`);
+ console.log(` hx-indicator: ${formConfig.hxIndicator || 'N/A'}`);
+ console.log(` hx-headers: ${formConfig.hasHeaders ? '✅' : '❌'}`);
+
+ const configCorrect = formConfig.hxPost && formConfig.hxTarget && formConfig.hxSwap;
+ console.log(` ${configCorrect ? '✅ PASS' : '❌ FAIL'} - Form HTMX configuration`);
+ testResults.push({ test: 'Form HTMX Configuration', passed: configCorrect });
+ } else {
+ console.log(` ❌ FAIL - Form not found`);
+ testResults.push({ test: 'Form HTMX Configuration', passed: false });
+ }
+
+ // ========================================================================
+ // TEST 6: Bot protection fields
+ // ========================================================================
+ console.log("\n7️⃣ Testing Bot Protection...");
+
+ const botProtection = await page.evaluate(() => {
+ const honeypot = document.querySelector('#contact-website, [name="website"]');
+ const timestampField = document.querySelector('#contact-form-loaded-at, [name="form_loaded_at"]');
+
+ return {
+ honeypotExists: !!honeypot,
+ honeypotHidden: honeypot ? (honeypot.closest('[style*="left: -9999px"]') !== null ||
+ window.getComputedStyle(honeypot.parentElement).position === 'absolute') : false,
+ timestampExists: !!timestampField,
+ timestampHidden: timestampField ? timestampField.type === 'hidden' : false
+ };
+ });
+
+ console.log(` Honeypot field: ${botProtection.honeypotExists ? '✅' : '❌'}`);
+ console.log(` Honeypot hidden: ${botProtection.honeypotHidden ? '✅' : '❌'}`);
+ console.log(` Timestamp field: ${botProtection.timestampExists ? '✅' : '❌'}`);
+ console.log(` Timestamp hidden: ${botProtection.timestampHidden ? '✅' : '❌'}`);
+
+ const botProtectionOk = botProtection.honeypotExists && botProtection.timestampExists;
+ console.log(` ${botProtectionOk ? '✅ PASS' : '❌ FAIL'} - Bot protection configured`);
+ testResults.push({ test: 'Bot Protection Fields', passed: botProtectionOk });
+
+ // ========================================================================
+ // TEST 7: REAL submission test - verify no console errors on 400 response
+ // ========================================================================
+ console.log("\n8️⃣ Testing Form Submission Error Handling (REAL TEST)...");
+
+ // Clear any previous errors for this specific test
+ const errorsBefore = errors.length;
+
+ // Make sure modal is open
+ if (contactBtn) {
+ await page.keyboard.press('Escape');
+ await page.waitForTimeout(300);
+ await contactBtn.click();
+ await page.waitForTimeout(500);
+
+ // Fill form with invalid data (message too short to trigger 400)
+ await page.fill('#contact-email', 'test@example.com');
+ await page.fill('#contact-message', 'hi'); // Too short - will trigger 400
+
+ // Wait for timing validation (>2s)
+ await page.waitForTimeout(2500);
+
+ // Submit form via JavaScript to bypass HTML5 validation
+ await page.evaluate(() => {
+ const form = document.querySelector('#contact-form');
+ if (form) {
+ // Remove HTML5 required attributes temporarily
+ const emailField = form.querySelector('#contact-email');
+ const msgField = form.querySelector('#contact-message');
+ emailField.removeAttribute('required');
+ msgField.removeAttribute('required');
+ // Trigger HTMX request
+ if (window.htmx) {
+ window.htmx.trigger(form, 'submit');
+ }
+ }
+ });
+
+ await page.waitForTimeout(2000);
+
+ const errorsAfter = errors.length;
+ const newErrors = errorsAfter - errorsBefore;
+
+ // With HTTP 200 for validation errors, there should be NO console errors at all
+ // HTMX only logs errors for non-2xx responses
+ console.log(` Errors before submit: ${errorsBefore}`);
+ console.log(` Errors after submit: ${errorsAfter}`);
+ console.log(` New errors during submit: ${newErrors}`);
+
+ if (newErrors > 0) {
+ const newErrorList = errors.slice(errorsBefore);
+ newErrorList.forEach(e => console.log(` ❌ ${e}`));
+ }
+
+ const noErrors = newErrors === 0;
+ console.log(` ${noErrors ? '✅ PASS' : '❌ FAIL'} - Zero console errors on validation error`);
+ testResults.push({ test: 'Zero Console Errors on Validation', passed: noErrors });
+
+ // Check that error message is displayed in the form
+ const errorDisplayed = await page.evaluate(() => {
+ const response = document.querySelector('#contact-response');
+ return response && response.innerHTML.length > 0;
+ });
+ console.log(` Error message displayed in form: ${errorDisplayed ? '✅' : '❌'}`);
+ } else {
+ console.log(` ⚠️ SKIP - Contact button not found`);
+ testResults.push({ test: 'No Console Errors on 400 Response', passed: false });
+ }
+
+ // ========================================================================
+ // FINAL SUMMARY
+ // ========================================================================
+ console.log("\n" + "=".repeat(70));
+ console.log("📊 TEST SUMMARY\n");
+
+ const totalTests = testResults.length;
+ const passedTests = testResults.filter(r => r.passed).length;
+ const failedTests = totalTests - passedTests;
+
+ testResults.forEach(result => {
+ console.log(` ${result.passed ? '✅' : '❌'} ${result.test}`);
+ });
+
+ console.log(`\n Total: ${passedTests}/${totalTests} tests passed`);
+
+ if (errors.length === 0) {
+ console.log("\n✅ NO CONSOLE ERRORS");
+ } else {
+ console.log(`\n⚠️ ${errors.length} CONSOLE ERRORS`);
+ errors.forEach(e => console.log(` - ${e}`));
+ }
+
+ console.log("=".repeat(70) + "\n");
+
+ if (failedTests === 0) {
+ console.log("🎉 CONTACT FORM FUNCTIONALITY VALIDATED!");
+ } else {
+ console.log("⚠️ SOME TESTS FAILED - See details above");
+ }
+
+ // Close browser and exit
+ await browser.close();
+
+ // Exit with appropriate code
+ process.exit(failedTests === 0 ? 0 : 1);
+}
+
+await testContactForm();
diff --git a/tests/mjs/debug-css-cascade.mjs b/tests/mjs/debug-css-cascade.mjs
deleted file mode 100755
index 668a649..0000000
--- a/tests/mjs/debug-css-cascade.mjs
+++ /dev/null
@@ -1,48 +0,0 @@
-#!/usr/bin/env bun
-import { chromium } from 'playwright';
-
-(async () => {
- const browser = await chromium.launch({ headless: false });
- const page = await browser.newPage();
-
- await page.goto('http://localhost:1999/');
- await page.waitForLoadState('networkidle');
- await page.waitForTimeout(1000);
-
- // Get all CSS rules affecting the theme button
- const cssRules = await page.evaluate(() => {
- const btn = document.getElementById('color-theme-switcher');
- if (!btn) return null;
-
- const matchedRules = [];
-
- // Get all stylesheets
- for (const sheet of document.styleSheets) {
- try {
- const rules = sheet.cssRules || sheet.rules;
- for (const rule of rules) {
- if (rule.selectorText && btn.matches(rule.selectorText)) {
- matchedRules.push({
- selector: rule.selectorText,
- position: rule.style.position || 'not set',
- bottom: rule.style.bottom || 'not set',
- left: rule.style.left || 'not set',
- source: sheet.href || 'inline',
- cssText: rule.cssText
- });
- }
- }
- } catch (e) {
- // Skip CORS blocked stylesheets
- }
- }
-
- return matchedRules;
- });
-
- console.log('📋 CSS Rules matching #color-theme-switcher:');
- console.log(JSON.stringify(cssRules, null, 2));
-
- await page.waitForTimeout(5000);
- await browser.close();
-})();
diff --git a/tests/mjs/debug-theme-button.mjs b/tests/mjs/debug-theme-button.mjs
deleted file mode 100755
index 166500d..0000000
--- a/tests/mjs/debug-theme-button.mjs
+++ /dev/null
@@ -1,69 +0,0 @@
-#!/usr/bin/env bun
-import { chromium } from 'playwright';
-
-(async () => {
- const browser = await chromium.launch({ headless: false });
- const page = await browser.newPage();
-
- // Navigate to page
- await page.goto('http://localhost:1999/');
- await page.waitForLoadState('networkidle');
- await page.waitForTimeout(1000);
-
- // Check if theme button exists
- const themeButton = page.locator('#color-theme-switcher');
- const exists = await themeButton.count() > 0;
- console.log('✅ Theme button exists in DOM:', exists);
-
- if (exists) {
- // Get computed styles
- const isVisible = await themeButton.isVisible();
- console.log('🔍 Button isVisible():', isVisible);
-
- const box = await themeButton.boundingBox();
- console.log('📦 Bounding box:', box);
-
- // Get computed styles manually
- const styles = await page.evaluate(() => {
- const btn = document.getElementById('color-theme-switcher');
- if (!btn) return null;
-
- const computed = window.getComputedStyle(btn);
- return {
- display: computed.display,
- visibility: computed.visibility,
- opacity: computed.opacity,
- position: computed.position,
- bottom: computed.bottom,
- left: computed.left,
- width: computed.width,
- height: computed.height,
- background: computed.background,
- backgroundColor: computed.backgroundColor,
- zIndex: computed.zIndex,
- transform: computed.transform,
- };
- });
-
- console.log('🎨 Computed styles:', JSON.stringify(styles, null, 2));
-
- // Check --black-bar variable
- const blackBar = await page.evaluate(() => {
- return getComputedStyle(document.documentElement).getPropertyValue('--black-bar');
- });
- console.log('🔧 --black-bar variable:', blackBar || 'NOT DEFINED');
-
- // Take screenshot
- await page.screenshot({
- path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/theme-button-debug.png',
- fullPage: false
- });
- console.log('📸 Screenshot saved');
- }
-
- // Keep browser open for manual inspection
- console.log('\n⏸️ Browser kept open for inspection. Press Ctrl+C to close.');
- await page.waitForTimeout(60000);
-
- await browser.close();
-})();
diff --git a/tests/mjs/debug-tooltip.mjs b/tests/mjs/debug-tooltip.mjs
deleted file mode 100755
index 407deca..0000000
--- a/tests/mjs/debug-tooltip.mjs
+++ /dev/null
@@ -1,134 +0,0 @@
-#!/usr/bin/env bun
-/**
- * Quick debug to see what's happening with tooltips
- */
-
-import { chromium } from 'playwright';
-
-const URL = "http://localhost:1999";
-
-async function debugTooltip() {
- console.log('🔍 TOOLTIP DEBUG\n');
-
- const browser = await chromium.launch({ headless: false });
- const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
-
- await page.goto(URL);
- await page.waitForTimeout(2000);
-
- console.log("\n1️⃣ Checking button and tooltip setup...");
-
- const buttonInfo = await page.evaluate(() => {
- const btn = document.querySelector('#action-bar-pdf-btn');
- if (!btn) return { found: false };
-
- const computedBefore = window.getComputedStyle(btn, '::before');
-
- return {
- found: true,
- classes: Array.from(btn.classList),
- dataTooltip: btn.getAttribute('data-tooltip'),
- beforeStyles: {
- content: computedBefore.content,
- position: computedBefore.position,
- opacity: computedBefore.opacity,
- visibility: computedBefore.visibility,
- display: computedBefore.display,
- fontSize: computedBefore.fontSize,
- fontWeight: computedBefore.fontWeight,
- background: computedBefore.background,
- color: computedBefore.color,
- left: computedBefore.left,
- top: computedBefore.top,
- transform: computedBefore.transform,
- zIndex: computedBefore.zIndex
- }
- };
- });
-
- console.log('\n📊 Button Information:');
- console.log(' Classes:', buttonInfo.classes.join(', '));
- console.log(' data-tooltip:', buttonInfo.dataTooltip);
-
- console.log('\n🎨 ::before Pseudo-element Styles:');
- console.log(' content:', buttonInfo.beforeStyles.content);
- console.log(' position:', buttonInfo.beforeStyles.position);
- console.log(' opacity:', buttonInfo.beforeStyles.opacity);
- console.log(' visibility:', buttonInfo.beforeStyles.visibility);
- console.log(' display:', buttonInfo.beforeStyles.display);
- console.log(' fontSize:', buttonInfo.beforeStyles.fontSize);
- console.log(' fontWeight:', buttonInfo.beforeStyles.fontWeight);
- console.log(' background:', buttonInfo.beforeStyles.background);
- console.log(' color:', buttonInfo.beforeStyles.color);
- console.log(' left:', buttonInfo.beforeStyles.left);
- console.log(' top:', buttonInfo.beforeStyles.top);
- console.log(' transform:', buttonInfo.beforeStyles.transform);
- console.log(' z-index:', buttonInfo.beforeStyles.zIndex);
-
- console.log('\n2️⃣ Checking if tooltip CSS file is loaded...');
-
- const cssCheck = await page.evaluate(() => {
- // Check all link tags
- const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
- const cssLinks = links.map(l => l.href);
-
- // Try to find tooltip rules
- let tooltipRulesFound = [];
- for (const sheet of document.styleSheets) {
- try {
- const rules = Array.from(sheet.cssRules || []);
- for (const rule of rules) {
- if (rule.cssText && (rule.cssText.includes('.has-tooltip') || rule.cssText.includes('has-tooltip'))) {
- tooltipRulesFound.push(rule.cssText.substring(0, 100));
- }
- }
- } catch (e) {
- // Skip cross-origin sheets
- }
- }
-
- return {
- cssLinks,
- tooltipRulesFound
- };
- });
-
- console.log('\n📄 CSS Files Loaded:');
- cssCheck.cssLinks.forEach(link => console.log(' -', link));
-
- console.log('\n📋 Tooltip CSS Rules Found:', cssCheck.tooltipRulesFound.length);
- if (cssCheck.tooltipRulesFound.length > 0) {
- console.log(' Sample rules:');
- cssCheck.tooltipRulesFound.slice(0, 3).forEach(rule => console.log(' -', rule));
- }
-
- console.log('\n3️⃣ Testing hover...');
- console.log('Hovering over PDF button in 2 seconds...');
- await page.waitForTimeout(2000);
-
- await page.hover('#action-bar-pdf-btn');
- await page.waitForTimeout(1000);
-
- const afterHover = await page.evaluate(() => {
- const btn = document.querySelector('#action-bar-pdf-btn');
- const computedBefore = window.getComputedStyle(btn, '::before');
-
- return {
- opacity: computedBefore.opacity,
- visibility: computedBefore.visibility,
- transform: computedBefore.transform
- };
- });
-
- console.log('\n🖱️ After Hover:');
- console.log(' opacity:', afterHover.opacity, '(should be 1)');
- console.log(' visibility:', afterHover.visibility, '(should be visible)');
- console.log(' transform:', afterHover.transform);
-
- console.log('\n💡 Browser is open. Try hovering over the buttons yourself!');
- console.log('Press Ctrl+C when done.\n');
-
- await new Promise(() => {}); // Keep browser open
-}
-
-await debugTooltip();
diff --git a/tests/mjs/test-preference-migration.test.mjs b/tests/mjs/test-preference-migration.test.mjs
deleted file mode 100644
index e77e2b9..0000000
--- a/tests/mjs/test-preference-migration.test.mjs
+++ /dev/null
@@ -1,133 +0,0 @@
-import { chromium } from 'playwright';
-
-/**
- * Test preference migration from old to new values
- *
- * Tests:
- * 1. Old 'long' → migrates to 'extended'
- * 2. Old 'true'/'false' → migrates to 'show'/'hide'
- * 3. Toggles work correctly with new values
- */
-
-async function testPreferenceMigration() {
- const browser = await chromium.launch({ headless: true });
- const context = await browser.newContext();
- const page = await context.newPage();
-
- try {
- console.log('\n=== Testing Preference Migration ===\n');
-
- // Test 1: Set old values and verify migration
- console.log('Test 1: Setting old localStorage values...');
- await page.goto('http://localhost:1999/?lang=en');
-
- // Set OLD values
- await page.evaluate(() => {
- localStorage.setItem('cv-length', 'extended');
- localStorage.setItem('cv-icons', 'true');
- });
-
- console.log(' ✓ Old values set: length=extended, icons=true');
-
- // Reload page to trigger migration
- console.log('\nTest 2: Reloading page to trigger migration...');
- await page.reload();
- await page.waitForTimeout(500);
-
- // Check that values were migrated
- const migratedLength = await page.evaluate(() => localStorage.getItem('cv-length'));
- const migratedIcons = await page.evaluate(() => localStorage.getItem('cv-icons'));
-
- console.log(` Migration result: length="${migratedLength}", icons="${migratedIcons}"`);
-
- if (migratedLength === 'long' && migratedIcons === 'show') {
- console.log(' ✅ Migration successful!');
- } else {
- console.error(` ❌ Migration failed! Expected: length="long", icons="show"`);
- process.exit(1);
- }
-
- // Test 3: Verify UI state matches migrated values
- console.log('\nTest 3: Verifying UI state...');
- const hasLongClass = await page.evaluate(() => {
- return document.querySelector('.cv-paper')?.classList.contains('cv-long');
- });
- const hasIconsClass = await page.evaluate(() => {
- return document.querySelector('.cv-paper')?.classList.contains('show-icons');
- });
-
- console.log(` UI state: cv-long=${hasLongClass}, show-icons=${hasIconsClass}`);
-
- if (hasLongClass && hasIconsClass) {
- console.log(' ✅ UI state correct!');
- } else {
- console.error(' ❌ UI state incorrect!');
- process.exit(1);
- }
-
- // Test 4: Toggle and verify new values are used
- console.log('\nTest 4: Testing toggles with new values...');
-
- // Toggle length
- const lengthToggle = await page.$('#lengthToggle');
- if (lengthToggle) {
- await lengthToggle.click();
- await page.waitForTimeout(500);
-
- const newLength = await page.evaluate(() => localStorage.getItem('cv-length'));
- console.log(` Length toggle clicked, new value: "${newLength}"`);
-
- if (newLength === 'short') {
- console.log(' ✅ Length toggle works correctly!');
- } else {
- console.error(` ❌ Length toggle failed! Expected "short", got "${newLength}"`);
- process.exit(1);
- }
- }
-
- // Toggle icons
- const iconToggle = await page.$('#iconToggle');
- if (iconToggle) {
- await iconToggle.click();
- await page.waitForTimeout(500);
-
- const newIcons = await page.evaluate(() => localStorage.getItem('cv-icons'));
- console.log(` Icon toggle clicked, new value: "${newIcons}"`);
-
- if (newIcons === 'hide') {
- console.log(' ✅ Icon toggle works correctly!');
- } else {
- console.error(` ❌ Icon toggle failed! Expected "hide", got "${newIcons}"`);
- process.exit(1);
- }
- }
-
- // Test 5: Test with 'false' old value
- console.log('\nTest 5: Testing migration of "false" value...');
- await page.evaluate(() => {
- localStorage.setItem('cv-icons', 'false');
- });
- await page.reload();
- await page.waitForTimeout(500);
-
- const migratedFalse = await page.evaluate(() => localStorage.getItem('cv-icons'));
- console.log(` Migration of "false": "${migratedFalse}"`);
-
- if (migratedFalse === 'hide') {
- console.log(' ✅ "false" migrated to "hide" correctly!');
- } else {
- console.error(` ❌ "false" migration failed! Expected "hide", got "${migratedFalse}"`);
- process.exit(1);
- }
-
- console.log('\n=== ✅ All tests passed! ===\n');
-
- } catch (error) {
- console.error('\n❌ Test failed with error:', error);
- process.exit(1);
- } finally {
- await browser.close();
- }
-}
-
-testPreferenceMigration();
diff --git a/tests/mjs/verify-migration.test.mjs b/tests/mjs/verify-migration.test.mjs
deleted file mode 100644
index f62d131..0000000
--- a/tests/mjs/verify-migration.test.mjs
+++ /dev/null
@@ -1,44 +0,0 @@
-import { chromium } from 'playwright';
-
-async function verifyMigration() {
- const browser = await chromium.launch({ headless: true });
- const context = await browser.newContext();
- const page = await context.newPage();
-
- try {
- console.log('\n=== Quick Migration Verification ===\n');
-
- // Set old values
- await page.goto('http://localhost:1999/?lang=en');
- await page.evaluate(() => {
- localStorage.setItem('cv-length', 'extended');
- localStorage.setItem('cv-icons', 'true');
- });
- console.log('✓ Set old values: length="extended", icons="true"');
-
- // Reload to trigger migration
- await page.reload();
- await page.waitForTimeout(500);
-
- // Check migration
- const length = await page.evaluate(() => localStorage.getItem('cv-length'));
- const icons = await page.evaluate(() => localStorage.getItem('cv-icons'));
-
- console.log(`✓ After migration: length="${length}", icons="${icons}"`);
-
- if (length === 'long' && icons === 'show') {
- console.log('\n✅ Migration SUCCESS!\n');
- process.exit(0);
- } else {
- console.error('\n❌ Migration FAILED!\n');
- process.exit(1);
- }
- } catch (error) {
- console.error('\n❌ Error:', error.message, '\n');
- process.exit(1);
- } finally {
- await browser.close();
- }
-}
-
-verifyMigration();
diff --git a/tests/mjs/verify-theme-button-fix.mjs b/tests/mjs/verify-theme-button-fix.mjs
deleted file mode 100755
index 93d4eda..0000000
--- a/tests/mjs/verify-theme-button-fix.mjs
+++ /dev/null
@@ -1,86 +0,0 @@
-#!/usr/bin/env bun
-import { chromium } from 'playwright';
-
-(async () => {
- const browser = await chromium.launch({ headless: false });
- const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
-
- console.log('🔍 Testing theme button visibility on DESKTOP...\n');
-
- await page.goto('http://localhost:1999/');
- await page.waitForLoadState('networkidle');
- await page.waitForTimeout(1000);
-
- // Check theme button
- const themeButton = page.locator('#color-theme-switcher');
- const exists = await themeButton.count() > 0;
- console.log(exists ? '✅ Theme button exists in DOM' : '❌ Theme button NOT in DOM');
-
- if (exists) {
- const isVisible = await themeButton.isVisible();
- console.log(isVisible ? '✅ Theme button is VISIBLE' : '❌ Theme button is NOT visible');
-
- const box = await themeButton.boundingBox();
- console.log('\n📦 Bounding box:', box);
-
- // Check if Y position is positive (on screen)
- if (box && box.y > 0) {
- console.log('✅ Button is ON SCREEN (y > 0)');
- } else if (box && box.y < 0) {
- console.log('❌ Button is ABOVE SCREEN (y < 0) - STILL BROKEN');
- }
-
- // Get computed position
- const position = await page.evaluate(() => {
- const btn = document.getElementById('color-theme-switcher');
- const computed = window.getComputedStyle(btn);
- return {
- position: computed.position,
- bottom: computed.bottom,
- left: computed.left,
- top: computed.top
- };
- });
-
- console.log('\n🎨 Computed position:', position);
-
- if (position.position === 'fixed') {
- console.log('✅ Position is FIXED (correct!)');
- } else {
- console.log(`❌ Position is ${position.position} (should be fixed)`);
- }
-
- // Take screenshot
- await page.screenshot({
- path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/theme-button-fixed.png',
- fullPage: false
- });
- console.log('\n📸 Screenshot saved to screenshots/theme-button-fixed.png');
-
- // Test tooltip
- console.log('\n🎯 Testing tooltip...');
- await themeButton.hover();
- await page.waitForTimeout(500);
-
- const tooltipVisible = await page.evaluate(() => {
- const btn = document.getElementById('color-theme-switcher');
- const computed = window.getComputedStyle(btn, '::before');
- return {
- opacity: computed.opacity,
- visibility: computed.visibility,
- content: computed.content
- };
- });
-
- console.log('💬 Tooltip state:', tooltipVisible);
- if (parseFloat(tooltipVisible.opacity) > 0.5) {
- console.log('✅ Tooltip is VISIBLE on hover');
- } else {
- console.log('⚠️ Tooltip opacity is low or hidden');
- }
- }
-
- console.log('\n✅ Test complete - browser will close in 5 seconds');
- await page.waitForTimeout(5000);
- await browser.close();
-})();
