【问题标题】:Handlebars Templates in Unit Tests, How To单元测试中的把手模板,如何
【发布时间】:2014-12-09 00:35:02
【问题描述】:

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

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

在测试中,我需要实例化把手模板,然后将其分配给 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);

【问题讨论】:

    标签: node.js unit-testing handlebars.js yui3


    【解决方案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());
      }
    );
    

    【讨论】:

    • 感谢 JE 的回复,但我的问题是我需要从 hbs 文件编译车把模板。如何用另一个目录中的文件中的模板替换“源”中的模板?
    • 由于服务器与客户端的关系,这里有点问题。从服务器加载它的方式是将文件读入字符串并加载它,类似于我在此处所做的方式。在客户端,您通过 ajax 加载文件。有几个库可以帮助您。我一直在使用使用 CommonJS 模式的 webpack 来处理在服务器和客户端上加载对象。稍后我会添加一个更完整的演示。
    • 谢谢 JE。回顾最初的问题,我发现我并不清楚我的用例。车把模板存在于生产期间由 Express 引擎 render() 方法调用的 .hbs 模板中。我的需要是为视图编写测试。为此,我需要实例化视图和控制器。我遇到的问题是控制器抛出错误,因为它在 DOM 中有多个钩子,到目前为止,我无法实例化 DOM,因为我无法在测试期间调用和呈现车把模板文件。是不是更清楚了?
    • 你能在runnable上设置一个小样本吗?
    • 再次感谢 JE,但我不相信我可以设置一个示例,因为我不相信我可以设置环境依赖项,尤其是在这种情况下的主要问题,a要从测试中调用的本地 .hsb 文件。我是现有应用程序的新团队成员,因此整体环境已经建立并运行。我只有一个关于如何在单元测试中从 .hbs 文件编译车把模板的问题。
    猜你喜欢
    • 1970-01-01
    • 2017-12-31
    • 2013-10-01
    • 2010-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多