Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Scaffolding for Ember jsbin tests" />
<meta charset="utf-8">
<title>Ember Tests</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  
  <script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>
  
  <script src='http://code.jquery.com/qunit/qunit-1.14.0.js'></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
</head>
<body>
  
  <h2>Ember Tests</h2>
  
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
​
  <div id='ember-testing-container'>
    <div id='ember-testing'></div>
  </div>
​
  <script type="text/x-handlebars">
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <div class="location-input">
      {{input value=searchText}}
    </div>
    <div class="search-results">
      <ul>
        {{#each searchResult in model}}
          <li>{{searchResult}}</li>
        {{/each}}
      </ul>
    </div>
  </script>
​
</body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
​
.ember-testing {
  position:absolute;
  right: 0;
  width:400px;
  height:400px;
  zoom: 50%;
  border: 2px solid black;
}
 
var App = Ember.Application.create({
  rootElement: '#ember-testing'
});
​
App.IndexController = Ember.ArrayController.extend(Ember.PromiseProxyMixin, {
  searchText: null, //bound to input field
  searchTextChanged: (function() {
    var searchText = this.get('searchText');
    if (searchText.length === 0) {
      this.set('model', []);
      return;
    }
​
    // simulate an async operation (like hitting a remote API)
    // which returns a promise that is ultimately resolved with an
    // array of results
    var promise = new Ember.RSVP.Promise(function(resolve/*, reject */){
      setTimeout(function(){
        Ember.run(function(){
          resolve([searchText + ", United States"]);
        });
      }, 500);
    });
    this.set('promise', promise);
  }).observes('searchText')
});
​
Ember.Test.registerAsyncHelper('waitForControllerWithPromise', function(app, controllerName) {
  return new Ember.Test.promise(function(resolve) {
​
    // inform the test framework that there is an async operation in progress,
    // so it shouldn't consider the test complete
    Ember.Test.adapter.asyncStart();
​
    // get a handle to the promise we want to wait on
    var controller = app.__container__.lookup('controller:' + controllerName);
    var promise = controller.get('promise');
​
    promise.then(function(){
​
      // wait until the afterRender queue to resolve this promise,
      // to give any side effects of the promise resolving a chance to
      // occur and settle
      Ember.run.schedule('afterRender', null, resolve);
​
      // inform the test framework that this async operation is complete
      Ember.Test.adapter.asyncEnd();
    });
  });
});
​
var App;
​
​
QUnit.test('visiting / and searching', function() {
  expect(1);
  visit('/');
  click('.location-input input');
  fillIn('.location-input input', "Los Angeles, CA");
  waitForControllerWithPromise('index');
  andThen(function(){
    var searchResult = find('.search-results ul li:first').text();
    equal(searchResult, 'Los Angeles, CA, United States');
  });
});
​
QUnit.testStart(function(){
  Ember.run(function(){
    App.setupForTesting();
    App.injectTestHelpers();
  });
});
​
QUnit.testDone(function(){
  Ember.run(App, 'reset');
});
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lukemeliapro
0viewers