import '@angular/compiler';
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { afterEach, describe, expect, it } from 'vitest';

import { GlobalLoadingService } from '../../../core/services/global-loading/global-loading.service';
import { GlobalLoadingComponent } from './global-loading.component';

describe('GlobalLoadingComponent', () => {
  afterEach(() => {
    TestBed.resetTestingModule();
  });

  it('renders an accessible overlay while the app is loading', async () => {
    const loadingState = signal(true);

    await TestBed.configureTestingModule({
      imports: [GlobalLoadingComponent],
      providers: [
        {
          provide: GlobalLoadingService,
          useValue: { isLoading: loadingState.asReadonly() }
        }
      ]
    }).compileComponents();

    const fixture = TestBed.createComponent(GlobalLoadingComponent);
    fixture.detectChanges();

    const overlay = fixture.nativeElement.querySelector('.global-loading');
    expect(overlay).not.toBeNull();
    expect(overlay.getAttribute('role')).toBe('status');
    expect(overlay.getAttribute('aria-label')).toBe('Cargando');
  });

  it('does not render the overlay while the app is idle', async () => {
    const loadingState = signal(false);

    await TestBed.configureTestingModule({
      imports: [GlobalLoadingComponent],
      providers: [
        {
          provide: GlobalLoadingService,
          useValue: { isLoading: loadingState.asReadonly() }
        }
      ]
    }).compileComponents();

    const fixture = TestBed.createComponent(GlobalLoadingComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('.global-loading')).toBeNull();
  });
});