テンプレートがmochaテストでiron：routerルート用にレンダリングされているかどうかをテストするにはどうすればよいですか？

Question

私の流行のアプリでは、特定のテンプレートが特定のルート/パスに対してレンダリングされているかどうかをテストできます。私の現在の設定には以下のものが含まれています：iron：router、practicalmeteor：mocha、そして私はレンダリングのためにBlazeに使用しています。

私が仕事を得ることができないこと、特に二つの問題があります

• のsetTimeoutを使用せずに終了するルートを待っているのかどうかを考え出す
• （私はある種のコールバックを好みます） Blazeテンプレートはページに表示されません。

Router.go()を呼び出した後にテンプレートがレンダリングされたかどうかをテストするにはどうすればよいですか？

import { Router } from 'meteor/iron:router'; 
import { Template } from 'meteor/templating'; 
import { chai } from 'meteor/practicalmeteor:chai'; 

Router.route('/example', { name: 'exampleTemp' }); 

describe('example route', function() { 
    it('renders template exampleTemp', function() { 
     Router.go('/example'); 
     // not sure what to put here to wait for route to finish 

     // don't know how to achieve the function below 
     chai.assert.isTrue(Template.exampleTemp.isRendered()); 
    }); 
}); 

Answer 1

onAfterActionフックが定義されている場合は上書きされるため、これは完璧な解決策ではありません。また、

ルータ-helpers.test.js

import { Template } from 'meteor/templating'; 
import { Tracker } from 'meteor/tracker'; 
import { Router } from 'meteor/iron:router'; 

export const withRenderedRoute = function(templates, callback) { 
    let routeRendered = new ReactiveVar(false); 
    Router.onAfterAction(function() { 
     routeRendered.set(true); 
    }); 
    let templatesRendered = []; 
    if (Array.isArray(templates)) { 
     templates.forEach(function(templateName) { 
      let rendered = new ReactiveVar(false); 
      Template[templateName].onRendered(function() { 
       rendered.set(true); 
      }); 
      templatesRendered.push(rendered); 
     }); 
    } 
    Tracker.autorun(function() { 
     const areTemplatesRendered = templatesRendered.every(function(rendered) { 
      return rendered.get(); 
     }); 
     if (routeRendered.get() && areTemplatesRendered) { 
      Router.onAfterAction(function() {}); 
      if (callback) { 
       callback(); 
      } 
     } 
    }); 
}; 

router.test.html

<template name="dummyLayout">{{> yield}}</template> 
<template name="dummyTemplate"></template> 

router.test.js

乱雑なテスト環境を作成するテンプレートにonRendered機能を追加します

import { chai } from 'meteor/practicalmeteor:chai'; 
import { withRenderedRoute } from './router-helpers.test.js'; 
import './router.test.html'; 
import './router.js'; 

const RoutesToTest = [ 
    { name: 'home', path: '/', template: 'home', layout: 'layoutDefault' } 
    // more routes 
]; 

describe('router', function() { 
    before(function() { 
     Router.route('/dummyRoute', { name: 'dummyRoute', template: 'dummyTemplate', layoutTemplate: 'dummyLayout' }); 
    }); 
    beforeEach(function(done) { 
     Router.go('dummyRoute'); 
     withRenderedRoute(['dummyTemplate'], done); 
    }); 
    after(function() { 
     Router.go('/'); 
    }); 
    RoutesToTest.forEach(function(testRoute) { 
     let message = 'route ' + testRoute.name + ' with path ' + testRoute.path; 
     message += ' should render template ' + testRoute.template + ' with layout ' + testRoute.layout; 
     it(message, function(done) { 
      Router.go(testRoute.name); 
      withRenderedRoute([testRoute.template, testRoute.layout], function() { 
       // the route and templates have been rendered correctly at this point, otherwise the test will timeout 
       chai.assert.equal(Router.routes[testRoute.name].path(), testRoute.path); 
       done(); 
      }); 
     }); 
    }); 
});