This is a migrated thread and some comments may be shown as answers.

Karma Testing Visual Responses

5 Answers 42 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Collin
Top achievements
Rank 1
Collin asked on 25 Apr 2014, 02:13 PM
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?

5 Answers, 1 is accepted

Sort by
0
Collin
Top achievements
Rank 1
answered on 28 Apr 2014, 04:54 PM
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.
0
Accepted
T. Tsonev
Telerik team
answered on 29 Apr 2014, 08:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Collin
Top achievements
Rank 1
answered on 29 Apr 2014, 12:44 PM
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.
0
T. Tsonev
Telerik team
answered on 30 Apr 2014, 10:45 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Collin
Top achievements
Rank 1
answered on 30 Apr 2014, 12:43 PM
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!
Tags
Charts
Asked by
Collin
Top achievements
Rank 1
Answers by
Collin
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or