DART - 单元测试中的异常 [英] DART - exception in unit testing
问题描述
我写了一个简单的代码来演示我的单元测试的问题。
我有prog.html和prog.dart作为一个程序，必须测试。它工作确定。
在同一个文件夹中我有test，html和test，dart代表一个单元测试。
下面是代码：
prog.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Prog< / title>
< link rel =stylesheethref =prog.css>
< / head>
< body>
< h1>测试< / h1>
< div id =myDiv>
现在你看到我
< / div>
< script type =application / dartsrc =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 =现在你不要;
}
test.html
< pre class =lang-dart prettyprint-override>
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>测试< / title>
< link rel =importhref =prog.html>
< script type =application / dartsrc =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）;
}
}
我使用
$ b将prog.html加入test.html$ b
< link rel =importhref =prog.html>但是，当我在Dartium中运行test.html时，我得到
打破异常：null对象没有setter'text ='。
在
..text =现在你不
似乎prog.dart没有看到prog.html，所以myDiv为null。
所有文件都在同一根级别（网络）。
我做错了什么？
根据Günter的建议编辑：
我在运行DART代码之前修改了HTML文件以构建DOM。
但是无论如何DART脚本运行之前DIV附加到BODY（我没有看到任何调试警报消息），我仍然获得null当访问..text：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>测试< / title>
< link rel =importhref =prog.html>
< script>
function getProg（）{
var content = document.querySelector（'link [rel =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>
现在你看到我
< / div>
- >
< / body>
< script type =application / dartsrc =test.dart>< / script>
< script src =packages / browser / dart.js>< / script>
< / html>
在实体中取消注释的实际DIV一切正常。
编辑：
works：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>测试< / title>
< link rel =importhref =prog.html>
< script>
function getProg（）{
var content = document.querySelector（'link [rel =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>
解决方案导入html文件并不意味着其内容包含在带有导入标记的网页中。
http://www.html5rocks.com/en/tutorials/webcomponents/imports/ （请参阅使用内容）。
EDIT
我不认为这是网络应用测试的正确尝试。
- 我建议使用 https://pub.dartlang.org/packages/webdriver
- 或您可以将您的应用程序嵌入到Polymer元素中，您可以在test.html文件中使用它。
- 当您构建较小的Polymer元素的应用程序时，您可以测试这些较小的部分，这些部分也可以重复使用。
可能有更好的技术用于测试Web应用程序，但我自己还没有使用它们。
我使用容易（更容易）测试的Polymer元素，或者Angular它有自己的测试故事（也有Dart单元测试，但它是设计为从头开始测试）。
I wrote a simple code to demonstrate my problem with the unit-testing.
I have prog.html and prog.dart as a program that has to be tested. It works Ok.
In the same folder I have test,html and test,dart that represent a unit test.
Here is the code:
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");
});
}
I include prog.html into test.html using
<link rel="import" href="prog.html">
However, when I run test.html in Dartium, I am getting
Breaking on exception: The null object does not have a setter 'text='.
in
..text="Now you don't";
It seems that prog.dart does not see prog.html, so myDiv is null.
All the files are in the same root level (web).
What am I doing wrong?
Edited based on Günter's suggestions:
I modified the HTML file to build the DOM before running the DART code.
But somehow DART script runs before the DIV is appended to BODY (I do not see any debug alert messages) and I am still getting null when accessing ..text:
<!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>
With actual DIV in the body uncommented everything runs normally.
Edit:
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>
解决方案 Importing an html file doesn't mean that its content is included in the page with the import tag.
http://www.html5rocks.com/en/tutorials/webcomponents/imports/ (see Using the content).
There are several way you can access the content (for example using a script).
EDIT
I don't think this is the right attempt for web app testing.
- I suggest either something like https://pub.dartlang.org/packages/webdriver
- or you could embed your application into a Polymer element which you can use in your test.html file.
- When you build your application of smaller Polymer elements you can test these smaller parts which may also be reusable. For testing the whole application use something like WebDriver (see first item).
There might be better technologies out there for testing web apps, but I didn't use any of them myself yet.
I use Polymer elements which are easy (easier) to test or Angular which has it's own testing story (also with Dart unit tests, but it is was designed to be testable from the beginning).
这篇关于DART - 单元测试中的异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
