Check property of child component in parent component's spec

Question

I have a parent component and a child component. From the parent's spec file I'd like to test weather a property in the child component has been set.

In the ngOnInit() of ChildComponent I can console.log the value of myFormGroup.disabled and see the value I expect, but I'd like to confirm this in the spec of the parent.

describe('ParentComponent', () => {
  let component: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent],
      imports: [IonicModule.forRoot()],
    }).compileComponents();

    fixture = TestBed.createComponent(ParentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should disable the myFormGroup in child component', () => {
    expect(ChildComponent.prototype.myFormGroup.disabled).toBeTrue();
    // Cannot read property 'disabled' of undefined
  });
});

Answer 1

You can use the By.directive selector to select the child element.

Try this (follow comments with:!):

describe('ParentComponent', () => {
  let component: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;
  // !! have a handle on ChildComponent
  let childComponent: ChildComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent],
      imports: [IonicModule.forRoot()],
    }).compileComponents();

    fixture = TestBed.createComponent(ParentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    // !! get a handle on childComponent
    childComponent = fixture.debugElement.query(By.directive(ChildComponent)).componentInstance;
  }));

  it('should disable the myFormGroup in child component', () => {
    // !! change assertion
    expect(childComponent.myFormGroup.disabled).toBeTrue();
  });
});