fix: match CV design system, right-side positioning, smarter agent
CSS: - Button moved to right: 2rem, above back-to-top (bottom: 6rem) - Uses CV design tokens: --black-bar, --accent-blue, --paper-bg - Fonts: Quicksand (header), Source Sans Pro (body) - Tooltip on the left side (tooltip-left class) - Dark theme uses CV-consistent grays Intelligence: - Agent instruction emphasizes exhaustive reporting of ALL matches - Cross-section search results must not be truncated - Mentions CV site itself is built with Go when relevant Tests: - Updated positioning assertions (right side, x > viewport/2) - Added 5 intelligence tests: Go cross-section, company count, years of experience, React cross-section, Spanish response - Resilient to API errors (waits for any message, not just user) - 42 total test assertions
This commit is contained in:
juanatsap
@@ -179,8 +179,12 @@ async function testChatMascot() {
|
||||
const msgCountBefore = await page.locator('#chat-messages .chat-message').count();
|
||||
|
||||
await page.click('.chat-chip >> text=Go projects');
|
||||
// Wait for the response (agent call takes time)
|
||||
await page.waitForSelector('#chat-messages .chat-user', { timeout: CHAT_TIMEOUT });
|
||||
// Wait for any new message (user or error — agent may be unavailable)
|
||||
await page.waitForFunction(
|
||||
(before) => document.querySelectorAll('#chat-messages .chat-message').length > before,
|
||||
msgCountBefore,
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const userMsg = await page.locator('#chat-messages .chat-user').last().textContent();
|
||||
record('User message appears after chip click',
|
||||
@@ -337,12 +341,117 @@ async function testChatMascot() {
|
||||
console.log("\n2️⃣0️⃣ CSS Positioning");
|
||||
|
||||
const btnPos = await page.locator('#chat-toggle-btn').boundingBox();
|
||||
record('Button is on the left half of screen',
|
||||
btnPos && btnPos.x < 200, `x=${btnPos?.x}`);
|
||||
const viewportWidth = 1920;
|
||||
record('Button is on the right side of screen',
|
||||
btnPos && btnPos.x > viewportWidth / 2, `x=${btnPos?.x}`);
|
||||
|
||||
const panelPos = await page.locator('#chat-panel').boundingBox();
|
||||
record('Panel is on the left side',
|
||||
panelPos && panelPos.x < 200, `x=${panelPos?.x}`);
|
||||
record('Panel is on the right side',
|
||||
panelPos && (panelPos.x + panelPos.width) > viewportWidth / 2, `right edge=${panelPos ? panelPos.x + panelPos.width : 0}`);
|
||||
|
||||
// ========================================================================
|
||||
// TEST 21-25: INTELLIGENCE TESTS (verify agent gives complete answers)
|
||||
// ========================================================================
|
||||
console.log("\n2️⃣1️⃣ Intelligence: Go projects (cross-section)");
|
||||
|
||||
// Go back to English for intelligence tests
|
||||
await page.goto(`${URL}/?lang=en`);
|
||||
await page.waitForTimeout(2000);
|
||||
await page.click('#chat-toggle-btn');
|
||||
await page.waitForTimeout(500);
|
||||
// Dismiss help card if visible
|
||||
const helpStillVisible = await page.locator('#chat-help-card.visible').count();
|
||||
if (helpStillVisible > 0) {
|
||||
await page.click('.chat-help-dismiss');
|
||||
await page.waitForTimeout(200);
|
||||
}
|
||||
|
||||
// Ask about Go — should find projects AND experience AND skills
|
||||
await page.fill('#chat-input', 'What is Juan\'s experience with Go?');
|
||||
await page.click('.chat-send-btn');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const agents = document.querySelectorAll('#chat-messages .chat-agent');
|
||||
return agents.length >= 2 && agents[agents.length - 1].textContent.length > 50;
|
||||
},
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const goResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
|
||||
const goLower = goResponse.toLowerCase();
|
||||
record('Go search finds projects',
|
||||
goLower.includes('immich') || goLower.includes('cmux'),
|
||||
goLower.includes('immich') ? 'found Immich' : 'missing Immich');
|
||||
record('Go search finds skills section',
|
||||
goLower.includes('skill') || goLower.includes('programming') || goLower.includes('proficiency'),
|
||||
'mentions skills');
|
||||
|
||||
console.log("\n2️⃣2️⃣ Intelligence: Company count");
|
||||
|
||||
await page.fill('#chat-input', 'How many companies has Juan worked at? List them all.');
|
||||
await page.click('.chat-send-btn');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const agents = document.querySelectorAll('#chat-messages .chat-agent');
|
||||
return agents.length >= 3 && agents[agents.length - 1].textContent.length > 100;
|
||||
},
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const companiesResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
|
||||
const compLower = companiesResponse.toLowerCase();
|
||||
record('Lists Olympic Broadcasting', compLower.includes('olympic'));
|
||||
record('Lists Insa', compLower.includes('insa'));
|
||||
record('Lists Gigya or SAP', compLower.includes('gigya') || compLower.includes('sap'));
|
||||
|
||||
console.log("\n2️⃣3️⃣ Intelligence: Years of experience");
|
||||
|
||||
await page.fill('#chat-input', 'How many years of experience?');
|
||||
await page.click('.chat-send-btn');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const agents = document.querySelectorAll('#chat-messages .chat-agent');
|
||||
return agents.length >= 4 && agents[agents.length - 1].textContent.length > 20;
|
||||
},
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const yearsResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
|
||||
record('Reports 21 years of experience',
|
||||
yearsResponse.includes('21'), `response: ${yearsResponse.substring(0, 80)}`);
|
||||
|
||||
console.log("\n2️⃣4️⃣ Intelligence: React cross-section");
|
||||
|
||||
await page.fill('#chat-input', 'Has Juan worked with React? Where?');
|
||||
await page.click('.chat-send-btn');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const agents = document.querySelectorAll('#chat-messages .chat-agent');
|
||||
return agents.length >= 5 && agents[agents.length - 1].textContent.length > 50;
|
||||
},
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const reactResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
|
||||
const reactLower = reactResponse.toLowerCase();
|
||||
record('React search finds experience entries',
|
||||
reactLower.includes('olympic') || reactLower.includes('liv') || reactLower.includes('gigya'));
|
||||
|
||||
console.log("\n2️⃣5️⃣ Intelligence: Spanish response language");
|
||||
|
||||
await page.fill('#chat-input', '¿Cuántas certificaciones tiene Juan?');
|
||||
await page.click('.chat-send-btn');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const agents = document.querySelectorAll('#chat-messages .chat-agent');
|
||||
return agents.length >= 6 && agents[agents.length - 1].textContent.length > 20;
|
||||
},
|
||||
{ timeout: CHAT_TIMEOUT }
|
||||
);
|
||||
|
||||
const esResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
|
||||
record('Responds in Spanish when asked in Spanish',
|
||||
esResponse.includes('certificaci') || esResponse.includes('SAP') || esResponse.includes('tiene'));
|
||||
|
||||
// ========================================================================
|
||||
// SUMMARY
|
||||
|
||||
Reference in New Issue
Block a user