NG0100：Angular 单元测试用例中的 ExpressionChangedAfterItHasBeenCheckedError

Question

运行单元测试用例时出现以下错误，使用 Angular 8 时通过了这些单元测试用例，在最近的 Angular 12 升级后，出现以下错误。 NG0100：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。 以前的值：'真'。 当前值：'false'.. 在https://angular.io/errors/NG0100找到更多。 我尝试在规范文件中检测 changeDetectors 并尝试检查 fixture.whenStable()。 但没有人解决这些问题。 有人可以指出我在这里做错的地方吗？

这是我的组件代码

  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  forwardRef, HostBinding,
  Input,
  ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ui-checkbox',
  template: `
      <label #checktext (keyup)="changeVal($event)" class="container">
          <ng-content></ng-content>
          <input type="checkbox" aria-label="checkbox" [(ngModel)]="value" [required]="required"
                 [disabled]="isDisabled" (change)="change()">
          <span tabindex="0" [attr.aria-label]="checkAria" class="checkmark"></span>
      </label>
  `,
  styleUrls: ['checkbox.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxComponent),
      multi: true
    }
  ]
})
export class CheckboxComponent implements ControlValueAccessor {

  value: boolean = true;
  checkAria: string = 'checkbox';
  @Input()
  required = false;

  @Input()
  unCheckOnDisabled = true;

  isDisabled = false;
  @ViewChild('checktext', {static: false}) textElement: ElementRef;

  @Input()
  set disabled(isDisabled: boolean) {
    this.isDisabled = isDisabled;
    if (this.isDisabled && this.value && this.unCheckOnDisabled) {
      this.writeValue(false);
      this.change();
    }
  }

  constructor(private changeDetector: ChangeDetectorRef) {
  }

  propagateChange = (value: boolean) => { /**/
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched(fn) { /**/
  }

  writeValue(value: boolean) {
    this.value = value;
    this.changeDetector.markForCheck();
  }

  change() {
    this.propagateChange(this.value);
  }

  changeVal(event: KeyboardEvent) {
    if (event.key === 'Enter' || event.keyCode === 32) {
      this.textElement.nativeElement.click();
    }
  }

  ngAfterViewInit() {
    this.changeDetector.detectChanges();
    this.checkAria = String(this.textElement.nativeElement.textContent);
  }

  @HostBinding('attr.aria-checked')
  get ariaChecked() {
    return this.value;
  }

  @HostBinding('attr.role')
  get ariaRole() {
    return 'checkbox';
  }

}

这是我的规范文件

import { prepareTest, TestObjects } from '../test/test-util';
import { CheckboxComponent } from './checkbox.component';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  template: `
    <ui-checkbox [(ngModel)]="value" [disabled]="disabled" [unCheckOnDisabled]="unCheckOnDisabled">
      <span class="click me">Test content</span>
    </ui-checkbox>
  `
})
class CheckboxTestComponent {
  value = false;
  unCheckOnDisabled = true;
  disabled = false;
}


describe('Colored checkbox component', () => {

  const test = new TestObjects<CheckboxTestComponent>();

  beforeEach(prepareTest(CheckboxTestComponent, test,
    CheckboxComponent, FormsModule));
   it('should Uncheck the checkBox on disable', () => {
    const innerContent = test.nativeElement.querySelector<HTMLElement>('span.click.me');
    expect(test.component.value).toBe(false);
    innerContent.click();
    test.fixture.detectChanges();
    expect(test.component.value).toBe(true);
    test.component.disabled = true;
    test.component.value = true;
    test.fixture.detectChanges();
    expect(test.component.value).toBe(false);
  });

   it('should not uncheck the checkBox on disable', () => {
    const innerContent = test.nativeElement.querySelector<HTMLElement>('span.click.me');
    expect(test.component.value).toBe(false);
    innerContent.click();
    test.fixture.detectChanges();
    expect(test.component.value).toBe(true);
    test.component.disabled = true;
    test.component.value = true;
    test.component.unCheckOnDisabled = false;
    test.fixture.detectChanges();
    expect(test.component.value).toBe(true);
  });
});