Karma + AngularJS + Kendo: Kendo网格测试不起作用

Question

我的项目是使用AngularJS +Kendo。我正试图将Karma融入到现有的项目中。我可以测试指令，并在测试中呈现我构建的组件。但是，当我试图加载剑道网格时，它永远不会被渲染。

我的业力配置：

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']
        }
    })
};

给出了所有现有变量的输出，但没有显示kendo网格下的子节点。

指令的输出如下：

<!-- 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>

请注意，带有id="grid“的div是空的，没有子元素，这使我相信kendo不是集成的。

注意:我可以让代码为应用程序本身工作，但我不能使用业力框架进行测试。

Answer 1

我发现了问题。在作用域之后，我缺少了一个$timeout.flush()；

我仍然不知道为什么需要这样做，但至少它解决了我的问题。

请在下面找到茉莉花测试的配置：

'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());
    });
});

这是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

我也遇到了类似的问题，发现@Alan的$timeout.flush()技巧不适合我。我在我自己的指令中有了包装Kendo角的网格指令的额外复杂性。Jasmin2.x的异步支持提供了解决方案：

'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输出：

<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>