Question

我使用thoughtram博客帖子使用Tab控件。这是同一个plnkr。

我试图为内部使用Tab Component的Tabs组件创建一个单元测试用例。我不确定如何使用module.exports = { 'Demo test' : function (browser) { console.log(browser.launchUrl); browser .url(browser.launchUrl) .end(); } };在Angular 4中执行此操作。

如何在Tabs Component中注入Tab，以便我可以覆盖其Jasmine和ngAfterContentInit()方法？

谢谢..

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

希望它会有所帮助！

组件Angular 4中组件的单元测试

1 个答案: