EmberJS 測(cè)試組件設(shè)置
2018-01-04 14:14 更新
描述
要測(cè)試Ember應(yīng)用程序，您需要通過(guò)在html文件中使用div標(biāo)簽添加測(cè)試應(yīng)用程序，如下所示：
<div id ="ember-testing"></div>
要渲染您的應(yīng)用程序，Ember使用此id元素，如下所示：
App.rootElement = '#ember-testing'
例子
<!DOCTYPE html>
<html>
<head>
<title>Emberjs Testing Components</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.prod.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script src="https://rawgit.com/rwjblue/ember-qunit-builds/master/ember-qunit.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="ember-testing"></div>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{my-color name=item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="components/my-color">
My Color: {{name}}
</script>
<script type="text/javascript">
//Creates an instance of Ember.Application and assign it to a global variable
App = Ember.Application.create();
//Customize the behavior of a route by creating an 'Ember.Route' subclass
App.IndexRoute = Ember.Route.extend({
//If you want to render a template with the route handler, implement the 'model' hook
model: function() {
return ['red', 'yellow', 'blue'];
}
});
App.myColorComponent = Ember.Component.extend({
templateName: 'my-color',
style: function() {
return 'color: ' + this.get('name') + ';';
}.property('name')
});
//These methods are used to prepare the application for testing
//emq.globalize();
App.setupForTesting();
App.rootElement = '#ember-testing'; //Ember.js applications's root element
setResolver(Ember.DefaultResolver.create({ namespace: App }));
//Test the component done using the 'moduleForComponent' helper and will find the component by name(my-color)
moduleForComponent('my-color');
test("changing colors", function(){
//'this.subject()' is available because we used 'moduleForComponent'
var component = this.subject();
//This is an async function and should be wrapped using 'Ember.run'
Ember.run(function(){
component.set('name','red');
});
//First call to $() renders the component
equal(this.$().attr('style'), 'color: red;');
Ember.run(function(){
component.set('name', 'green');
});
equal(this.$().attr('style'), 'color: green;');
});
test("template", function(){
var component = this.subject(); //'this.subject()' is available because we used 'moduleForComponent'
//First call to $() renders the component
equal($.trim(this.$().text()), 'My Color:');
//This is another async function and should be wrapped using 'Ember.run'
Ember.run(function(){
component.set('name', 'green');
});
equal($.trim(this.$().text()), 'My Color: green');
});
</script>
</body>
</html>輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將上面的代碼保存在testing_setup.html文件中
在瀏覽器中打開(kāi)此HTML文件。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：