Как проверить, загружается ли компонент динамически в угловых 7 тестах кармы?

Question

Я создал компонент, в котором я динамически загружаю другой компонент, который нормально работает на ng serve.Ниже приведен код для динамической загрузки компонента.

import { Component, OnInit, ViewChild, ComponentFactoryResolver, Type, Input} from '@angular/core';
import { AddComponentDirective } from '../add-component.directive';
import { DynamicComponent } from '../dynamic/dynamic.component';
import { ComponentData } from '../component-data';
import { ComponentItem } from '../component-item';

  export class DynamicLoaderComponent implements OnInit {
      @ViewChild (AddComponentDirective) adhost : AddComponentDirective;

      constructor(private componentFactoryResolver : ComponentFactoryResolver) { }

      ngOnInit() {
          this.loadComponent(DynamicComponent,message,this.adhost);
      }

      loadComponent(comp, message, host){
          let adItem = new ComponentItem(comp,{msg: message});
          let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
          let viewContainerRef = host.viewContainer;
          let componentRef = viewContainerRef.createComponent(componentFactory);
      (<ComponentData>componentRef.instance).data = adItem.data;
    }
 }

Но при тестировании его с помощью теста угловой кармы мы сталкиваемся с ошибкой типа, т.е.

TypeError: this.componentFactoryResolver.resolveComponentFactoryне является функцией

Ниже приведен файл spec.ts , как я его тестирую.

import { async, ComponentFixture, TestBed ,getTestBed,inject} from '@angular/core/testing';
import {ComponentFactoryResolver,ViewChild,DebugElement} from '@angular/core';
import { AddComponentDirective } from '../add-component.directive';
import { DynamicComponent } from '../dynamic/dynamic.component';
import { DynamicLoaderComponent } from './dynamic-loader.component';
import { BrowserDynamicTestingModule } from "@angular/platform-browser-dynamic/testing";
import { ComponentData } from "../component-data";

describe('DynamicLoaderComponent', () => {
  let component: DynamicLoaderComponent;
  let fixture: ComponentFixture<DynamicLoaderComponent>;
  let injector: TestBed;
  let componentFactoryResolver : ComponentFactoryResolver ;
  let debugElement: DebugElement

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
      providers:[DynamicLoaderComponent,ComponentFactoryResolver]
    })
    .compileComponents();

    TestBed.overrideModule(BrowserDynamicTestingModule, {
      set: {
        entryComponents: [DynamicComponent]
      }
    });

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DynamicLoaderComponent);
    component = fixture.componentInstance;
    componentFactoryResolver =  fixture.debugElement.injector.get(ComponentFactoryResolver);
    fixture.detectChanges();
  });  

  it('should create the DynamicLoaderComponent',inject([DynamicLoaderComponent], (component : DynamicLoaderComponent) => {
    expect(component).toBeTruthy();
  }));

});

Можете ли вы помочь мне решить эту проблему, чтобы я мог продолжить тестирование динамических компонентов?

Answer 1

Для исправления этих ошибок необходимо внести несколько изменений:

1) Удалить providers из конфигурации TestBed

TestBed.configureTestingModule({
  declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
  providers:[DynamicLoaderComponent,ComponentFactoryResolver] <== remove this line
})

2) Вам не нужно получать свой компонентиз DI,

, поэтому замените

it('should create the DynamicLoaderComponent', inject([DynamicLoaderComponent], (component : DynamicLoaderComponent) => {
  expect(component).toBeTruthy();
}));

на:

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

3) compileComponents() вызов необходим, только если вы запускаете тесты в среде без CLI.

С Angular doc

Вызов compileComponents () закрывает текущий экземпляр TestBed для дальнейшей настройки.Вы не можете вызывать больше ни методов конфигурации TestBed, ни configureTestingModule (), ни методов переопределения ....TestBed выдает ошибку, если вы пытаетесь.

Это означает, что ваш TestBed.overrideModule вызов не будет иметь никакого эффекта и фабрика DynamicComponent не будет найдена.

Так что удалите .compileComponents();

TestBed.configureTestingModule({
  declarations: [ DynamicLoaderComponent,AddComponentDirective ,DynamicComponent],
  providers:[DynamicLoaderComponent,ComponentFactoryResolver]
})
.compileComponents(); <==== remove this

Если вы находитесь в среде non-angular-cli, вы можете вызвать ее после переопределения модуля:

TestBed.overrideModule(BrowserDynamicTestingModule, {
  set: {
    entryComponents: [DynamicComponent]
  }
});

TestBed.compileComponents(); <== this line

---

После всех измененийЯ написал выше, тест должен быть выполнен без ошибок.

Пример Plunker