css 类的 Angular HostBinding 测试答案

【问题标题】：Angular HostBinding testing for css classcss 类的 Angular HostBinding 测试
【发布时间】：2019-08-02 19:06:57
【问题描述】：

我有一个带有加载、错误显示和实际内容的包装器。根据一些输入，我想显示一个或另一个。

我想测试是否添加了“centered__holder”类

组件：

@Component({
  selector: 'sd-ui-state-wrapper',
  templateUrl: './ui-state-wrapper.component.html',
  styleUrls: ['./ui-state-wrapper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UIStateWrapperComponent implements OnChanges {
  @Input() isLoading: boolean;
  @Input() errors: string[] | undefined;
  @HostBinding('class.centered__holder') centeredCss: boolean = false;

  [...]

  ngOnChanges(): void {
    this.centeredCss = this.isLoading || this.errors !== undefined && this.errors.length > 0;
  }
}

测试：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [UIStateWrapperComponent],
  })
    .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(UIStateWrapperComponent);
  component = fixture.componentInstance;
  component.errors = errorMock;
  fixture.detectChanges();
}));

it('should add centered__holder class', async (done) => {
  component.ngOnChanges();
  fixture.whenStable()
    .then(() => {
      console.log(fixture.debugElement.classes.centered__holder);
      console.log(component.centeredCss);

      expect(fixture.debugElement.classes.centered__holder)
        .toBeTruthy();
      done();
    });
});

但是控制台显示：真假我也试过fixture.whenRenderingDone()

如何等待 HostBinding 类被应用？

【问题讨论】：

标签： angular unit-testing

【解决方案1】：

fixture.nativeElement.classList.contains('centered__holder') 应该是您正在寻找的。除了其他绑定属性之外，还有更多关于夹具的内容。

【讨论】：