javascript - 使用@ContentChildren 对查询列表进行单元测试

Question

我正在尝试为具有子组件并使用 ng-content 注入(inject)的组件编写单元测试.我试图在我的测试中获取组件的查询列表，以便我可以在下面测试这个函数，但似乎无法填充 QueryList我的单元测试中的变量。

  @ContentChildren(TabsContentComponent, { descendants: true, read: TabsContentComponent }) tabContent: QueryList<TabsContentComponent>;
onTabChange($event) {
this.tabContent.toArray().forEach((tab, index) => {
  tab.isActive = false;
  if ($event.value === tab.value) {
    tab.isActive = true;
  }
});

}

这是我的组件:我有一个名为 TabsContentContainer 的组件，它包含另一个名为 Tabs 的组件。看起来像这样:

<div class="flex flex-direction-column tabs-container">
<app-tabs (tabChange)='onTabChange($event)' [tabs]="tabs"></app-tabs>
<ng-content></ng-content>

我如何使用 TabsContentContainer我这样做的组件(这只是它的模拟版本减去了 app-tabs 组件):

<app-tabs-container>
<app-tabs-content>content goes here</app-tabs-content>
<app-tabs-content>content goes here</app-tabs-content>
<app-tabs-content>content goes here</app-tabs-content>

我试过关注 another answer弄清楚该怎么做，因为这是相当古老的答案，但我似乎无法让我的模拟组件返回我的 QueryList的 app-tabs-content .

这是我的规范文件:

    @Component({
  selector: 'app-tabs-container-mock-component',
  template: `<app-tabs-container>
    <app-tabs-content></app-tabs-content>
    <app-tabs-content></app-tabs-content>
    <app-tabs-content></app-tabs-content>
  </app-tabs-container>`
})
export class TabsContainerMockComponent { }

fdescribe('TabsContainerComponent', () => {
  let component: TabsContainerComponent;
  let component2: TabsContainerMockComponent;
  console.log(component2);
  let fixture: ComponentFixture<TabsContainerComponent>;
  let fixture2: ComponentFixture<TabsContainerMockComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TabsContainerComponent, TabsContainerMockComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TabsContainerComponent);
    fixture2 = TestBed.createComponent(TabsContainerMockComponent);
    console.log(fixture2);
    component = fixture.componentInstance;
    component2 = fixture2.componentInstance;
    fixture.detectChanges();
    fixture2.detectChanges();
  });

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

  it('should show the correct content when changing tabs', () => {
    const container = fixture.debugElement.children[0].componentInstance;
    debugger;
    console.log(container);
  });

我尝试过的:

我已经尝试模拟我的组件并尝试访问它，但是这似乎没有用，因为我收到错误提示 Component 'TabsContainerMockComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration

这让我添加了一个模拟 NgModule但这也没有用，而且似乎也不对。

我不知道该尝试什么，因为我似乎无法得到 component.tabContent等于QueryList的 app-tabs-content .

Answer 1

问题是，现在您的 TabsContainerMockComponent 实际上是 TabsContainerComponent 之上的包装器。为了访问 TabsContainerMockComponent 中的 TabsContainerComponent(可能应该重命名为 TestHostTabsContainerComponent)，您需要获取一个持有 DebugElement，其中一个子项(可能是第一个子项)将成为您的 TabsContainerComponent。

您需要在顶部有一个变量来保存您的 TabsContainerComponent:

let tabsContainerComponent: TabsContainerComponent;

在您的 beforeEach 中执行此操作:

tabsContainerComponent = fixture2.debugElement.children[0].componentInstance;

然后您可以访问您的 QueryList，因为它是 TabsContainerComponent 的公共(public)属性:

tabsContainerComponent.tabContent

在此处阅读有关 DebugElement 的更多信息:https://angular.io/api/core/DebugElement