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

test('Capability demo page atomic tests verification', async ({ page }) => {
    page.on('console', msg => console.log('BROWSER:', msg.text()));

    await page.goto('http://localhost:5173/test/capability.html');
    await page.waitForTimeout(3000);

    const testResults = await page.evaluate(() => {
        const getTexts = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.textContent.trim());
        const getColors = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.style.color);

        return {
            textBinding: getTexts('p[$text="DemoState.testTitle"]'),
            textColor: getColors('p[$text="DemoState.testTitle"]'),
            ifTrue: document.querySelector('.alert-success')?.textContent.trim(),
            ifFalse: document.querySelector('.alert-danger')?.textContent.trim(),
            eachItems: getTexts('li.list-group-item'),
            nestedEachInIf: getTexts('.badge.bg-primary'),
            nestedIfInEach: getTexts('.bg-white')
        };
    });
    
    console.log('Atomic Test Results:', JSON.stringify(testResults, null, 2));

    expect(testResults.textBinding).toContain('Framework Is Active');
    expect(testResults.ifTrue).toBe('显示的内容 (True)');
    expect(testResults.ifFalse).toBeUndefined();
    expect(testResults.eachItems).toHaveLength(3);
    expect(testResults.nestedEachInIf).toHaveLength(3);
    expect(testResults.nestedIfInEach).toHaveLength(2); // Item A and C are visible
});