import { test, expect } from '@playwright/test';

test('Stress test: Virtual List should handle 10,000 items with dynamic height', async ({ page }) => {
    test.setTimeout(60000); 
    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
    
    await page.goto('http://localhost:5174/test/list_test.html');
    
    const listFast = page.locator('#listFast');
    await expect(listFast).toBeVisible();
    await page.waitForFunction(() => document.querySelectorAll('#listFast .list-group-item').length > 0);
    
    // Check initial state
    const scrollTop = await listFast.evaluate(e => e.scrollTop);
    const scrollHeight = await listFast.evaluate(e => e.scrollHeight);
    const clientHeight = await listFast.evaluate(e => e.clientHeight);
    console.log(`Initial: scrollTop=${scrollTop}, scrollHeight=${scrollHeight}, clientHeight=${clientHeight}`);
    
    // Attach event listener to see if scroll fires
    await listFast.evaluate(e => {
        e.addEventListener('scroll', () => console.log('SCROLL EVENT FIRED! new scrollTop:', e.scrollTop));
    });

    // Scroll to the very end
    await listFast.evaluate(e => e.scrollTop = e.scrollHeight);
    await page.waitForTimeout(1000);
    
    const finalScrollTop = await listFast.evaluate(e => e.scrollTop);
    console.log(`Final: scrollTop=${finalScrollTop}`);
    
    const lastItemText = await listFast.locator('.list-group-item').last().textContent();
    console.log('Last rendered item text:', lastItemText);
    expect(lastItemText).toContain('Virtual Item 10000');
});