EmberJS-Testing Controller Actions



Description

It tests the controller with some computed properties and defined actions.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Controller Actions</title>
         <!-- CDN's -->
         <link href="https://code.jquery.com/qunit/qunit-git.css" rel="stylesheet" type="text/css" />
         <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://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>
   </head>
   <body>
      <div id="qunit"></div>
      <div id="ember-testing"></div>

      <script type="text/javascript">
         //Creates an instance of Ember.Application and assign it to a global variable
         App = Ember.Application.create();

         //'Ember.ArrayController' provides a way to publish a collection of objects which has some computed properties
         App.PostsController = Ember.ArrayController.extend({
            firstname: 'Jhon',
            lastname: 'Smith',

            setLastname: function(str) {
               this.set('lastname', str);
            },
            actions: {
               //'fullname' sets a property on the controller and also calls a method
               fullname: function(str) {
                  this.set('firstname', 'Manu');
                  this.setLastname(str);
               }
             }
         });

         //These methods are used to prepare the application for testing
         //emq.globalize();
         App.setupForTesting();
         App.injectTestHelpers();

         //The 'DefaultResolver' defines the default lookup rules before consulting the container for registered items
         setResolver(Ember.DefaultResolver.create({ namespace: App }));

         //The 'moduleFor' helper is used to setup a test container
         moduleFor('controller:posts', 'Posts Controller');
         test('calling the action fullname updates firstname and lastname', function() {

            //'this.subject()' is used to get an instance of the 'PostsController'
            var ctrl = this.subject();

            // Here, checking the properties before the action is triggered
            equal(ctrl.get('firstname'), 'First Name ');
            equal(ctrl.get('lastname'), 'Last Name ');

            //Trigger the action on the controller by using the 'send' method
            ctrl.send('fullname ', 'Tested....');

            //Assert the values that have been updated by triggering an action.
            equal(ctrl.get('firstname'), 'Tested');
            equal(ctrl.get('lastname'), 'Tested');
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

  • Save above code in testing_cntrlActions.htm file

  • Open this HTML file in a browser.

Advertisements