Karma Testing Visual Responses

[Collin]

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

01.app.directive("ibsResizeGraphDirective", ['$window', function ($window) {
02.    return function (scope, element) {
03.        //Bind to window resize so that we can have the elements respond.
04.        //There is no element.resize event and watching for width change doesn't work
05.        angular.element($window).bind('resize', function () {
06.            scope.$apply();
07.        });
08.
09.         //Watch for element.width() change
10.        scope.$watch(function () {
11.            return $(element).width();
12.        }, function (newValue, oldValue) {
13.            if (newValue != oldValue) {
14.                scope.graph.options.chartArea.width = $(element).width();
15.                // Turn off transitions so that the graphs don't redraw everytime the window changes
16.                if (oldValue != 0 && scope.graph.options.transitions) {
17.                     scope.graph.options.transitions = false;
18.                 }
19.                 scope.graph.refresh();
20.            }
21.        })
22.     //...
23.    };
24.}]);

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

01.app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {
02.    return {
03.        // Restrict E for element
04.        restrict: 'E',
05.        // Here we setup the template for the code we want to replace our directive
06.        template:"<div ng-show='graph.options.title.text != null' \n\
07.                       ibs-resize-graph-directive \n\
08.                       ibs-owner-warehouse-listener-directive \n\
09.                       ibs-graph-culture-caption \n\
10.                       kendo-chart='graph' \n\
11.                       k-options='chartOptions' \n\
12.                       k-data-source='dataSource' \n\
13.                       class='col-lg-4'/>",
14.        replace: true,
15.        scope: {
16.            // ...
17.        },
18.        controller: function($scope){
19.            //...
20.        },
21.        link: function (scope, element, attrs) {
22.            //...
23.    };
24.}]);

And i've attached a screenshot of the debug output

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?

[Collin]

Figured out that I was using the correct HTML tag for the chart directive.  After changing the chart directive to be named 

ibsChartDirective

I was able to complete the tests.

[T. Tsonev]

Hello,

I'm glad to see that you solved the initial problem.
As for resizing the Chart, you can also try the resize method:
  scope.graph.resize()

This will redraw the chart to take up all the size of the chart element. It takes care of checking for size changes and for disabling transitions as well.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Collin]

I think we tried this and didn't have any luck.... and trying it now it doesn't seem to be redrawing or resizing...  I may be watching elements wrong but with the approach given it works as expected.  I'll try to look into why the resize doesn't work a little more before I give up on it now.

[T. Tsonev]

Hello,

The resize function should pick up the new element size, that's really all that there's to it.

One exception is if you're setting chartArea width/height in the initial options.

Regards,
T. Tsonev
Telerik

 

 

[Collin]

Oh my wow it does work.  Not sure what we were running into initially but somewhere else in the directive I mentioned above we're setting the chartArea.width.  I removed that and it works now!  Thanks a bunch!