Unit test for Component within component Angular 4

Question

I am using Tab control using the thoughtram blog post. Here is the plnkr for the same.

I was trying to create a unit test cases for the Tabs component which internally using Tab Component. And not sure how I can do it in Angular 4 with Jasmine.

How I can inject Tab in Tabs Component so that I could cover its ngAfterContentInit() and selectTab() methods?

Thanks..

I don't know if this thread will help. Let me know..https://stackoverflow.com/questions/35975879/angular2-test-how-do-i-mock-sub-component — JGFMK, Jul 26 '17 at 10:48
Is there a reason that you are not testing the `Tab` component separately to the `Tabs` component? I think that would be a better option — 0mpurdy, Jul 26 '17 at 12:32
In order to test `Tabs` component, you have to pass `Tab` collection as well. And that is what my question was; how I can pass it to `Tabs` component. — , Jul 26 '17 at 12:59

score 1 · Accepted Answer · answered Jul 27 '17 at 08:26

I would unit test tabs by wrapping into a test component and run assertion on that, like below:

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

Hope it would help!

Thanks.. I got 100% coverage after this. – Jul 27 '17 at 08:50 — , Jul 27 '17 at 08:50

Unit test for Component within component Angular 4

1 Answers1