import { TestBed } from '@angular/core/testing';
import { Skeleton } from './skeleton';

describe('Skeleton', () => {
  it('renders a placeholder block sized from its inputs and hidden from screen readers', async () => {
    await TestBed.configureTestingModule({ imports: [Skeleton] }).compileComponents();
    const fixture = TestBed.createComponent(Skeleton);
    fixture.componentRef.setInput('width', '60%');
    fixture.componentRef.setInput('height', '24px');
    fixture.componentRef.setInput('radius', '12px');
    fixture.detectChanges();

    const element = fixture.nativeElement.querySelector('.skeleton');
    expect(element.getAttribute('aria-hidden')).toBe('true');
    expect(element.style.width).toBe('60%');
    expect(element.style.height).toBe('24px');
    expect(element.style.borderRadius).toBe('12px');
  });

  it('falls back to sensible default dimensions', async () => {
    await TestBed.configureTestingModule({ imports: [Skeleton] }).compileComponents();
    const fixture = TestBed.createComponent(Skeleton);
    fixture.detectChanges();

    const element = fixture.nativeElement.querySelector('.skeleton');
    expect(element.style.width).toBe('100%');
    expect(element.style.height).toBe('16px');
    expect(element.style.borderRadius).toBe('8px');
  });
});
