檢查父組件規范中子組件的屬性

Question

我有一個父組件和一個子組件。 我想從父級的規范文件中測試是否設置了子組件中的屬性。

在 ChildComponent 的ChildComponent ngOnInit()中，我可以 console.log myFormGroup.disabled的值並查看我期望的值，但我想在父級的規范中確認這一點。

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

您可以使用By.directive選擇器來選擇 select 子元素。

試試這個（跟隨評論：！）：

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