import { Component, input } from '@angular/core';
import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
import { SkeletonLoaderDirective } from './skeleton-loader.directive';

@Component({
  template: `
    <div
      *uiSkeletonLoader="isLoading(); width: width(); height: height()"
      data-testid="content"
    >
      Original Content
    </div>
  `,
  imports: [SkeletonLoaderDirective],
})
class TestHostComponent {
  isLoading = input(false);
  width = input<string | undefined>(undefined);
  height = input<string | undefined>(undefined);
}

/**
 * Unit tests for the SkeletonLoaderDirective.
 * Tests conditional rendering of skeleton loader vs original content
 * and verifies custom dimensions are applied correctly.
 */
describe('SkeletonLoaderDirective', () => {
  let spectator: Spectator<TestHostComponent>;
  const createTestHost = createComponentFactory(TestHostComponent);

  beforeEach(() => {
    spectator = createTestHost();
    spectator.detectChanges();
  });

  it('should render the Original Content when isLoading is false', () => {
    expect(spectator.query('[data-testid="content"]')).toHaveText(
      'Original Content',
    );
  });

  it('should render the skeleton loader when isLoading is true', () => {
    spectator.setInput('isLoading', true);
    expect(spectator.query('ui-skeleton-loader')).toExist();
    expect(spectator.query('[data-testid="content"]')).not.toExist();
  });
});
