EmberJS-Testing Wait Helpers

Quiz
Description

The andThen is a type of wait helper which wait for the asynchronous helper to complete the task prior to progressing forward.
Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Wait Helpers</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>

      <!--Displays the statement on the browser-->
      <script type="text/x-handlebars">
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <button {{action "addClick"}}>Click Here</button>
      </script>

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

         //The map method of application's router can be invoked to define URL mappings
         App.Router.map(function() {});

         //Here, we have defined IndexController to represent the button on the browser
         App.IndexController = Ember.Controller.extend({
            dblClick: false,
            actions: {
               addClick: function(){
                  this.set('dblClick', true);
               }
            }
         });

         App.setupForTesting();
         App.rootElement = '#ember-testing';   //Ember.js applications's root element

         //'registerHelper' register test helpers that will be injected when App.injectTestHelpers is called
         Ember.Test.registerHelper('getController',
            function(app, controllerName) {
               return app.__container__.lookup('controller:' + controllerName);
            }
         );

         //'registerAsyncHelper' register test helpers that will be injected when App.injectTestHelpers is called
         Ember.Test.registerAsyncHelper('visitIndexAndClickButton',
            function(app) {
               visit('/');
               click('button.click-me');
               return wait();
            }
         );

         //This method is used to prepare the application for testing
         App.injectTestHelpers();
         module('Emberjs', {
            setup: function() {
               Ember.run(App, App.advanceReadiness);   //'advanceReadiness' runs the application when not under test
            },

            //This function is called for each test in the module
            teardown: function() {
               App.reset();   //After each test, reset the state of the application
            }
         });

         //Here, it tests the workflow of an application
         test('test visit / and click button', function() {
            visitIndexAndClickButton();

            //'andThen' helper wait for the preceding asynchronous test helpers to complete
            andThen(function(){
               var myval = getController('index');
               ok(myval.get('dblClick'));
            });
         });
      </script>
   </body>
</html>
Output

Let's carry out the following steps to see how above code works −
Save above code in testing_wait_helper.htm file
Open this HTML file in a browser.
Print Page