// Tests for shared/toast.js — the cross-tool notification helper
// available as window.zddc.toast(msg, level, opts). Loaded into every
// tool's bundle by build.sh.
//
// Strategy: load any tool's dist HTML over file:// (browse is the
// smallest), trigger the helper, and assert DOM + ARIA shape.

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

const HTML_PATH = path.resolve('browse/dist/browse.html');

test.describe('shared/toast.js', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto(`file://${HTML_PATH}`, { waitUntil: 'load' });
    });

    test('exposes window.zddc.toast(msg, level)', async ({ page }) => {
        const exposed = await page.evaluate(
            () => typeof window.zddc?.toast === 'function'
        );
        expect(exposed).toBe(true);
    });

    test('renders a toast with the level class and ARIA role', async ({ page }) => {
        const after = await page.evaluate(() => {
            window.zddc.toast('Saved.', 'success');
            const el = document.querySelector('.zddc-toast');
            return el && {
                // The message lives in its own span (the toast also holds a × button).
                text: el.querySelector('.zddc-toast__msg').textContent,
                level: [...el.classList].find(c => c.startsWith('zddc-toast--')),
                role: el.getAttribute('role'),
                live: el.getAttribute('aria-live'),
            };
        });
        expect(after).toEqual({
            text: 'Saved.',
            level: 'zddc-toast--success',
            role: 'status',
            live: 'polite',
        });
    });

    test('error level uses role=alert + aria-live=assertive', async ({ page }) => {
        const probe = await page.evaluate(() => {
            window.zddc.toast('Boom', 'error');
            const el = document.querySelector('.zddc-toast');
            return { role: el.getAttribute('role'), live: el.getAttribute('aria-live') };
        });
        expect(probe).toEqual({ role: 'alert', live: 'assertive' });
    });

    test('toasts stack, and a "Clear all" control appears at 2+', async ({ page }) => {
        const r = await page.evaluate(() => {
            window.zddc.toast('one', 'error');   // sticky so it stays for the count
            window.zddc.toast('two', 'error');
            return {
                count: document.querySelectorAll('.zddc-toast').length,
                clearAll: !!document.querySelector('.zddc-toasts__clear'),
            };
        });
        expect(r.count).toBe(2);        // stack, not replace
        expect(r.clearAll).toBe(true);  // "Clear all" surfaces when 2+ are stacked
    });

    test('the × button dismisses a toast; clicking the body does not', async ({ page }) => {
        await page.evaluate(() => window.zddc.toast('keep me', 'error')); // sticky
        await page.locator('.zddc-toast .zddc-toast__msg').click();        // selecting text ≠ dismiss
        await expect(page.locator('.zddc-toast')).toHaveCount(1);
        await page.locator('.zddc-toast .zddc-toast__close').click();      // × dismisses
        await expect(page.locator('.zddc-toast')).toHaveCount(0);
    });
});