将 HTML 文件拉入 TinyTest答案

【问题标题】：Pull an HTML file into a TinyTest将 HTML 文件拉入 TinyTest
【发布时间】：2015-01-26 15:42:37
【问题描述】：

TinyTest 似乎只关心单元测试；然而，Meteor 包可能有 UI 元素，拉入一个预先制作的 HTML 文件来练习一个小部件会很有帮助。例如，我们可能希望使用 DataTables.net 将<table> 转换为网格，然后测试实例化是否正确。

如何在 TinyTest 中使用外部 HTML 文件？

package.js：

Package.onTest(function (api) {
  api.use(packageName, where);
  api.use(['tinytest', 'http'], where);

  // TODO we should just bring in src/test.html - but how to do that with TinyTest?
  api.addFiles('src/test.html', where);  // this won't magically display the HTML anywhere
  api.addFiles('meteor/test.js', where);
});

test.js：

Tinytest.addAsync('Visual check', function (test, done) {
  var iconsDropZone = document.createElement('div');
  document.body.appendChild(iconsDropZone);


  // TODO ideally we'd get src/test.html straight from this repo, but no idea how to do this from TinyTest
  HTTP.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html', function callback(error, result) {
    if (error) {
      test.fail('Error getting the icons. Do we have an Internet connection to rawgit.com?');
    } else {
      iconsDropZone.innerHTML = result.content;
      test.ok({message: 'Test passed if the icons look OK.'});
    }

    done();
  });

});

【问题讨论】：

嘿@Sam-Hatoum，有什么想法吗？
了解 Blaze 测试的结构：github.com/meteor/meteor/blob/devel/packages/blaze/…。这个想法是创建 dom 节点而不将它们插入到主文档中。
@imslavko：是的，但是如何从存储库中检索 HTML 文件，而不是通过 HTTP.get？目标是在 test.js 文件中不包含大量 HTML。
添加为资产，然后读取资产？
@imslavko：如果我在Tinytest.addAsync() 中调用console.log(Assets.getText('index.html'));，我会得到Assets is not defined。另外，当文件可以（显然）已经通过api.addFiles('src/test.html', 'client'); 拉到包中时，我必须直接创建一个private

标签： javascript html meteor tinytest

【解决方案1】：

我个人认为 TinyTest 不是适合这项工作的工具！您可能不知道如何包含 Asset 包或编写自己的文件加载器，但您很快就会遇到需要在测试中查询 DOM 的问题。

以下是我能想到的一些选项：

选项 1： 您可以使用xolvio:webdriver 访问完全呈现的页面。如果您在 onTest 块中包含此软件包，那么您应该可以在 TinyTest 测试中访问 wdio。我说应该，因为我根本不使用 TinyTest，但我设计了 webdriver 包以供任何框架使用。按照软件包自述文件中的说明进行操作，然后执行以下操作：

browser.
  init().
  url('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html').
  getSource(function(err, source) {
    // you have a fully rendered source here and can compare to what you like
  }).
  end();

这是一个重量级的选择，但可能适合你。

选项 2： 如果您愿意离开 TinyTest，另一种选择是使用 Jasmine。它支持client unit 测试，因此您可以加载执行视觉效果的单元并通过单元测试将其隔离。

选项 3： 您可以围绕您的包创建一个测试应用程序。所以你会：

/package
/package/src
/package/example
/package/example/main.html
/package/example/tests
/package/example/tests/driver.js

现在示例目录是 Meteor 应用程序。在 main.html 中，您将使用您的包，在测试目录下，您可以将您选择的框架（jasmine/mocha/cucumber）与 webdriver 结合使用。我喜欢这种包开发模式，因为您可以测试包，因为它打算由应用程序使用。

【讨论】：