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

describe('shimmer-loading', () => {
  beforeEach(resetDOM);

  it('sets data-shimmer-loading-active and appends an overlay', () => {
    const host = mountHost();
    connectTrait(shimmerLoading, host);
    expect(host.hasAttribute('data-shimmer-loading-active')).toBe(true);
    // Either a static muted overlay (reduced-motion) or the shimmer overlay
    // is appended as a child div.
    const overlay = host.querySelector('div');
    expect(overlay).toBeTruthy();
  });

  it('disconnect removes overlay + cleans active attribute', () => {
    const host = mountHost();
    const inst = shimmerLoading();
    inst.connect(host);
    expect(host.querySelector('div')).toBeTruthy();
    inst.disconnect(host);
    expect(host.hasAttribute('data-shimmer-loading-active')).toBe(false);
    expect(host.querySelector('div')).toBeFalsy();
  });

  it('host gets position:relative if not already set (so the overlay anchors)', () => {
    const host = mountHost();
    connectTrait(shimmerLoading, host);
    expect(host.style.position).toBe('relative');
  });

  it('parallel attach to two hosts: each gets its own overlay', () => {
    const a = mountHost();
    const b = mountHost();
    shimmerLoading().connect(a);
    shimmerLoading().connect(b);
    expect(a.querySelector('div')).toBeTruthy();
    expect(b.querySelector('div')).toBeTruthy();
    expect(a.querySelector('div')).not.toBe(b.querySelector('div'));
  });
});
