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)

组件详细信息如下

1. app.component.html

<div class="content" role="main">
  <div>
    <h1> Popup Model Testing: </h1> <app-employee> </app-employee>
  </div>
  <div kendoDialogContainer></div>
</div>

1. employee.component.html

<div class="employee">
    <h2> Employee Details: </h2><app-employee-details> </app-employee-details>
</div>

1. 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>

1. 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,});
  }

}

1. 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 (将#修改为@）