kendo-editor: add text when testing with Cypress

[Peppe]

Hi,

I've added an editor as following

<kendo-editor formControlName="note" [iframe]="false"></kendo-editor>

 

I'm trying to interact with it while testing with Cypress but no luck, i.e the following doesn't work

const input = cy.get('kendo-editor[formcontrolname=note]');
input.type('sample text');

the error is

Timed out retrying after 4000ms: cy.type() failed because this element:

<kendo-editor _ngcontent-yle-c1049="" formcontrolname="note" style="height: 180px;" _nghost-yle-c961="" ng-reflect-name="note" ng-reflect-iframe="false" dir="ltr" ariadisabled="true" class="k-editor k-state-disabled ng-untouched ng-pristine">...</kendo-editor>

has CSS pointer-events: none

pointer-events: none prevents user mouse interaction.

Could you please provide some hints on how to do this? Do we have guidelines/howtos for Cypress e2e testing of Kendo UI for Angular?

Thanks

[Martin Bechev]

Hi Peppe,

In general, the majority of the Kendo Angular components are heavily tested to the smallest of details with both unit tests and e2e tests on our side (we are using Jest and NX to test the component functionalities). The implemented tests can be found in the components' source code. 

Please check the following article to see how the source code of a component can be obtained:

https://www.telerik.com/kendo-angular-ui/components/installation/source-code/

This would help you to see the tests we have for the toolbar in our kendo-angular-private repo. The tests are located in libs/editor/test/ folder.

Implementing tests, as well as custom implementation for clients, based on use case scenarios falls outside the scope of the support service. Here is part of the test implemented for Editor that has been used in Reactive form:

describe('reactive forms', () => {
        for (let iframeMode of [true, false]) {
            describe(`[iframe]="${iframeMode}" : inside a form`, () => {

                let editorInstance: EditorComponent;
                let fixture: ComponentFixture<TestComponent>;

                beforeEach(() => {
                    TestBed.overrideComponent(TestComponent, {
                        set: {
                            template: `
                                <form #form [formGroup]="formGroup">
                                    <kendo-editor [formControlName]="'control'" [iframe]="iframe"></kendo-editor>
                                </form>
                            `
                        }
                    });

                    fixture = TestBed.createComponent(TestComponent);
                    fixture.componentInstance.iframe = iframeMode;
                    editorInstance = fixture.debugElement.query(By.css('kendo-editor')).componentInstance;
                });

                it('should set initial value using FormControl inside a FormGroup', () => {
                    const testValue = '<p>test</p>';
                    const control = new FormControl(testValue);

                    fixture.componentInstance.formGroup = new FormGroup({ control });

                    fixture.detectChanges();

                    expect(editorInstance.value).toBe(testValue);
                });
...

I hope this sheds some light on the case.

Regards,
Martin Bechev
Progress Telerik