2014-08-27 101 views
2

我正在嘗試爲海盜徽章教程編寫一個測試,旨在讓人們開始使用Dart。在Dart單元測試中訪問DOM

我有以下目錄結構:

Project Structure of Pirate Badge with tests

在6 piratebadge的代碼是什麼來在本教程的不變版本。

我添加的是測試包。

測試/ test.html中包含:

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 

<script type="application/dart" src="test.dart"></script> 
<script type="text/javascript" src="packages/unittest/test_controller.js"></script> 
</body> 
</html> 

和測試/ test.dart包含:

import 'package:unittest/unittest.dart'; 
import 'package:unittest/html_config.dart'; 
import 'dart:html'; 
import '../6-piratebadge/piratebadge.dart' as app; 

void main() { 
    useHtmlConfiguration(); 
    app.main(); 
    var button = querySelector("#generateButton"); 
    test('button text',(){ 
    expect(button.text, equals('Aye! Gimme a name!')); 
    }); 
} 

我像這樣運行測試,從上述網站的目錄:

Content\ Shell web/test/test.html 

我得到「錯誤:腳本錯誤。」 (我故意不使用--dump-render-tree,因此我可以檢查啓動的瀏覽器的控制檯中的輸出)。它的本質似乎是這樣的消息:

5500:1287:0827/110337:24546692395575:INFO:CONSOLE(0)] "Exception: The null object does not have a getter 'onInput'. 

NoSuchMethodError: method not found: 'onInput' 
Receiver: null 
Arguments: []", source: file:///Users/mikehogan/projects/learning/one-hour-codelab-master/web/6-piratebadge/piratebadge.dart (0) 

這在piratebadge.dart這些線路上發生的:

void main() { 
    InputElement inputField = querySelector('#inputName'); 
    inputField.onInput.listen(updateBadge); 

所以我想用ID「inputName」輸入沒有被找到。

它是piratebadge.html雖然:

<div> 
    <input type="text" id="inputName" maxlength="15" disabled> 
    </div> 

任何想法,我做錯了什麼?

回答

2

piratebadge.html只是一個文件在同一個包中,但與您的單元測試無關。 '#inputName'未找到,因爲test.html文件未包含該文件。

您可以嘗試在此問題中討論的嘗試DART - exception in unit testing