對組件4中的組件進行單元測試

Question

我正在使用Tab控件使用thoughtram博客文章。這裏是plnkr爲相同。

我想爲內部使用Tab組件的Tabs組件創建一個單元測試用例。不知道如何在Angular 4與Jasmine做到這一點。

我如何在選項卡組件中注入Tab以便我可以覆蓋其ngAfterContentInit()和selectTab()方法？

謝謝..

Answer 1

我將單元測試tabs通過包裝成一個測試組件和運行斷言上，如下圖所示：

@Component({ 
    template: ` 
    <tabs> 
     <tab title="tab-1"></tab> 
     <tab title="tab-2"></tab> 
    </tabs>`, 
}) 
class TestTabsComponent { } 


describe("Component: Tabs",() => { 
    let component: TestTabsComponent; 
    let fixture: ComponentFixture<TestTabsComponent>; 

    beforeEach(() => { 
    TestBed 
     .configureTestingModule({ 
     declarations: [ 
      TabsComponent, 
      TabComponent, 
      TestTabsComponent, 
     ], 
     }); 

    fixture = TestBed.createComponent(TestTabsComponent); 
    component = fixture.componentInstance; 
    }); 

    it('should have tab title', async(() => { 
    fixture.detectChanges(); 
    let compiled = fixture.debugElement.queryAll(By.css('tab')); 
    expect(compiled[0].nativeElement.title).toBe('tab-1'); 
    expect(compiled[1].nativeElement.title).toBe('tab-2'); 
    })); 

    afterEach(() => { 
    fixture.destroy(); 
    }); 
}); 

希望這將有助於！