Как сделать доступ к внедренному ngControl из модульных тестов?

Как сделать доступ к внедренному ngControl из модульных тестов? Как устранить ошибку?

В компоненте

constructor(
    @Self() @Optional() public ngControl: NgControl
  ) { }

ngOnInit(): void {
    this.ngControl.valueChanges

В модульном тесте

beforeEach(() => {
      fixture = TestBed.createComponent(component);
      fixture.detectChanges();

При выполнении теста получить ошибку TypeError: Cannot read property 'valueChanges' of null

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
7
0
3 090
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Работает с:

beforeEach(() => {
     fixture = TestBed.createComponent(сomponent);
     (fixture.componentInstance as any).ngControl = new FormControl();

У меня была такая же проблема, и я решил ее, используя фиктивный объект для NgControl.

Определите фиктивный объект ...

let formControlSpy: jasmine.SpyObj<NgControl>;
formControlSpy = jasmine.createSpyObj('NgControl', ['value']);

Предоставьте макет для внедрения компонентов ...

TestBed.configureTestingModule({
    providers: [
        TestComponent,
        { provide: NgControl, useValue: formControlSpy }
    ]
});

injector = getTestBed();
component = injector.get(PasswordFormControlComponent);

Затем настройте необходимое значение элемента управления ...

beforeEach(() => formControlSpy.value.and.returnValue('value'));

В зависимости от того, что вы хотите сделать с элементом управления, если вы просто хотите устранить ошибку, вы можете предоставить NgControl следующим образом:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        ...
        providers: [
            { provide: NgControl, useValue: new FormControl() },
        ]
        ...
    })
    .compileComponents()
}))

Я решил это, переопределив

    beforeEach(async () => {
      const NG_CONTROL_PROVIDER = {
          provide: NgControl,
          useClass: class extends NgControl {
          control = new FormControl();
          viewToModelUpdate() {}
      },
    };

    await TestBed.configureTestingModule({
      declarations: [YourComponentName],
      imports: [FormsModule],
    })
      .overrideComponent(YourComponentName, {
        add: { providers: [NG_CONTROL_PROVIDER] },
      })
      .compileComponents();
  });
Ты спасатель!
vitaly-t 03.06.2021 22:55

Другие вопросы по теме