import { test, expect } from '@playwright/test';
import { AxeBuilder } from '@axe-core/playwright';

test.describe('Accessible Tooltip Component', () => {
    // Before each test, navigate to the specific EJS view serving the tooltip
    test.beforeEach(async ({ page }) => {
        await page.goto('/test/tooltip'); // Resolves to http://localhost:3080/test/tooltip
    });
    
    test('should pass AAA accessibility audits', async ({ page }) => {
        // Wait for the component to be fully hydrated
        await page.waitForLoadState('networkidle');
        
        // Run the Axe-core engine against the page
        const accessibilityScanResults = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa', 'wcag2aaa', 'best-practice'])
            .analyze();
        
            // If there are violations, the test fails and prints them in the console
            expect(accessibilityScanResults.violations).toEqual([]);
    });
    
    test('should toggle the popover content natively', async ({ page }) => {
        // Locate the button and the content div
        // Notice how we don't care about the shadow boundary, we just use standard CSS selectors
        const tooltipBtn = page.locator('.popover-btn');
        const tooltipContent = page.locator('.tool-tip-content');
        
        // Assert initial state (Popover should be hidden)
        await expect(tooltipContent).not.toBeVisible();
        
        // Interact
        await tooltipBtn.click();
        
        // Assert new state (Popover should be visible)
        await expect(tooltipContent).toBeVisible();
        
        // Test native accessibility behavior (Esc key to dismiss Popover)
        await page.keyboard.press('Escape');
        await expect(tooltipContent).not.toBeVisible();
    });
    
    test('visual regression: component renders correctly', async ({ page }) => {
        const tooltipBtn = page.locator('.popover-btn');
        const tooltipContent = page.locator('.tool-tip-content');
        
        // Take a snapshot of just the button element
        await expect(tooltipBtn).toHaveScreenshot('tooltip-button-closed.png');

        // Open it and take a snapshot of the whole component area to catch layout shifts
        await tooltipBtn.click();
        await expect(tooltipContent).toBeVisible();
        
        await expect(page.locator('.tool-tip-icon')).toHaveScreenshot('tooltip-container-open.png');
    });
});