Repository: angular/angular
File: packages/forms/test/reactive_integration_spec.ts (TypeScript)

Code before:
    registerOnChange(fn: (value: any) => void) {}
    registerOnTouched(fn: any) {}
  }
  return CustomValueAccessor;
}

// Pre-create classes for validators.
const ViewValidatorA = createValidatorClass('[validators-a]');
const ViewValidatorB = createValidatorClass('[validators-b]');
const ViewValidatorC = createValidatorClass('[validators-c]');

// Pre-create classes for async validators.
const AsyncViewValidatorA = createAsyncValidatorClass('[validators-a]');
const AsyncViewValidatorB = createAsyncValidatorClass('[validators-b]');
const AsyncViewValidatorC = createAsyncValidatorClass('[validators-c]');

// Pre-create classes for value accessors.
const ValueAccessorA = createControlValueAccessor('[cva-a]');
const ValueAccessorB = createControlValueAccessor('[cva-b]');

describe('reactive forms integration tests', () => {
  function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
    TestBed.configureTestingModule({
      declarations: [component, ...directives],
      imports: [FormsModule, ReactiveFormsModule],
      providers: [provideZoneChangeDetection()],
    });
    return TestBed.createComponent(component);
  }

  function initReactiveFormsTest<T>(
    component: Type<T>,
    ...directives: Type<any>[]
  ): ComponentFixture<T> {
    TestBed.configureTestingModule({
      declarations: [component, ...directives],
      imports: [ReactiveFormsModule],
    });
    return TestBed.createComponent(component);
  }

  // Helper method that attaches a spy to a `validate` function on a Validator class.
  function validatorSpyOn(validatorClass: any) {
    return spyOn(validatorClass.prototype, 'validate').and.callThrough();
  }

  describe('basic functionality', () => {
    it('should work with single controls', () => {
      const fixture = initTest(FormControlComp);
      const control = new FormControl('old value');
      fixture.componentInstance.control = control;

Review comment (refactor):
If we're making that change, I'd refactor our tests to drop `detectChanges` and await `whenStable()` instead. 
I know this a bit more work but its better if our own code reflects the best practices/current recommendations

Code after:
    registerOnTouched(fn: any) {}
  }
  return CustomValueAccessor;
}

// Pre-create classes for validators.
const ViewValidatorA = createValidatorClass('[validators-a]');
const ViewValidatorB = createValidatorClass('[validators-b]');
const ViewValidatorC = createValidatorClass('[validators-c]');

// Pre-create classes for async validators.
const AsyncViewValidatorA = createAsyncValidatorClass('[validators-a]');
const AsyncViewValidatorB = createAsyncValidatorClass('[validators-b]');
const AsyncViewValidatorC = createAsyncValidatorClass('[validators-c]');

// Pre-create classes for value accessors.
const ValueAccessorA = createControlValueAccessor('[cva-a]');
const ValueAccessorB = createControlValueAccessor('[cva-b]');

describe('reactive forms integration tests', () => {
  function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
    TestBed.configureTestingModule({
      declarations: [component, ...directives],
      imports: [FormsModule, ReactiveFormsModule],
    });
    return TestBed.createComponent(component);
  }

  function initReactiveFormsTest<T>(
    component: Type<T>,
    ...directives: Type<any>[]
  ): ComponentFixture<T> {
    TestBed.configureTestingModule({
      declarations: [component, ...directives],
      imports: [ReactiveFormsModule],
    });
    return TestBed.createComponent(component);
  }

  // Helper method that attaches a spy to a `validate` function on a Validator class.
  function validatorSpyOn(validatorClass: any) {
    return spyOn(validatorClass.prototype, 'validate').and.callThrough();
  }

  describe('basic functionality', () => {
    it('should work with single controls', () => {
      const fixture = initTest(FormControlComp);
      const control = new FormControl('old value');
      fixture.componentInstance.control = control;
      fixture.detectChanges();