[英]Karma + AngularJS + Kendo: Kendo-grid testing is not working
我的项目使用AngularJS + Kendo-UI。 我正在尝试将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是空的,没有孩子,这使我相信剑道没有集成。
注意:我可以使代码适用于应用程序本身,但是无法使用业力框架进行测试。
我发现了问题。 我错过了一个$ timeout.flush(); 在scope。$ digest()之后;
我仍然不确定为什么需要这样做,但至少可以解决我的问题。
请在下面的茉莉花测试配置中查找:
'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>
我有一个类似的问题,发现@Alan Souza的$ timeout.flush()技巧对我不起作用。 将Kendo-Angular的grid指令包装在我自己的指令中会带来额外的复杂性。 Jasmine 2.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.