我正在下面的链接中测试自定义对话框。 http://angular-tips.com/blog/2018/02/testing-angular-material-dialog-templates/ 在我的对话框模板中,我使用了另一个自定义组件“ DialogFileImportComponent”,如下面的代码
<div class="header-row">
<span class="dialog-title">Edit File</span>
<mat-icon class="cursor-pointer clear" (click)="close()">clear</mat-icon>
</div>
<file-form (fileSubmit)="processImport($event)" (fileString)="validateFile($event)"
[isFromEdit]="true" [feedID]="data.fileFeedId" [feedDescription]="data.fileFeedName" [comments]="data.comments"
[tempUrl]="data.tempUrl" [descList]="data.descList" [fileName]="data.fileName" [fileSubmitionStatus]="data.fileSubmissionStatus"
[fileUploadError]="data.fileUploadError" ></file-form>
我已经完成了他们提到的所有事情,如下所述。另外,我在导入部分添加了ImportFileFormModule'
@Component({
template: ''
})
class NoopComponent { }
const TEST_DIRECTIVES = [
DialogFileImportComponent,
NoopComponent
];
@NgModule({
imports: [MatIconModule, MatDialogModule, NoopAnimationsModule,ImportFileFormModule],
exports: TEST_DIRECTIVES,
declarations: TEST_DIRECTIVES,
entryComponents: [
DialogFileImportComponent
],
})
class DialogTestModule { }
并按如下所示创建测试床
beforeEach(() => {
TestBed.configureTestingModule({
imports: [DialogTestModule,ImportFileFormModule],
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
providers: [
{
provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
return { getContainerElement: () => overlayContainerElement };
}
}
]
});
dialog = TestBed.get(MatDialog);
fixture = TestBed.createComponent(NoopComponent);
});
并如下添加测试套件
it('shows information with alert details', () => {
const config = {
data: {
type: 'alert',
flag: 'saveasset',
title: 'Confirmation',
content: `Optional information has not been entered for
assets. Do you wish to wish to continue without entering these information ?`,
buttonBlock: {
saveButtonText: 'Ok',
closeButtonText: 'Cancel'
},
tempUrl: 'sample',
descList: ['aaa','bbbb'],
fileName: null,
fileSubmissionStatus: null,
fileUploadError: null,
fileFeedId:'',
comments:'asasas'
}
};
dialog.open(DialogFileImportComponent, config);
fixture.detectChanges(); // Updates the dialog in the overlay
const h2 = overlayContainerElement.querySelector('#mat-dialog-title-0');
const button = overlayContainerElement.querySelector('button');
expect(h2.textContent).toBe('Confirmation');
expect(button.textContent).toBe('Ok');
});
在运行测试用例时出现错误: TypeError:无法读取null的属性'textContent'