Angular 2：如何使用緊密耦合的父組件和子組件測試標籤組件

Question

我沿着Thoughtram's article跟着創建了一個標籤組件。

它基本上創建了兩個組件：Tab和Tabs。此處Tabs組件是Tab組件的父級/主機，用於將所有選項卡組合在一起。我需要能夠對這兩個組件進行單元測試。

是在我腦海中的測試場景是：

• Tab必須注入，它依賴於父組件：Tabs
• 的第一個標籤必須被默認選擇。
• 功能TabsaddTab必須從Tab組件
• 函數調用一次selectTab必須在相應的選項卡，依次功能應設置選項卡被激活，所有其他選項卡未激活狀態的點擊調用。
• 並且可以有幾個，我想...

問題是，我不知道如何測試這些東西應該是什麼做的好方法。我一直在通過角度文檔，但是我無法理解這種情況。有人可以幫忙嗎？

Answer 1

單元測試已經在名稱中。你只想測試一個單元。您的Tab組件應該單獨測試。它沒有真正的依賴於你的Tabs組件。

因此，一個測試可能是這個樣子：

@Component({ 
    template: `<tab tabTitle="tabTitle">{{ content }}</tab>` 
}) 
class TestHostComponent { 
    @ViewChild(TabComponent) tab: TabComponent; 
    content: string = ''; 
    tabTitle: string = 'foo'; 
} 

describe('TabComponent', function() { 
    let fixture: ComponentFixture<TestHostComponent>; 
    let comp: TestHostComponent; 
    let debugElement: DebugElement; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ TestHostComponent ] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(TestHostComponent); 
     comp = fixture.componentInstance; 
     debugElement = fixture.debugElement; 
     fixture.detectChanges(); // ngOnInit 
    }); 

    it('should create the component',() => expect(comp).toBeDefined()); 

    it('should change the title',() => { 
     expect(comp.tab.tabTitle).toBe('foobar'); 
     comp.tabTitle = 'bar'; 
     fixture.detectChanges(); 
     expect(comp.tab.tabTitle).toBe('bar'); 
    }); 

    it('should change the content',() => { 
     comp.content = 'foobar'; 
     fixture.detectChanges(); 
     let tabTextContent: string = debugElement.query(By.css('tab')).nativeElement.textContent; 
     expect(tabTextContent).toBe('foobar'); 
    }); 
}); 

當然，如果你真的想在同一時間來測試，你以類似的方式做到這一點，只是改變你的testhost而模板爲類似

@Component({ 
    template: `<tabs><tab tabTitle="tabTitle">{{ content }}</tab></tabs>` 
}); 

和調整ViewChilds和你的方式處理ngOnInit和AfterViewInit。

但正如我所說，這是不推薦的（你可以做，在你的TabsComponent測試，以檢查他們是否有一個或多個TabComponents裏面你Tabs工作正常，但不是在你的TabComponent）。因爲它使得測試更加困難和更具體（你必須控制angulars生命週期鉤子等），每個測試集合的大小越來越混亂（這是不好的，因爲你必須改變最東西當你對組件進行修改的時候），並且由於它是一個獨立的組件，所以你可以在你希望將其包含在其他地方的場景中運行，並且也必須覆蓋它。

希望我能幫助你。