feat: add reusable input

src/app/components/form-field/form-field.spec.ts

@@ -0,0 +1,47 @@
+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);
+  });
+});