Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Testing User Interaction</title>
  <meta name="description" content="guide: testing-user-interaction-1" />
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css"> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/release/ember.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
  <script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
</head>
<body>
  
  <div id="qunit"></div>
  <div id="ember-testing"></div>
  
  <script type="text/x-handlebars">
    <h2>My Blog</h2>
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="posts">
    {{#link-to 'posts.new' class="new-post"}}Add Post{{/link-to}}
    <ul class="posts">
    {{#each post in model}}
      <li>{{post.title}}</li>
    {{/each}}
    </ul>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="posts/new">
    <form {{action "addPost" on="submit"}}>
      <p>
        {{input type="checkbox" class="is-published" checked=newIsPublished}} Is published?
      </p>
      <p>
        {{input type="text" class="title" value=newTitle placeholder="title"}}
      </p>
      <button type="submit" class="submit">Submit</button>
    </form>
  </script>
</body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 10px;
}
 
/*=================== APP ====================*/
​
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter;
​
App.Post = DS.Model.extend({
  title: DS.attr()
});
​
App.Post.FIXTURES = [
  { id: 0, title: 'Testing Ember Applications' },
  { id: 1, title: 'Ember Authentication' },
  { id: 2, title: 'Contributing to Ember' }
];
​
App.Router.map(function() {
  this.resource('posts', { path: '/posts' }, function() {
    this.route('new',  { path: '/new' });
    this.route('show', { path: '/:id' });
    this.route('edit', { path: '/:id/edit' });
  });
});
​
App.PostsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('post');
  }
});
​
App.PostsNewController = Ember.Controller.extend({
  clearForm: function() {
    this.set('newTitle', '');
  },
​
  actions: {
    addPost: function() {
      var post = this.store.createRecord('post', {
        title: this.get('newTitle')
      });
      post.save();
      this.clearForm();
      this.transitionToRoute('posts');
    }
  }
});
​
/*=================== TESTS ====================*/
​
App.setupForTesting();
App.injectTestHelpers();
App.rootElement = '#ember-testing';
​
module('Integration: Transitions', {
  setup: function() {
    App.reset();
  }
});
​
test('root lists first page of posts', function(){
  visit('/posts');
  andThen(function() {
    equal(find('ul.posts li').length, 3, 'The first page should have 3 posts');
  });
});
​
test('add new post', function() {
  visit('/posts/new');
  fillIn('input.title', 'My new post');
  click('button.submit');
  
  andThen(function() {
    equal(find('ul.posts li:last').text(), 
                    'My new post');
  });
});
​
​
Output

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

Dismiss x