时间戳

首页 > 解决方案 > 我如何对使用 ngComponentOutlet 创建的角度组件进行单元测试？

angular - 我如何对使用 ngComponentOutlet 创建的角度组件进行单元测试？

问题描述

我有一个用 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，但我认为设置应该与 Jasmine/Karma 非常相似

这是我到目前为止的单元测试

@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。有谁知道如何为这种情况设置单元测试？

标签： angularunit-testingdependency-injectionjestjsng-component-outlet

解决方案

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

推荐阅读