javascript - Karma 测试 Kendo UI 的视觉响应

Question

所以我四处寻找有人试图尝试我的身份，但没有成功......所以我们开始吧。响应Kendo Lab's post *免责声明*:虽然正式的 Kendo UI 支持协议(protocol)不支持 Angular Kendo UI，但这是一个活跃的社区项目，我们希望您提出问题，或 fork 存储库并提交拉取请求。 StackOverflow也是一个获得帮助的好地方。我别无选择，只能来到StackOverflow。这是我的情况。

我在我的网络应用程序中有 Angular 剑道设置，它运行得很棒! (有点学习曲线，但事情就是这样)。我想知道测试我编写的指令是否正常工作，并且希望能够使用我正在寻找的剑道指令进行测试。

现在是代码

调整大小指令.js

app.directive("ibsResizeGraphDirective", ['$window', function ($window) {
    return function (scope, element) {

        //Bind to window resize so that we can have the elements respond.
        //There is no element.resize event and watching for width change doesn't work
        angular.element($window).bind('resize', function () {
            scope.$apply();
        });

        //Watch for element.width() change
        scope.$watch(function () {
            return $(element).width();
        }, function (newValue, oldValue) {
            if (newValue != oldValue) {    
                scope.graph.options.chartArea.width = $(element).width();

                // Turn off transitions so that the graphs don't redraw everytime the window changes
                if (oldValue != 0 && scope.graph.options.transitions) {
                    scope.graph.options.transitions = false;

                }

                scope.graph.refresh();
            }
        })

      //...

    };
}]);

如您所见，我正在尝试基本上检查图表元素的大小并相应地设置chartArea.width。

我遇到的最大问题是让图表显示出来。为了让事情变得更容易，我们决定将图表声明包装到指令中!

chart.js

app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {
    return {
        // Restrict E for element
        restrict: 'E',
        // Here we setup the template for the code we want to replace our directive
        template:"<div ibs-resize-graph-directive \n\
                       ibs-owner-warehouse-listener-directive \n\
                       ibs-graph-culture-caption \n\
                       kendo-chart='graph' \n\
                       k-options='chartOptions' \n\
                       k-data-source='dataSource' \n\
                       class='col-lg-4'/>",
        replace: true,
        scope: { 
            //...
        },
        controller: function($scope){
            //...
        },
        link: function (scope, element, attrs) {
            //...
    };
}]);

最后是我的测试...我什至无法让我的图表正确渲染...那么我该如何检查宽度是否发生变化？!

调整大小-test.js

//Setup items before each test
    beforeEach(module('dynamanMain', 'kendo.directives'));

    //Initialization Tests
    it('should render the chart', angular.mock.inject(function ($compile, $rootScope, $timeout) {
        var scope = $rootScope.$new();
        ele = $compile('<ibs-chart-directive></ibs-chart-directive>')(scope);
        scope.$apply();
        //$timeout.flush();
        //Test that the kendo grid was created over the div element
        console.log(ele.find('div')); //This basically outputs nothing

    }));

这是结果的屏幕截图

1. 没有呈现图表(我知道这是因为我没有将其附加到正文中)
2. 我的脚本后面没有正文中的元素(在执行 angular-kendo 测试时它们会出现)
3. 我得到了从 element.find('div') 返回的原型(prototype)

这绝对是一篇较长的文章，但我想尽可能彻底地得到一个好的答案。大家有什么想法吗？

Answer 1

我是个笨蛋。我没有正确定位该指令。

 ele = $compile('<ibs-chart-directive></ibs-chart-directive>')(scope);

应该是

 ele = $compile('<ibs-chart></ibs-chart>')(scope);

因为我的指令定义为

app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {

由于进行了这些更改，我还能够完成测试并测试图表的宽度以及是否调用调整大小函数......我喜欢在搜索几天后找到类似的小东西......