Как выполнить модульное тестирование углового компонента, созданного с помощью ngComponentOutlet?

Question

У меня есть компонент, созданный с помощью ngComponentOutlet

<ng-container *ngComponentOutlet="adminTableComponent; injector: adminTableInjector;"></ng-container>   

и сам компонент

import { Component, OnInit, Injectable, EventEmitter } from '@angular/core';
import { Data } from '@angular/router';

@Injectable()
export class AdminTableInfo {
  resourceData;
  resourceConfiguration;
  resourceName;
  constructor(resourceData, resourceConfiguration, resourceName) {
    this.resourceData = resourceData;
    this.resourceConfiguration = resourceConfiguration;
    this.resourceName = resourceName;
  }
}

@Component({
  selector: 'rw-admin-table',
  templateUrl: './admin-table.component.html',
  styleUrls: ['./admin-table.component.scss']
})
export class AdminTableComponent implements OnInit {

  private _resourceData;

  constructor(public adminTableInfo: AdminTableInfo) {
    if (adminTableInfo) {
      this._resourceData = adminTableInfo.resourceData;
    }
  }

  ngOnInit() {
    this.setTableStyle();
    this.setDefaultSort();
    this.adminTableInfo.resourceDataChanged$.subscribe(data => {
      this._resourceData = data;
      this.setDefaultSort();
    });
  }

...

Как настроить юнит-тест? мы используем Jest, но я думаю, что настройки должны быть довольно похожи на Жасмин / Карма

Это мой тестовый модуль

@Injectable()
export class AdminTableInfo {
  resourceData;
  resourceConfiguration;
  resourceName;
  constructor(resourceData, resourceConfiguration, resourceName) {
    this.resourceData = resourceData;
    this.resourceConfiguration = resourceConfiguration;
    this.resourceName = resourceName;
  }
}

describe('AdminTableComponent', () => {
  let component: AdminTableComponent;
  let fixture: ComponentFixture<AdminTableComponent>;
  let fakeAdminTableInfo: AdminTableInfo;

  beforeEach(async(() => {
    MockConfiguration
    .getAdminTestBedConfiguration()
    .configureTestingModule({
      declarations: [
        AdminTableComponent,
        AdminTableRowComponent,
       ],
      providers: [
        AdminTableInfo
       ]
    })
    .compileComponents();
  }));

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

    // Not sure i need to create an instance like this of the injectable
    fakeAdminTableInfo = fixture.debugElement.injector.get(AdminTableInfo);

    fixture.detectChanges();
  });

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

Я получаю ошибку:

 Can't resolve all parameters for AdminTableInfo:
(?, ?, ?).

Это означает, что я не внедряю AdminTableInfo при создании компонента. Кто-нибудь знает, как настроить юнит-тест для такого случая?

Answer 1

Для Jasmine/Karma вам нужны поставщики ваших услуг в.overrideComponent():

@Injectable()
export class AdminTableInfoSpy {
  resourceData;
  resourceConfiguration;
  resourceName;
  constructor(resourceData, resourceConfiguration, resourceName) {
    this.resourceData = resourceData;
    this.resourceConfiguration = resourceConfiguration;
    this.resourceName = resourceName;
  }
}

describe('AdminTableComponent', () => {
  let component: AdminTableComponent;
  let fixture: ComponentFixture<AdminTableComponent>;
  let fakeAdminTableInfo: AdminTableInfo;

  beforeEach(async(() => {
    MockConfiguration
    .getAdminTestBedConfiguration()
    .configureTestingModule({
      declarations: [
        AdminTableComponent,
        AdminTableRowComponent,
       ]
    })
    .overrideComponent(AdminTableComponent, {
      set: {
        providers: [
          { provide: AdminTableInfo, useClass: AdminTableInfoSpy }
        ]
      }
    })
    .compileComponents();
  }));

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

    // Not sure i need to create an instance like this of the injectable
    fakeAdminTableInfo = fixture.debugElement.injector.get(AdminTableInfo);

    fixture.detectChanges();
  });

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