import { describe, it, expect } from 'vitest';
import { TestBed } from '@angular/core/testing';
import { provideZonelessChangeDetection } from '@angular/core';
import { App } from './app';
import { appConfig } from './app.config';

describe('Reactive Forms', () => {
  it('renders the initial contract and handles the documented operations', async () => {
    TestBed.configureTestingModule({
      imports: [App],
      providers: [...(appConfig.providers ?? [])],
    });
    const fixture = TestBed.createComponent(App);
    const element = fixture.nativeElement as HTMLElement;
    fixture.detectChanges();
    await fixture.whenStable();
    const text = () => element.querySelector('[data-result]')?.textContent?.trim();
    expect(text()).toBe('DR-4');

    {
      const input = element.querySelector<HTMLInputElement>('input')!;
      input.value = 'CL-2';
      input.dispatchEvent(new Event('input', { bubbles: true }));
      input.dispatchEvent(new Event('change', { bubbles: true }));
    }
    fixture.detectChanges();
    await fixture.whenStable();
    expect(text()).toBe('CL-2');
    element.querySelector<HTMLElement>('button')!.click();
    fixture.detectChanges();
    await fixture.whenStable();
    expect(text()).toBe('No tool');

    fixture.destroy();
  });
});