我正在尝试将一个小型 ember.js 应用程序集成到现有网站中。代码工作得很好，但我无法让我的集成测试工作。
消息传递.js
window.App = Ember.Application.create();
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.Router.map(function () {
this.resource('index', {path: '/'}, function () {
this.resource('detail', {path: ':message_id'});
});
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return App.MessageSummary.find();
},
events: {
select: function (summary) {
this.transitionTo('detail', App.Message.find(summary.get('id')));
}
}
});
App.MessageSummary = DS.Model.extend({
id: DS.attr('string'),
date: DS.attr('string'),
status: DS.attr('string'),
by: DS.attr('string'),
subject: DS.attr('string')
});
App.Message = DS.Model.extend({
id: DS.attr('string'),
subject: DS.attr('string')
});
App.MessageSummary.FIXTURES = [
{id: '1', date: '04/19/2013 8:15 PM', status: 'read', by: 'your doctor', subject: 'Your heart attack'},
{id: '2', date: '04/19/2013 8:15 PM', status: 'read', by: 'your doctor', subject: 'Your heart attack'},
{id: '3', date: '04/19/2013 8:15 PM', status: 'read', by: 'your doctor', subject: 'Your heart attack'},
{id: '4', date: '04/19/2013 8:15 PM', status: 'read', by: 'your doctor', subject: 'Your heart attack'},
{id: '5', date: '04/19/2013 8:15 PM', status: 'read', by: 'your doctor', subject: 'Your heart attack'}
];
App.Message.FIXTURES = [
{id: '1', subject: 'Your heart attack (Detail 1)'},
{id: '2', subject: 'Your heart attack (Detail 2)'},
{id: '3', subject: 'Your heart attack (Detail 3)'},
{id: '4', subject: 'Your heart attack (Detail 4)'},
{id: '5', subject: 'Your heart attack (Detail 5)'}
];
消息传递.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lib/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="js/lib/ember-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="js/lib/ember-data-latest.min.js"></script>
<script type="text/javascript" src="js/messaging.js"></script>
<title>Messaging</title>
</head>
<body>
<script type="text/x-handlebars" id="index">
<div>
<table class="rounded-corner summary">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col">From</th>
<th scope="col">Subject</th>
</tr>
</thead>
<tbody>
{{#each model}}
<tr {{action select this}}>
<td>{{date}}</td>
<td>{{status}}</td>
<td>{{by}}</td>
<td>{{subject}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="detail">
<div>
{{id}}: {{subject}}
</div>
</script>
</body>
</html>
如您所见，这非常微不足道。像浏览器中的魅力一样工作。鉴于 Ember 是一个自以为是的、约定优于配置的框架，集成测试似乎是正确的方法。因此，在尝试使用我们现有的工具时，我的 jsTestDriver 单元测试如下所示：
jsTestDriver.conf：
server: http://localhost:9876
load:
- src/main/webapp/js/lib/jquery-1.8.3.min.js
- src/main/webapp/js/lib/handlebars-1.0.0-rc.3.js
- src/main/webapp/js/lib/ember-1.0.0-rc.3.js
- src/main/webapp/js/lib/ember-data-latest.min.js
- src/test/webapp/js/emberTesting.js
- src/main/webapp/js/messaging.js
- src/test/webapp/js/jshamcrest-0.6.7.min.js
- src/test/webapp/js/jsmockito-1.0.4-minified.js
test:
- src/test/webapp/js/messagingTests.js
消息传递测试.js
JsHamcrest.Integration.JsTestDriver();
JsMockito.Integration.JsTestDriver();
App.Router.reopen({
location: 'none'
});
jQuery.fx.off = true;
TestCase('secure messaging integration tests', {
setUp: function () {
/*:DOC +=
<script type="text/x-handlebars" id="index">
<div>
<table class="rounded-corner summary">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col">From</th>
<th scope="col">Subject</th>
</tr>
</thead>
<tbody>
{{#each model}}
<tr {{action select this}}>
<td>{{date}}</td>
<td>{{status}}</td>
<td>{{by}}</td>
<td>{{subject}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="detail">
<div>
{{id}}: {{subject}}
</div>
</script>
*/
Ember.run(function () {
if (App.store) App.store.destroy();
App.store = App.Store.create();
});
App.reset();
},
'test initial load loads table body': function () {
console.log($('body').html());//debug
assertThat($('.summary tbody tr').length, equalTo(5));
}
});
在测试执行期间，ember.js 抛出异常：
浏览器控制台输出：
DEBUG: -------------------------------
ember-1.0.0-rc.3.js:349DEBUG: Ember.VERSION : 1.0.0-rc.3
ember-1.0.0-rc.3.js:349DEBUG: Handlebars.VERSION : 1.0.0-rc.3
ember-1.0.0-rc.3.js:349DEBUG: jQuery.VERSION : 1.8.3
ember-1.0.0-rc.3.js:349DEBUG: -------------------------------
ember-1.0.0-rc.3.js:18334Error: Cannot perform operations on a Metamorph that is not in the DOM.
抛出错误时的堆栈顶部是：
checkRemoved(18334)
html(18304)
empty(19077)
empty(16899)
arrayWillChange(17700)
sendEvent(2432)
arrayContentWillChange(8909)
arrangedContentArrayWillChange(11578)
sendEvent(2432)
arrayContentWillChange(8909)
replace(12007)
insertAt(9411)
pushObject(9464)
addObject(9619)
呈现的 html 的正文是：
<div id="ember407" class="ember-view">
<div>
<table class="rounded-corner summary">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col">From</th>
<th scope="col">Subject</th>
</tr>
</thead>
<tbody>
<script id="metamorph-0-start" type="text/x-placeholder"></script><script id="metamorph-0-end" type="text/x-placeholder"></script>
</tbody>
</table>
</div>
<div>
<script id="metamorph-1-start" type="text/x-placeholder"></script><script id="metamorph-1-end" type="text/x-placeholder"></script>
</div>
</div>
我意识到考虑到 ember.js 绑定的工作方式，我可能需要使用 jsTestDriver 的 AsyncTestCase，但由于 ember 在渲染过程中抛出异常，我需要先解决这个问题。
想法？