Karma Testing Visual Response of Kendo UI

Question

So i've looked around for someone who has tried to attempt what I am and have had no luck... So here we go. In response to the Kendo Lab's post *Disclaimer*: While Angular Kendo UI is not supported under the formal Kendo UI support agreement, this is an active community project, and we would LOVE for you to open an issue, or fork the repo and submit a pull request. StackOverflow is also a great place to get assistance. I have no choice but to come to StackOverflow. Here's my situation.

I have angular kendo setup in my web app and it runs GREAT! (Bit of a learning curve but that's how things go). I want to know test that directives i've written work properly and would LOVE to be able to test the with the kendo directives i'm looking for.

Now for the code

resize-directive.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();
            }
        })

      //...

    };
}]);

as you can see i'm trying to basically check the size of the chart's element and set the chartArea.width accordingly.

The biggest problem i'm having is getting the chart to even show up. To help make things easier on our end we decided to wrap up our chart declaration into a directive!

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) {
            //...
    };
}]);

and finally my tests...which I can't even get my chart to render properly...so how am I supposed to even check that the width changed?!

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

    }));

And here is a screenie of the result

1. There is not chart rendered (which I know it's because i'm not appending it to the body)
2. There is no element in the body after my scripts (which when doing the angular-kendo tests they appear)
3. I get the prototype returned from my element.find('div')

This is definitely a longer post but I wanted to be as thorough as I could to get a good answer. Anyone have any thoughts?

Answer 1

I'm a bonehead. I was not targeting the directive correctly.

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

should be

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

because my directive is defined as

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

as a result of making these changes I was also able to complete the test and test the width of the chart and whether or not the resize function was being called....I LOVE finding small things like that after searching for days.....