对组件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(); 
    }); 
}); 

希望这将有助于！