如何在spec.ts文件中模拟/伪造组件实例的HTML代码(ng测试)

Question

My spec.ts file ：

describe('CenterPricesComponent', () => {
    let component: CenterPricesComponent;
    let fixture: ComponentFixture<CenterPricesComponent>;
    let service: MockPriceRulesService;
    let centersService: MockCentersService;
    beforeEach(async(() => {
        service = new MockPriceRulesService(null);
        centersService = new MockCentersService(null);
        TestBed.overrideProvider(PriceRulesService, { useValue: service });
        TestBed.overrideProvider(CentersService, { useValue: centersService});
        TestBed.configureTestingModule(testBed).compileComponents();
        fixture = TestBed.createComponent(CenterPricesComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;
    }));
.
.
.

在这里，我用我之前创建的假服务来模拟组件中使用的两个服务。我想知道是否可以使用此组件实例的 HTML 模板来做到这一点component .

编辑：

constructor(
    private priceruleService: PriceRulesService,
    private windowService: NbWindowService,
    private centerService: CentersService,
    private route: ActivatedRoute
  ) { }

Answer 1

如果你不想使用HTML，那么干脆不要使用测试台，它基本上就是用来使用它的。

let component: CenterPricesComponent = new CenterPricesComponent(
  // Your mocked dependencies
);

编辑

万一我不清楚，你需要把它弄脏。

let component: CenterPricesComponent = new CenterPricesComponent(
  // Your activated route
  { snapshot: { paramMap : { get: () => '', } } } as any
);