2

$timeout 内の次のコードは呼び出されません。そこに好きな間違ったテストを入れることができ、テストは常にパスします (同様の質問があります ( Karma e2e testing: how to know when the DOM is ready? ) が、それは解決策を提供しません):

it('should display a filter row when attribute sg-live-filtering is present', function()   
{
   angular.mock.inject(function($compile, $rootScope, $timeout) {
      var elem = $compile('<div sg-grid sg-data="api/grid/accounts" sg-live-filtering></div>')(scope); // the angular-kendo grid
      $rootScope.$apply();            
      var table = elem.find('table[role="grid"]'); // find the kendo grid
      expect(table.length).toBe(1);
      var header = table.find('thead'); // find the grid's table header 
      expect(header.length).toBe(1);
      $timeout(function () {
         // get the second row in the header and check it has a specific class
         expect(header.find('tr').eq(1).hasClass('sg-grid-filter-row')).toBeTruthy();
         // e.g. I could do this and it would still pass!!!             
         expect(header.find('tr').eq(500));
      });
   }
}

PhantomJS 1.9.2 (Windows 7): 871 件中 1 件を実行 (383 件をスキップ) 成功 (0 秒 / 0

ブラウザでは次のように表示されます。

ここに画像の説明を入力

剣道グリッドは、標準の angularjs ディレクティブを使用して作成されます。

angular.module('sgComponents').directive('sgGrid', [
   templateUrl: 'sg-grid.html',
   // lots of kendo code follows to build the grid       
]);

外部 sg-grid.html テンプレート:

<div sg-grid sg-data="api/grid/accounts"             
     sg-live-filtering> <!-- the attribute I want to test -->        
</div>

ディレクティブ コードが実行されると、sg-live-filtering 属性が存在するかどうかがチェックされます。そうである場合、ユーティリティ関数が呼び出されて、画像で強調表示されている行がグリッドのテーブル ヘッダーに追加されます。

if (attrs.sgLiveFiltering) {
   /*
    timeout is needed to ensure DOM is ready. COULD THIS BE THE PROBLEM?
   */
   $timeout(function () { 
      /*
      this function adds the filter row to the grid. 
      THE NEW ROW HAS CLASS 'sg-grid-filter-row' THAT I USE FOR TESTING
      */
      buildGridFilterRow(elm, scope, attrs);
    });
}
4

2 に答える 2

2

テストコードを表示できますか??? タイムアウトを実行するか、単に $timeout.flush(); を使用するために待機する必要があるためです。以下に例を示します: angularjs での非同期サービスの単体テスト

于 2014-01-24T10:08:07.827 に答える
2

最後に（2週間後！）これが機能するようになりました。$timeout.flush(100) の使用を提案した @idursun と igorzg は正しかったのですが、@idursun が彼のコメントでさらに言及したように、$timeout ブロックも削除する必要がありました。

最初にこれを試したときはうまくいきませんでしたが、今ではうまくいきます。理由を聞かないでください。私が気にするのは、それが機能していることだけです! 参照用の完全なテストケースは次のとおりです。

it('should display a filter row when attribute sg-live-filtering is present', function () {
   angular.mock.inject(function($compile, $rootScope, $timeout) {
   var scope = $rootScope.$new();
   scope.accountColumnsForAdvSearch = [
      {field: 'accountId', title: 'AccountId', dataType: 'string'},
      {field: 'name', title: 'Account Name', dataType: 'string'},
      {field: 'shortName', title: 'Short Name', dataType: 'string'},
      {field: 'status', title: 'Status', dataType: 'string'}
   ];

   $httpBackend.when('GET', 'api/grid/accounts').respond(accountData);    

   var elem = $compile('<div sg-grid sg-data="api/grid/accounts" sg-columns="accountColumnsForAdvSearch" sg-live-filtering="true"></div>')(scope);
   $rootScope.$apply();
   $httpBackend.flush();
   $timeout.flush(100); // wait for DOM to load
   var table = elem.find('table[role="grid"]'); // the kendo grid
   expect(table.length).toBe(1);
   var filterRow = table.find('.sg-grid-filter-row'); // the filter row
   expect(filterRow.length).toBe(1);
});
于 2014-02-06T10:23:44.280 に答える