如何为 MatDialog 创建单元测试

Question

如何为以下角码创建单元测试：

提前致谢

export class CancelGroup1PolicyDialogComponent implements OnInit {
  [x: string]: any;

  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<CancelGroup1PolicyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, private policyEnquiryService: PolicyEnquiryService) { }

  ngOnInit() {

  }

  openCancelDetailsDialog(policyResult: IPolicyResult): void {
    const dialogRef = this.dialog.open(CancelGroup1DetailsDialogComponent, {
      data: {
        policyResult
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.dialogRef.close(result);
       } else {
        this.dialogRef.close();
       }

    });
  }
}

根据 Stackoverflow 的要求添加更多详细信息。

Answer 1

您可以尝试以下方法：

it('should show Cancel Details Dialog', async(() => {
    component.openCancelDetailsDialog(policyResult);
    fixture.detectChanges();
    fixture.whenStable().then(() => {

        let dialogBox: HTMLCollectionOf<Element> = document.getElementsByClassName('.class-name-available-on-dialog');
        expect(dialogBox).not.toBeNull();

        let restoreText = dialogBox[1].querySelector('.your-dialog-content-class').innerHTML;
        expect(restoreText.toUpperCase()).toContain('your text here');
    });

}));

编辑：

你也可以尝试如下：

describe('Dialog Test', () => {
    let component: CancelGroup1PolicyDialogComponent;
    let fixture: ComponentFixture<CancelGroup1PolicyDialogComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                TestModule
            ],
            providers: [],
        });
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(CancelGroup1PolicyDialogComponent);
        component = fixture.componentInstance;

    });


    it('should show Cancel Details Dialog', async(() => {
        component.openCancelDetailsDialog(policyResult);
        fixture.detectChanges();
        fixture.whenStable().then(() => {

            let dialogBox: HTMLCollectionOf<Element> = document.getElementsByClassName('.class-name-available-on-dialog');
            expect(dialogBox).not.toBeNull();

            let restoreText = dialogBox[1].querySelector('.your-dialog-content-class').innerHTML;
            expect(restoreText.toUpperCase()).toContain('your text here');
        });

    }));
});

@NgModule({
    imports: [],
    declarations: [],
    entryComponents: [
        CancelGroup1DetailsDialogComponent,
    ],
})
class TestModule {
}