如何使用Jasmine测试Kendo UI网格列调整大小事件

Question

有谁知道我如何测试kendo grid列的大小调整？

网格是使用称为sgGrid的angularjs指令构建的。 它使用从范围设置为100px的初始列宽度的范围内名为accountColumns的javascript对象获取的数据。

然后，我想在网格上触发“ columnResize”事件。

接下来，我再次获取列的宽度，并期望它已更改，因为已触发columnResize事件。

 it('should resize the column when column resize event is fired', function () {
    angular.mock.inject(function($compile, $rootScope, $timeout) {
        var scope = $rootScope.$new();

        // javascript object containing data for columns used in the directive to construct the grid
        scope.accountColumns = [
            {field: 'accountId', title: 'AccountId', dataType: 'integer', width: '100px'},
            ...more fields here
        ];

         var elem = $compile('<div sg-grid sg-columns="accountColumns"></div>')(scope); // construct the grid. sg-grid is an angularjs directive that creates a kendo grid

        $rootScope.$apply();
        $httpBackend.flush();

        var grid = elem.find('div[data-role="grid"]').data('kendoGrid'); // the kendo grid object

        $timeout.flush(100); // wait for DOM to load

        var colWidth = elem.find('colgroup col').eq(0).css('width'); // get the 1st column, AccountId

        expect(colWidth).toBe('100px'); // expect col width to be 100px because this is what we specified in the json

        grid.trigger(columnResize);

        colWidth = elem.find('colgroup col').eq(0).css('width'); // get the 1st column, AccountId

        expect(colWidth).toBe('200px'); // 200px just an arbitrary figure, the point is I expect the width to have changed

    });
});

Answer 1

感谢@nnseva在这里找到的答案： Kendo网格可调整列宽

首先，必须将事件绑定到网格，并传入处理程序函数

接下来，触发事件，传递一个包含新宽度和网格的javascript对象

最后，在处理函数中，使用从javascript对象获取的值更新相关内容的宽度：

it('should resize the column when column resize event is fired', function () {
   angular.mock.inject(function($compile, $rootScope, $timeout) {
      var scope = $rootScope.$new();

      function gridColumnResizeHandler(e) {
         e.sender.columns[0].width=e.newWidth; // update the column's width
      }

      // javascript object containing data for columns used in the directive to construct the grid
      scope.accountColumns = [
         {field: 'accountId', title: 'AccountId', dataType: 'integer', width: '100px'},
        ...more fields here
      ];

      var elem = $compile('<div sg-grid sg-columns="accountColumns"></div>')(scope); // construct the grid. sg-grid is an angularjs directive that creates a kendo grid

      $rootScope.$apply();
      $httpBackend.flush();

      var grid = elem.find('div[data-role="grid"]').data('kendoGrid'); // the kendo grid object

      $timeout.flush(100); // wait for DOM to load

      var colWidth = elem.find('colgroup col').eq(0).css('width'); // get the 1st column, AccountId

      expect(colWidth).toBe('100px'); // expect col width to be 100px because this is what we specified in the json

      grid.bind("columnResize", gridColumnResizeHandler); // bind the event

      grid.trigger('columnResize',{column:grid.columns[1], oldWidth:100, newWidth:200, sender:grid}); // trigger the event, passing in a js object with relevant data

      colWidth = elem.find('colgroup col').eq(0).css('width'); // get the 1st column, AccountId

      expect(colWidth).toBe('200px'); // now because of the handler function you can be assured the column will have been increased.

});

}）;