import { ComponentFixture, TestBed } from '@angular/core/testing';

import { FormField } from './form-field';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Component, viewChild } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component({
  selector: 'form-mock',
  imports: [ReactiveFormsModule, FormField],
  template: ` <form [formGroup]="form">
    <app-form-field formControlName="mock"/>
  </form>`,
})
class FormMock {
  formField = viewChild.required<FormField>(FormField);
  form = new FormGroup({
    mock: new FormControl(),
  });

}

describe('FormField', () => {
  let component: FormMock;
  let fixture: ComponentFixture<FormMock>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FormField, ReactiveFormsModule],
    }).compileComponents();
    fixture = TestBed.createComponent(FormMock);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should trigger onChanges', () => {
    const onChangeSpy = spyOn(component.formField(), 'onChange').and.callThrough();
    const input = fixture.debugElement.query(By.css('input'));
    input.triggerEventHandler('input', {target: {value: 'a'}});
    fixture.detectChanges();
    expect(onChangeSpy).toHaveBeenCalledTimes(1);
  });
});