角度測試動態選項卡組件

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' }
]}