Example projects should have unit tests

[rmorrise]

As a responsible developer for an enterprise application, I want to unit test my UI code.

Please make it easier for me by showing me how code that uses Kendo should be unit tested in your example projects.

UI components in my app that include Kendo components are consistently the hardest to test. Kendo components often include nested templates, animations and async behaviors that are difficult to mock or handle in the test environment. The Kendo docs don't really cover unit testing that well, either.

In the example projects for kendo-angular, please include unit test .spec.ts files for all UI components that use kendo. These tests should exercise the client app component's functionality completely, including interactions with child components. Using CUSTOM_ELEMENTS_SCHEMA is not a good practice, because a lot of the actual template code in the UI component will not get exercised.

As an example, take the dashboard component from the PWA example: https://github.com/telerik/kendo-angular/blob/master/examples/projects/integration-pwa/src/app/dashboard/dashboard.template.html

A spec for this dashboard component should have a unit test for each tab - selecting the tab and verifying that the <app-statistics> component appears in the DOM and has the correct inputs. The app-statistics component can be mocked like:

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'app-statistics'
})
// tslint:disable-next-line:directive-class-suffix
export class StatisticsDirectiveStub {
  @Input() loading: boolean;
   //...
}

and verified like:

    const statsElement = fixture.debugElement.query(By.directive(StatisticsDirectiveStub));
    expect(statsElement ).toBeTruthy();
    const stats = statsElement.injector.get(StatisticsDirectiveStub);
    expect(stats.loading).toEqual(true);

The purpose of the change would be to show users of your libraries how to properly test a component which uses the TabStrip (in this example), and encourage best practices for people looking at the examples.

[meriturva]

I think the best is to have component harnesses https://github.com/telerik/kendo-angular/issues/2716

[Raisolution]

To be tracked in the Feedback Portal:

https://feedback.telerik.com/kendo-angular-ui/1483985-request-for-angular-test-harnesses-for-kendo-components