如何解决Kendo对话框在角度单元测试用例中引发异常
尝试在角度测试用例中打开剑道对话框时出现以下异常。
context.js:265 ERROR Error:
Cannot attach dialog to the page.
Add an element that uses the kendoDialogContainer directive,or set the 'appendTo' property.
See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.
at DialogService.open (index.js:1171)
at EmployeeDetailsComponent.openAddressModal (employee-details.component.ts:19)
组件详细信息如下
- app.component.html
<div class="content" role="main">
<div>
<h1> Popup Model Testing: </h1> <app-employee> </app-employee>
</div>
<div kendoDialogContainer></div>
</div>
- employee.component.html
<div class="employee">
<h2> Employee Details: </h2><app-employee-details> </app-employee-details>
</div>
- employee-details.component.html
<div>
Ram: <button class="addButton" (click)="openAddressModal(addressDialogContent,addressDialogActions)"> Add Address </button>
</div>
<ng-template #addressDialogContent>
Enter the address: <input type="text" id="address"/>
</ng-template>
<ng-template #addressDialogActions>
<button kendobutton (click)="close()">No</button>
<button kendobutton (click)="AddAddress();" primary="true">Yes</button>
</ng-template>
- employee-details.component.ts文件
export class EmployeeDetailsComponent implements OnInit {
currentDialog;
constructor(private readonly dialogService: DialogService) { }
ngOnInit(): void { }
public AddAddress() { this.close(); }
public close() { if (this.currentDialog) { this.currentDialog.close(); }
}
openAddressModal(contentTemplate: TemplateRef<any>,actionstemplate: TemplateRef<any>)
{
this.currentDialog = this.dialogService.open({
title: 'Address',content: contentTemplate,actions: actionstemplate,minWidth: 350,minHeight: 150,});
}
}
- employee-details.component.spec.ts
describe('EmployeeDetailsComponent',() => {
let component: EmployeeDetailsComponent;
let fixture: ComponentFixture<EmployeeDetailsComponent>;
beforeEach(async(() => {
Testbed.configureTestingModule({
declarations: [ EmployeeDetailsComponent ],providers: [DialogService,DialogContainerService],imports: [CommonModule,FormsModule]
})
.compileComponents();
}));
beforeEach(() => {
fixture = Testbed.createComponent(EmployeeDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should open the the address popup model',() => {
const buttonElement = fixture.debugElement.query(By.css('.addButton'));
buttonElement.triggerEventHandler('click',null);
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。