cv-site/tests/test-zoom-functionality.mjs

#!/usr/bin/env node

/**
 * Zoom Control Functionality Test
 * Tests the X button and drag functionality
 */

import { chromium } from 'playwright';

async function testZoomControl() {
    console.log('🧪 Starting Zoom Control Test...\n');

    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
    const page = await context.newPage();

    try {
        // Navigate to the CV page
        console.log('📄 Navigating to http://localhost:1999/?lang=en');
        await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });
        await page.waitForTimeout(2000);

        // Wait for zoom control to be visible
        console.log('⏳ Waiting for zoom control to load...');
        const zoomControl = page.locator('#zoom-control');
        await zoomControl.waitFor({ state: 'visible', timeout: 5000 });
        console.log('✅ Zoom control is visible\n');

        // Test 1: X Button Click
        console.log('🧪 TEST 1: X Button Click');
        console.log('   Locating X button...');
        const closeButton = page.locator('#zoom-close');
        await closeButton.waitFor({ state: 'visible' });

        const closeButtonBox = await closeButton.boundingBox();
        console.log(`   X button position: x=${closeButtonBox.x}, y=${closeButtonBox.y}`);

        console.log('   Clicking X button...');
        await closeButton.click({ force: true });
        await page.waitForTimeout(500);

        // Check if zoom control is hidden
        const isHidden = await zoomControl.evaluate(el => {
            const style = window.getComputedStyle(el);
            return style.display === 'none';
        });

        if (isHidden) {
            console.log('✅ X button works! Zoom control is hidden');
        } else {
            console.log('❌ X button failed! Zoom control is still visible');
        }

        // Check if show button appeared
        const showButton = page.locator('#show-zoom-menu-btn');
        const showButtonVisible = await showButton.evaluate(el => {
            const style = window.getComputedStyle(el);
            return style.display !== 'none';
        });

        if (showButtonVisible) {
            console.log('✅ Show zoom button is visible');
        } else {
            console.log('❌ Show zoom button did not appear');
        }

        // Test 2: Show Button Click
        console.log('\n🧪 TEST 2: Show Button Click');
        console.log('   Clicking show zoom button...');
        await showButton.click();
        await page.waitForTimeout(500);

        const isVisibleAgain = await zoomControl.evaluate(el => {
            const style = window.getComputedStyle(el);
            return style.display !== 'none';
        });

        if (isVisibleAgain) {
            console.log('✅ Show button works! Zoom control is visible again');
        } else {
            console.log('❌ Show button failed! Zoom control is still hidden');
        }

        // Test 3: Drag Functionality
        console.log('\n🧪 TEST 3: Drag Functionality');

        // Get initial position
        const initialPosition = await zoomControl.boundingBox();
        console.log(`   Initial position: x=${Math.round(initialPosition.x)}, y=${Math.round(initialPosition.y)}`);

        // Calculate drag target (click on the grey background, not on buttons)
        const dragStartX = initialPosition.x + 100; // Middle of control
        const dragStartY = initialPosition.y + initialPosition.height / 2;

        console.log('   Starting drag operation...');
        await page.mouse.move(dragStartX, dragStartY);
        await page.mouse.down();

        // Drag to new position
        const newX = dragStartX + 200;
        const newY = dragStartY - 100;
        console.log(`   Dragging to: x=${Math.round(newX)}, y=${Math.round(newY)}`);

        await page.mouse.move(newX, newY, { steps: 10 });
        await page.mouse.up();
        await page.waitForTimeout(500);

        // Get final position
        const finalPosition = await zoomControl.boundingBox();
        console.log(`   Final position: x=${Math.round(finalPosition.x)}, y=${Math.round(finalPosition.y)}`);

        const movedX = Math.abs(finalPosition.x - initialPosition.x);
        const movedY = Math.abs(finalPosition.y - initialPosition.y);

        if (movedX > 50 || movedY > 50) {
            console.log(`✅ Drag works! Moved ${Math.round(movedX)}px horizontally, ${Math.round(movedY)}px vertically`);
        } else {
            console.log(`❌ Drag failed! Only moved ${Math.round(movedX)}px horizontally, ${Math.round(movedY)}px vertically`);
        }

        // Test 4: Slider Doesn't Trigger Drag
        console.log('\n🧪 TEST 4: Slider Click Doesn\'t Trigger Drag');
        const slider = page.locator('#zoom-slider');
        const sliderBox = await slider.boundingBox();

        console.log('   Clicking on slider...');
        await slider.click({ force: true });
        await page.waitForTimeout(500);

        const positionAfterSlider = await zoomControl.boundingBox();
        const sliderMovedX = Math.abs(positionAfterSlider.x - finalPosition.x);
        const sliderMovedY = Math.abs(positionAfterSlider.y - finalPosition.y);

        if (sliderMovedX < 5 && sliderMovedY < 5) {
            console.log('✅ Slider click doesn\'t trigger drag mode');
        } else {
            console.log(`❌ Slider click triggered drag! Moved ${Math.round(sliderMovedX)}px, ${Math.round(sliderMovedY)}px`);
        }

        // Summary
        console.log('\n' + '='.repeat(60));
        console.log('📊 TEST SUMMARY');
        console.log('='.repeat(60));
        console.log(`${isHidden ? '✅' : '❌'} X button hides zoom control`);
        console.log(`${showButtonVisible ? '✅' : '❌'} Show button appears when hidden`);
        console.log(`${isVisibleAgain ? '✅' : '❌'} Show button reveals zoom control`);
        console.log(`${movedX > 50 || movedY > 50 ? '✅' : '❌'} Drag functionality works`);
        console.log(`${sliderMovedX < 5 && sliderMovedY < 5 ? '✅' : '❌'} Slider doesn't trigger drag`);
        console.log('='.repeat(60));

        console.log('\n⏸️  Browser will stay open for 10 seconds for manual inspection...');
        await page.waitForTimeout(10000);

    } catch (error) {
        console.error('❌ Test failed with error:', error.message);
        console.error(error.stack);
    } finally {
        await browser.close();
        console.log('\n✅ Test completed');
    }
}

testZoomControl();