javascript - 业力 + AngularJS + 剑道 : Kendo-grid testing is not working

Question

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

我的 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-grid 下的子节点。

指令的输出如下:

<!-- 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 没有集成。

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

Answer 1

我发现了问题。我错过了 $timeout.flush();在范围之后。$digest();

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

请在下面找到我的 Jasmine 测试配置:

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