Karma + AngularJS + Kendo: Kendo-grid testing is not working

Question

My project is using AngularJS + Kendo-UI. And I'm trying to integrate Karma into the existing project. I can test directives and components that I build is rendered in the test. But when I try to load the kendo-grid this never gets rendered.

My Karma Configuration:

module.exports = function (config) {
    config.set({
        basePath: '../',
        autoWatch: true,
        singleRun: false,
        frameworks: ['jasmine'],
        browsers: ['PhantomJS', 'Chrome'],
        files: [
            'vendor/jquery/jquery-2.1.1.js',
            'vendor/angular/angular.js',
            'vendor/angular/angular-route.js',
            'vendor/kendo/js/kendo.all.min.js',
            'vendor/angular-kendo/angular-kendo.js',
            'vendor/test/**/*.js',
            'src/**/*.js',
            'src/*.js',
            'test/**/*.js',
            'test/*.js',
            'src/widgets/**/*.html',
            'src/widgets/*.html'
        ],

        reporters: ['progress'],

        preprocessors: {
            'src/widgets/**/*.html': ['ng-html2js']
        }
    })
};

The output for all my existing variables is given, but no child node under kendo-grid is shown.

The output of the directive is given below:

<!-- ngIf: title --><h1 id="gridTitle" ng-if="title" class="ng-binding ng-scope">This is a sample grid using Widget Factory</h1><!-- end ngIf: title -->
    <hr>
    <div class="pull-right">
        <!-- ngIf: exportOptions -->
    </div>
</div>
<div class="row">
    <div id="grid" kendo-grid="" k-options="options"></div>
</div>

Please note that the div with id="grid" is empty with no child, which leads me to believe that kendo is not integrated.

Note: I can have the code working for the application itself, but I cannot test using the karma framework.

Answer 1

I found out the issue. I was missing a $timeout.flush(); after the scope.$digest();

I'm still not sure why that is needed but at least it fixed my problem.

Please find below my configuration for the jasmine test:

'use strict';

describe('grid scenarios', function () {

    var el, scope;

    beforeEach(module("widgetFactory"));
    beforeEach(module("src/widgets/grid/grid.html"));

    beforeEach(inject(function ($compile, $rootScope, $timeout) {
        scope = $rootScope;

        scope.options1 = {
            pageable: false,
            columns: [
                {
                    field: "title",
                    title: "Title",
                    width: "120px"
                },
                {
                    field: "duration",
                    title: "Duration",
                    width: "120px"
                },
                {
                    field: "percentComplete",
                    title: "Percentage Complete",
                    width: "120px"
                },
                {
                    field: "start",
                    title: "Start",
                    width: "120px"
                },
                {
                    field: "finish",
                    title: "Finish"
                },
                {
                    field: "effortDriven",
                    title: "Effort Driven"
                }
            ]
        };

        el = angular.element('<div grid options="options1" title="This is a sample grid using Widget Factory" />');

        $compile(el)(scope);
        scope.$digest();
        $timeout.flush();
    }));

    it('should show empty grid when no data is provided', function () {
        expect(el.find('#gridTitle').html()).toBe("This is a sample grid using Widget Factory");
        expect(el.find('#exportButton')).not.toExist();

        console.log(el.html());
    });
});

And this is the result of console.log(el.html());

<!-- ngIf: title --><h1 id="gridTitle" ng-if="title" class="ng-binding ng-scope">This is a sample grid using Widget Factory</h1><!-- end ngIf: title -->
    <hr>
    <div class="pull-right">
        <!-- ngIf: exportOptions -->
    </div>
