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

有人知道我如何测试剑道网格的列大小调整吗

网格是使用名为sgGrid的angularjs指令构建的。它使用的数据来自一个名为accountColumns的javascript对象，我在其中设置了100px的初始列宽

然后我想在网格上触发“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

    });
});

---

感谢@nnseva，我在这里找到了答案：

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

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

最后，在handler函数中，使用从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.

});

})