DART - 单元测试中的异常答案

【问题标题】：DART - exception in unit testingDART - 单元测试中的异常
【发布时间】：2014-03-24 13:22:28
【问题描述】：

我编写了一个简单的代码来演示我的单元测试问题。我有 prog.html 和 prog.dart 作为必须测试的程序。它工作正常。在同一个文件夹中，我有代表单元测试的 test,html 和 test,dart。代码如下：

prog.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prog</title>
    <link rel="stylesheet" href="prog.css">
  </head>
  <body>
    <h1>Test</h1>
    <div id="myDiv">
     Now you see me
    </div>
    <script type="application/dart" src="prog.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

prog.dart

import 'dart:html';

var myDiv;
void main() {
  myDiv=querySelector("#myDiv")
  ..text="Now you don't";
}

test.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script type="application/dart" src="test.dart"></script>
    <script src="packages/browser/dart.js"></script>
    </head>
</html>

test.dart：

import 'dart:html';
import 'package:unittest/unittest.dart';
import 'package:unittest/html_config.dart';
import 'prog.dart' as prog;


main(){
  useHtmlConfiguration();
  prog.main();
  test('test 1', (){
    expect(prog.myDiv, hasLength(greaterThan(0)), reason:"Zero length");
  });
}

我使用

将 prog.html 包含到 test.html 中

<link rel="import" href="prog.html">

但是，当我在 Dartium 中运行 test.html 时，我得到了

打破异常：空对象没有设置器'text='。

在

  ..text="Now you don't";

好像prog.dart没有看到prog.html，所以myDiv为null。

所有文件都在同一个根级别（web）。

我做错了什么？

根据 Günter 的建议编辑：

我在运行 DART 代码之前修改了 HTML 文件以构建 DOM。但不知何故 DART 脚本在 DIV 附加到 BODY 之前运行（我没有看到任何调试警报消息）并且在访问 ..text 时我仍然得到 null：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script>
    function getProg (){
      var content = document.querySelector('link[rel="import"]').import;
      var newBody = content.body;
      alert('getting div');
      var myDiv = content.getElementById("myDiv"); 
      alert(myDiv);
      document.body.appendChild(myDiv.cloneNode(true));
    }
    </script>

    </head>

    <body onload="getProg();">
    <!-- 
    <body>
         <div id="myDiv">
            Now you see me
         </div>
    -->

    </body>
    <script type="application/dart" src="test.dart"></script>
    <script src="packages/browser/dart.js"></script>
</html>

正文中的实际 DIV 未注释一切正常运行。

编辑：

Here is the code that works:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script>
    function getProg (){
      var content = document.querySelector('link[rel="import"]').import;
      var newBody = content.body;
      document.body.innerHTML = newBody.innerHTML;
      var script1 = document.createElement('script');
      script1.type = 'application/dart';
      script1.src = 'test.dart';
      document.body.appendChild(script1);
      var script2 = document.createElement('script');
      script2.src = 'packages/browser/dart.js';
      document.body.appendChild(script2);
    }
    </script>
  </head>
  <body onload="getProg();"></body>
</html>

【问题讨论】：

感谢您发布工作代码。我自己还没有使用 import （除了导入聚合物元素）。

标签： javascript unit-testing dart

【解决方案1】：

导入一个html文件并不意味着它的内容包含在带有import标签的页面中。

http://www.html5rocks.com/en/tutorials/webcomponents/imports/（请参阅使用内容）。

您可以通过多种方式访问内容（例如使用脚本）。

编辑

我认为这不是网络应用测试的正确尝试。

我建议像https://pub.dartlang.org/packages/webdriver这样的东西
或者您可以将您的应用程序嵌入到您可以在 test.html 文件中使用的 Polymer 元素中。
当您使用较小的聚合物元素构建应用程序时，您可以测试这些也可以重复使用的较小部件。要测试整个应用程序，请使用 WebDriver（参见第一项）。

可能有更好的技术来测试网络应用，但我自己还没有使用过任何一种。
我使用易于（更容易）测试的 Polymer 元素或具有自己测试故事的 Angular（也使用 Dart 单元测试，但它被设计为从一开始就可测试）。

【讨论】：

感谢您的回复。我编辑了原始帖子。这可能较少与 DART 相关，而与 JS 相关。
再次感谢。我找到了正确的 Javascript 可以解决问题（请参阅编辑后的帖子）。在这种情况下，我不必复制原始应用程序的 DART 和 HTML 文件，因此我的测试程序在这种情况下是一个简单的包装器。
有趣的方法。