</div>
<div class="row">
    <div id="grid" kendo-grid="" k-options="options" data-role="grid" class="k-grid k-widget"><div class="k-grid-header" style="padding-right: 0px;"><div class="k-grid-header-wrap" data-role="resizable"><table role="grid"><colgroup><col style="width:120px"><col style="width:120px"><col style="width:120px"><col style="width:120px"><col><col></colgroup><thead role="rowgroup" class="ng-scope"><tr role="row"><th role="columnheader" data-field="title" data-title="Title" class="k-header" data-role="sorter"><a class="k-link" href="#">Title</a></th><th role="columnheader" data-field="duration" data-title="Duration" class="k-header" data-role="sorter"><a class="k-link" href="#">Duration</a></th><th role="columnheader" data-field="percentComplete" data-title="Percentage Complete" class="k-header" data-role="sorter"><a class="k-link" href="#">Percentage Complete</a></th><th role="columnheader" data-field="start" data-title="Start" class="k-header" data-role="sorter"><a class="k-link" href="#">Start</a></th><th role="columnheader" data-field="finish" data-title="Finish" class="k-header" data-role="sorter"><a class="k-link" href="#">Finish</a></th><th role="columnheader" data-field="effortDriven" data-title="Effort Driven" class="k-header" data-role="sorter"><a class="k-link" href="#">Effort Driven</a></th></tr></thead></table></div></div><div class="k-grid-content"><table role="grid"><colgroup><col style="width:120px"><col style="width:120px"><col style="width:120px"><col style="width:120px"><col><col></colgroup><tbody role="rowgroup"></tbody></table></div></div>
</div>

Answer 2

I had a similar problem and found that @Alan Souza's $timeout.flush() trick wasn't working for me. I had the additional complexity of wrapping Kendo-Angular's grid directive in my own directive. Jasmine 2.x's Asynchronous Support supplied the solution:

'use strict';

describe('grid scenarios', function () {

    var element,
            scope;

    beforeEach(module("myApp"));

    beforeEach(inject(function ($compile, $rootScope) {
        scope = $rootScope.$new();

        scope.gridConfig = {
            dataSource: {
                data: [
                    {id: 1, name: 'Bob'},
                    {id: 2, name: 'Ted'},
                    {id: 3, name: 'Jan'}
                ]
            },
            columns: [
                {field: 'id', title: 'Job Code'},
                {field: 'name', title: 'Name'}
            ]
        };

        element = angular.element('<div hc-grid></div>');
        element = $compile(element)(scope);
        scope.$digest();
    }));

    // wait for the kendoWidgetCreated event, then call done()
    beforeEach(function (done) {
        scope.$on('kendoWidgetCreated', function () {
            done();
        });
    });

    it('should have 2 columns and 4 rows', function () {
        expect(element.find('.k-grid th').length).toBe(2);
        expect(element.find('.k-grid tr').length).toBe(4);
        console.log(element.html());
    });
});

HTML Output:

<div kendo-grid="grid.kendoGrid" k-options="grid.uiOptions" style="height: 500px; " data-role="grid"
     class="k-grid k-widget">
    <div class="k-grid-header" style="padding-right: 22px; ">
        <div class="k-grid-header-wrap">
            <table role="grid">
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <thead role="rowgroup">
                <tr role="row">
                    <th role="columnheader" data-field="id" rowspan="1" data-title="Job Code" data-index="0"
                        class="k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Job Code</a></th>
                    <th role="columnheader" data-field="name" rowspan="1" data-title="Name" data-index="1"
                        class="k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Name</a></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="k-grid-content" data-role="virtualscrollable"
         style="width: auto; overflow-x: hidden; overflow-y: hidden; padding-right: 22px; ">
        <div class="k-virtual-scrollable-wrap">
            <table role="grid" style="height: auto; ">
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <tbody role="rowgroup">
                <tr data-uid="c01c4df9-04d0-43f6-be2d-6afc603cb100" role="row" class="ng-scope">
                    <td role="gridcell"><span ng-bind="dataItem.id" class="ng-binding">1</span></td>
                    <td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Bob</span></td>
                </tr>
                <tr class="k-alt ng-scope" data-uid="96b8cac3-e0ed-4431-a038-290964abbbd7" role="row">
                    <td role="gridcell"><span ng-bind="dataItem.id" class="ng-binding">2</span></td>
                    <td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Ted</span></td>
                </tr>
                <tr data-uid="a3df78b4-597a-4165-be0d-dcf9ad10d0b0" role="row" class="ng-scope">
                    <td role="gridcell"><span ng-bind="dataItem.id" class="ng-binding">3</span></td>
                    <td role="gridcell"><span ng-bind="dataItem.name" class="ng-binding">Jan</span></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="k-scrollbar k-scrollbar-vertical" style="width: 22px; "></div>
    </div>
</div>