Проблемы при выполнении интеграционных тестов в приложении ember.js с использованием js-test-driver
Я пытаюсь интегрировать небольшое приложение ember.js в существующий веб-сайт. Код работает просто отлично, но у меня возникают проблемы с работой моего интеграционного тестирования.
messaging.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)'}
];
messaging.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
messagingTests.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 выдает исключение:
вывод на консоль broswer:
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>
Я понимаю, что мне может понадобиться использовать AsyncTestCase jsTestDriver, учитывая способ работы привязок ember.js, но, поскольку ember выдает исключение во время рендеринга, мне нужно сначала решить эту проблему.
Идеи?