How do i Unit test an angular component created with ngComponentOutlet?

Question

I have a component created with ngComponentOutlet

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

and the component itself

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();
    });
  }

...

How do i set up unit-test? we are using Jest but i think the set up should be fairly similar to Jasmine/Karma

This is my unit test so far

@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();
  });
});

I am gettin nthe error:

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

which means i am not injecting AdminTableInfo when the component is created. Does anyone know how to set up unit test for such case?

Answer 1

for Jasmine/Karma you need providers your service in .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();
  });
});