Как выполнить модульное тестирование реактивного компонента, где ngControl украшен @Self

Question

Я написал реактивный компонент, введя NgControl и декорируемый с помощью декоратора @Self.Моя проблема связана с модульным тестированием такого компонента.Пожалуйста, посмотрите на код ниже:

Отказ от ответственности: я быстро скопировал код и сделал некоторые встроенные изменения.Таким образом, это может быть не счастливый код компилятора.

Мой реактивный компонент:

@Component({
  selector: 'text-input',
  templateUrl: '<input type="text" class="native_input" />'
})
class TextInput implements ControlValueAccessor {
  protected constructor(@Self() public controlDir: NgControl) {

    this.controlDir.valueAccessor = this;
  }

  // ...followed by other ControlValueAccessor methods

}

Модульный тест:

describe('TextInput -', () => {

   let fixture: ComponentFixture<TextInputHost>;
   let textInput: TextInput;

   let inputElement: HTMLInputElement;

   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         TextInput, TextInputHost
       ],
       imports: [
         FormsModule, ReactiveFormsModule
       ]
     });
  }));

  beforeEach(fakeAsync(() => {
    fixture = getTestBed().createComponent(TextInputHost);
    textInput = fixture.componentInstance.textInputComponent;
    textInput.writeValue('TestValue');
    inputElement = fixture.debugElement
       .query(By.css('native_input')).nativeElement;
    fixture.detectChanges();
    tick();
  }));

  it('Should have the initial value applied.', () => {
    expect(inputElement.value).toBe('TestValue');
  });

});

// Host component
@Component({
  template: `
   <form [formGroup]="pageForm">
    <text-input formControlName="testInput">
    </text-input>
   </form>`
})
class TextInputHost {
   @ViewChild(TextInput)
   public textInputComponent: TextInput;

   public pageForm: FormGroup = new FormGroup({
     testInput: new FormControl('Initial Value')
   });
}

Всякий раз, когда я пытаюсь запустить вышеуказанный модультестовое задание.Сбой со следующей ошибкой: Template parse errors: No provider for NgControl --> <text-input>....</text-input>

Итак, я ищу способ успешно запустить вышеуказанный модульный тест.Что я ищу, так это способ внедрить NgControl в компонент TextInput.

Answer 1

Если кто-то наткнулся на этот вопрос, я решил его с помощью метода overrideComponent () класса TestBed.

Примечание. Если вы считаете, что у вас есть другие ответы, ответьте на них..

Чтобы ввести NgControl:

beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         TextInput, TextInputHost
       ],
       imports: [
         FormsModule, ReactiveFormsModule
       ]
    })
    .overrideComponent(TextInput, {
        set: {
          providers: [
            {
              provide: NgControl,
              useValue: new FormControlDirective([], [], null, null)
            }
         ]
       }
    });
 }));