import { afterEach, describe, expect, it, vi } from 'vitest';
import { TestBed } from '@angular/core/testing';
import { UserDetailComponent } from './user-detail.component';

afterEach(() => {
  vi.unstubAllGlobals();
});

describe('UserDetailComponent', () => {
  it("shows the fetched user's name and email once resolved", async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue({
        json: () => Promise.resolve({ id: 1, name: 'Ada', email: 'ada@example.com' }),
      }),
    );
    await TestBed.configureTestingModule({ imports: [UserDetailComponent] }).compileComponents();
    const fixture = TestBed.createComponent(UserDetailComponent);
    fixture.componentRef.setInput('userId', 1);
    fixture.detectChanges();
    await fixture.whenStable();
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('ada@example.com');
  });

  it('emits close when the back button is clicked', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue({
        json: () => Promise.resolve({ id: 1, name: 'Ada', email: 'a@x.com' }),
      }),
    );
    await TestBed.configureTestingModule({ imports: [UserDetailComponent] }).compileComponents();
    const fixture = TestBed.createComponent(UserDetailComponent);
    fixture.componentRef.setInput('userId', 1);
    fixture.detectChanges();
    let closed = false;
    fixture.componentInstance.close.subscribe(() => (closed = true));
    fixture.nativeElement.querySelectorAll('button')[0].click();
    expect(closed).toBe(true);
  });
});