Kendo UI Angular test

[Chris]

We have been working on a Angular 7 Kendo UI application and things are going well. The application compiles and runs fine.

We are now getting into Angular testing with the default Jasmine/Karma. First 'ng test' showed pages of issues. So I decided to start from scratch with a new Angular app and slowly copy over the functionality.

I modified the app.component.ts and its html which includes kendo-splitter and its kendo-splitter-pane

<kendo-splitter orientation="horizontal" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [selectable]="true" [expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of panelBarArray"
            ...... Removed for brevity
            >
                </kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </kendo-splitter-pane>
    <kendo-splitter-pane>
        <kendo-splitter orientation="vertical">
            <kendo-splitter-pane *ngIf="showNav" [scrollable]="false" [collapsible]="false" [resizable]="false" size="52px">
                ...... Removed for brevity
            </kendo-splitter-pane>
            <kendo-splitter-pane>
                <router-outlet></router-outlet>
            </kendo-splitter-pane>
        </kendo-splitter>
    </kendo-splitter-pane>
</kendo-splitter>

 

The output of Karma v4.1.0 

Failed: Template parse errors:
Can't bind to 'collapsible' since it isn't a known property of 'kendo-splitter-pane'.
1. If 'kendo-splitter-pane' is an Angular component and it has 'collapsible' input, then verify that it is part of this module.
2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("orientation="horizontal" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [ERROR ->][collapsible]="false" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
     "): ng:///DynamicTestModule/AppComponent.html@1:53
Can't bind to 'resizable' since it isn't a known property of 'kendo-splitter-pane'.
1. If 'kendo-splitter-pane' is an Angular component and it has 'resizable' input, then verify that it is part of this module.
2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("l" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [ERROR ->][resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [se"): ng:///DynamicTestModule/AppComponent.html@1:75
Can't bind to 'selectable' since it isn't a known property of 'kendo-panelbar'.
1. If 'kendo-panelbar' is an Angular component and it has 'selectable' input, then verify that it is part of this module.
2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [ERROR ->][selectable]="true" [expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of pane"): ng:///DynamicTestModule/AppComponent.html@3:24
Can't bind to 'expandMode' since it isn't a known property of 'kendo-panelbar'.
1. If 'kendo-panelbar' is an Angular component and it has 'expandMode' input, then verify that it is part of this module.
2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [selectable]="true" [ERROR ->][expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of panelBarArray"
         "): ng:///DynamicTestModule/AppComponent.html@3:44
Can't bind to 'selected' since it isn't a known property of 'kendo-panelbar-item'.
1. If 'kendo-panelbar-item' is an Angular component and it has 'selected' input, then verify that it is part of this module.
2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("id]="route.path"
            [title]="route.data.title ? route.data.title : route.path"
            [ERROR ->][selected]="'/' + route.path == selectedId"
            [routerLink]="route.children?null:route.path""): ng:///DynamicTestModule/AppComponent.html@7:12
Can't bind to 'expanded' since it isn't a known property of 'kendo-panelbar-item'.
1. If 'kendo-panelbar-item' is an Angular component and it has 'expanded' input, then verify that it is part of this module.
2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("' + route.path == selectedId"
            [routerLink]="route.children?null:route.path"
            [ERROR ->][expanded]="'/' + route.path == selectedParent"
            (click)="itemClick(route.children?null:ro"): ng:///DynamicTestModule/AppComponent.html@9:12

And many more lines.

Do you have advice on proceeding with testing on components that include Kendo UI elements?

Do you have documentation on Angular testing for Kendo UI Angular usage?

[Chris]

Ok - I Googled for a while...

Protractor doesn't get the needed imports
by itself. So just add them on the app.component.spec.ts
and you're good to go.

 

so in my app.component.spec.ts I modified:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        RouterTestingModule,
        LayoutModule,
        ButtonsModule,
        MenusModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [LdapService, LdapGuard, NavService, UistateService]
    }).compileComponents();
  }));

https://github.com/telerik/kendo-angular/issues/378#issuecomment-286468005

[Svet]

Hi Chris,

I am glad that you managed to move forward with this case and thank you for the provided feedback.

Let us know in case any further assistance is required for Kendo UI for Angular.

Regards,
Svetlin
Progress Telerik