角度测试动态选项卡组件

Question

我有一个TabsComponent ，它接受TabComponent作为内容子级。 我的目标是测试TabsComponent ，因此我创建了一个包装器组件：

const tabs = [
  { id: '1', title: 'title1', content: 'content1' },
  { id: '2', title: 'title2', content: 'content2' }
]

@Component({
  selector: 'my-tabs-test-wrapper',
  template: `
       <my-tabs>
         <my-tab *ngFor="let tab of tabs" [tabId]="tab.id" [tabTitle]="tab.title">
            {{ tab.content }}
         </my-tab>
       </my-tabs>
`})
class TabsTestWrapper {}

我的测试之一是检查是否呈现了TabComponent类型的两个组件，但是我的测试失败了-我得到的是零个项目，而不是两个。 但是，当我用两个硬编码的my-tab项替换ngFor循环时，将计数两个项并且测试通过。 如何使它与动态列表一起使用？

谢谢。

Answer 1

理想情况下，这不是测试组件的方法。 您不必创建一个组件来测试另一个。

但是，对于您的特定问题，请更新代码以将选项卡作为组件的属性而不是组件外部的const包含在内。 Angular仅将组件上的属性用于其数据绑定。 您的const值在该组件之外，因此不会在该组件的渲染过程中使用。

@Component({
  selector: 'my-tabs-test-wrapper',
  template: `
       <my-tabs>
         <my-tab *ngFor="let tab of tabs" [tabId]="tab.id" [tabTitle]="tab.title">
            {{ tab.content }}
         </my-tab>
       </my-tabs>
`})
class TabsTestWrapper {
tabs = [
  { id: '1', title: 'title1', content: 'content1' },
  { id: '2', title: 'title2', content: 'content2' }
]}