import { describe, it, expect, beforeEach } from 'vitest';
import { ripple } from './ripple.js';
import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';

describe('ripple', () => {
  beforeEach(resetDOM);

  it('connect sets data-ripple-active', () => {
    const host = mountHost();
    connectTrait(ripple, host);
    expect(host.hasAttribute('data-ripple-active')).toBe(true);
  });

  it('disconnect clears active + restores overflow', () => {
    const host = mountHost();
    const inst = connectTrait(ripple, host);
    inst.disconnect(host);
    expect(host.hasAttribute('data-ripple-active')).toBe(false);
    expect(host.style.overflow).toBe('');
  });

  it('click appends a ripple span (in non-reduced-motion environment)', () => {
    const host = mountHost();
    connectTrait(ripple, host);
    const beforeChildren = host.children.length;
    host.dispatchEvent(new MouseEvent('click', { clientX: 10, clientY: 10, bubbles: true }));
    // In happy-dom + reduced-motion preference unknown, the ripple may or may
    // not append a span. The contract is "connect doesn't throw, no DOM leak
    // on disconnect".
    expect(host.children.length).toBeGreaterThanOrEqual(beforeChildren);
  });
});
