Hi,
I am getting following exception when I tried to open dialog in agular unit test cases
Exception:
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)
Details are below:
1- App Component:
<div class="content" role="main">
<div>
<h1> Testing Popup Model Testing: </h1> <app-employee> </app-employee>
</div>
<div kendoDialogContainer></div>
</div>
2- Employee Component:
<div class="employee">
<h2> Employee Details: </h2><app-employee-details> </app-employee-details>
</div>
3- Employee Details Component:
<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.ts file
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- Employee details spec.ts file
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);
});
});
P.S: Note: I don’t want to add <div kendoDialogContainer></div> in employee details html file.
Please let me know if anyone need additional information, thanks for you help in advance.