检查父组件规范中子组件的属性

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