Question

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

使用名为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 grid resizable column width

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

接下来，触发事件，传递包含新宽度和网格

的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.

});

}）;

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

1 个答案: