當組件被標記為 ChangeDetectionStrategy.OnPush 時，單元測試失敗

Question

我有角分量 l

@Component({
  selector: 'aas-add-option',
  templateUrl: './add-option-modal.component.html',
  styleUrls: ['./add-option-modal.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

有表格組

this.formBuilder.group({
      newOptionInput: new FormControl('', [
        Validators.required,
        Validators.maxLength(150),
        Validators.pattern(this.htmlPattern),
      ]),
      newOptionHint: new FormControl(''),
    });

============================== .html 文件

<vt-modal-footer>
    <button
      vtButton
      ot-auto-id="AAResultsAddModalCancelButton"
      [disabled]="isLoading"
      (click)="closeModal()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      vtButton
      color="neutral"
      class="slds-m-right_medium"
      ot-auto-id="AAResultsAddModalSaveAndAddAnotherButton"
      [disabled]="
        !optionsForm?.get('newOptionInput').value?.trim() ||
        !optionsForm?.get('newOptionInput').valid   <--HERE BUTTON DISABLED CHECK
      "
      (click)="onSaveAndAddAnother()"
    >
      {{ 'SaveAndAddAnother' | translate }}
    </button>
    <button
      vtButton
      color="primary"
      *ngIf="!isLoading"
      ot-auto-id="AAResultsAddModalSaveButton"
      [disabled]="
        !optionsForm?.get('newOptionInput').value?.trim() ||   <--HERE BUTTON DISABLED CHECK
        !optionsForm?.get('newOptionInput').valid
      "
      (click)="addOption(true)"
    >
      {{ 'Save' | translate }}
    </button>
  </vt-modal-footer>

規格

fit('should saveNewOptionButton and saveAndAddAnotherButton should get enabled, when the value is set in input', () => { 
    const saveNewOptionButtonElement = fixture.debugElement.query(
      By.css('button[ot-auto-id="AAResultsAddModalSaveButton"]')
    );
    const saveAndAddAnotherButtonElement = fixture.debugElement.query(
      By.css('button[ot-auto-id="AAResultsAddModalSaveAndAddAnotherButton"]')
    );

    //fixture.nativeElement.querySelector('[ot-auto-id="AAResultsNewOptionInput"]').value = 'ravi'; // basically I want to test, by setting like this.
     
    component.optionsForm.controls.newOptionInput.setValue('ravi'); //trying this too
    fixture.detectChanges();
    expect(component.optionsForm.valid).toBeTruthy(); <- got failed 
    expect(saveNewOptionButtonElement.nativeElement.disabled).toBe(false); <- got failed 
    // expect(saveAndAddAnotherButtonElement.nativeElement.disabled).toBe(false); <- got failed 
  });

現在我需要通過將值設置為輸入 DOM 來對 Formcontrol 進行單元測試，並期望按鈕被啟用，因為該值是在規范中設置的，

但是，如果我從@Component 中刪除changeDetection: ChangeDetectionStrategy.OnPush ，則一切正常，但我希望更改檢測策略位於組件上。

所以問題是為什么當@Component 有changeDetection: ChangeDetectionStrategy.OnPush時我的規范會失敗，以及我應該進行什么更改以使其在我的規范中工作

Answer 1

在測試中使用 OnPush 組件時，您應該意識到 fixture.detectChanges fixture.detectChanges()不會在 undeflying 組件的視圖上觸發更改檢測，而是在宿主視圖上觸發。

為了糾正這種行為，您可以像這樣獲取實際組件的 changeDetector：

// fixture.changeDetectorRef.markForCheck();
const cdRef = fixture.componentRef.injector.get(ChangeDetectorRef);
cdRef.detectChanges();