node.js - 单元测试中的 Handlebars 模板，如何

Question

我正在 YUI3 中创建客户端测试，并且需要为我正在测试的页面编译 Handlebars 模板。

我们正在运行一个将 hbs 设置为渲染引擎的 Node 应用程序，因此当请求进入服务器时，路由器通过调用 res.render() 并直接调用 View 目录中的 .hbs 文件进行响应。

在测试中，我需要实例化handlebars模板，然后将其分配给DOM，但由于测试是javascript，我无权访问文件流功能，并且handlebars.compile()不将路径作为论证。

基本上我想做这样的事情，但是 Handlebars.compile() 方法成功编译引用的模板文件:

var body = A.one(document.body);
var container = A.Node.create('<div id="test-container"></div>');
var domTemplate = Handlebars.compile('../../../../views/campaign/set-campaign-properties.hbs');
var dom = A.Node.create(domTemplate);
container.append(dom);
body.append(container);

Answer 1

请记住，客户端和服务器之间存在很大差异，您要求在服务器上测试客户端项目，这可能会导致一些奇怪的问题，但有一些很好的工具可以提供帮助。一般来说，当我对模板渲染进行单元测试时，我会使用 phantomjs 或 selenium 之类的东西。不过，您可以使用 jsdom 或 jest 来处理服务器端 dom 的解析。

我已经用 jsdom 制作了一个示例，http://runnable.com/me/VIZN1VmFRzsBJu8r

var Handlebars = require("handlebars")
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
             "{{kids.length}} kids:</p>" +
             "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);

var data = { "name": "Alan", "hometown": "Somewhere, TX",
             "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var templateResult = template(data);

var jsdom = require("jsdom");

jsdom.env(
  templateResult,
  ["http://code.jquery.com/jquery.js"],
  function (errors, window) {
    console.log("contents of p tag:", window.$("p").text());
  }
);