2

API 関数 (例: $scope.gridOptions.api.showNoRowsOverlay()) にアクセスしようとしたときの「未定義」が原因で、ag-grid 3.0.0 を使用した AngularJS 1.3.15 アプリケーションの Karma/Jasmine テストに行き詰まりました。 )。

グーグルでいろいろ試した後(まったく運がなかった)、2つのオプションが残っています。

a) 何らかの方法でグリッドを初期化してみてください。私は ng-grid (リンク) の人々が採用した解決策を見つけました:

elm = angular.element('<div ng-grid="gridOptions" style="width: 1000px; height: 1000px"></div>');

$compile(elm)($scope);

b) 次のような命令で angularGrid モジュール全体をモックしてみてください。

angular.module("angularGrid", []);

この依存関係を取り除くためのヒントやガイドライン (さらに良い!) を教えてもらえますか?

前もってありがとう、ニコラ


UPDATE 2016/06/19 @RamiShareef

現時点で私がフォローしている単純なSPAの構造は次のとおりです。

//AngularJS module creation
var reportModule = angular.module('reportModule', ['agGrid']);

//AngularJS service creation. This service serves the SPA controller.
reportModule.service('reportModuleService', [function(){

    var self = this;

    //Function that builds the column definition for agGrid
    self.buildColumnDefinitions = function(){

        var columnDefinitions = [{headerName:"Name", field:"userName"},
                                 {headerName:"Login", field:"login"}];

        return columnDefinitions;
    }

    //Function that acts as a factory for the agGrid state builder
    self.buildDataGridState = function(columnDefinitions){

        var dataGridState = {

            columnDefs: columnDefinitions,
            rowData: null
        };

        return dataGridState;
    }

   //Function that updates the data grid rows
   self.updateDataGridRows = function(dataGridState, rowData){

        dataGridState.api.setRowData(propertyData);

        return dataGridState;
    }

    //Function that returns some data to load into the grid
    self.loadSomeData = function(){

         //Return a promise with some data to display...
    }
}]);

//AngularJS definition for the SPA controller
reportModule.controller('reportModuleController', ['reportModuleService', function(reportModuleService){

    var self = this;

    //List of column definitions
    self.columnDefinitions = self.reportModuleService.buildColumnDefinitions();

    //Definition of grid properties and its initialization
    $scope.gridOptions = self.reportModuleService.buildDataGridState(self.columnDefinitions);

    //Let's now load data into the grid...
    self.reportModuleService.loadSomeData().then(function(someGridData){

        self.reportModuleService.updateDataGridRows($scope.gridOptions, someGridData);
    });
}]);

このアーキテクチャをセットアップすると、agGrid 呼び出しのモックが簡単になることがわかります。Karma/Jasmine テストでは、グリッドの状態を処理するサービス メソッドにスパイを定義するだけでよいからです。

spyOn(testReportModuleService, 'updateDataGridRows').and.callFake(function(){});

また

spyOn(testReportModuleService, 'resetDataGridRows').and.callFake(function(){});

これが私のように Karma/Jasmine テストで立ち往生している人々の助けになることを願っています!

4

0 に答える 0