EmberJS 测试自定义测试助手

2018-01-04 14:00 更新

描述

它创建自己的测试助手。当调用App.injectTestHelpers时，它使用registerHelper和registerAsyncHelper注册测试助手。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs  </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({
         didClick: 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() {
     expect(1);
     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>

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的代码保存在testing_ctest_helper.html文件中
在浏览器中打开此HTML文件。

以上内容是否对您有帮助：

写笔记

我要补充