Kendo 对话框在角度单元测试用例中抛出异常

Question

当我尝试在角度测试用例中打开剑道对话框时，出现以下异常。

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>

2. employee.component.html

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

3. 员工详细信息.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>

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

}

5. 员工详细信息.组件.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);

  });
});

Answer 1

我用一个wrapperComponent修复了这个问题，特别是为了测试：

@Component({
  template: ` ....
  <div kendoDialogContainer></div>`,
})
export class TestWrapperComponent {}

describe('TestComponent', () => {
  let component: TestWrapperComponent;
  let fixture: ComponentFixture<TestWrapperComponent>;
  let dialogService: EditDialogService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        TestWrapperComponent,
        ...
      ],
      providers: [
        ....
      ],
    })
      .compileComponents();
    fixture = TestBed.createComponent(TestWrapperComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });