EmberJS 测试用户交互

2018-01-03 16:40 更新

测试用户交互

用户可以使用助手与页面交互，并检查DOM中的更改。当未经授权的用户尝试访问特定的URL时，您可以将其转换为登录页面。

例子

<!DOCTYPE html>
   <html>
      <head>
         <title>Emberjs Testing Interaction</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>
         <!-- CDN's for testing Ember.js programs --<
         <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>

     <!-- These are used to link different url's -->
     <script type="text/x-handlebars">
        <ul>
           <li>{{#link-to "index"}}Login 1{{/link-to}}</li>
           <li>{{#link-to "Login2"}}Login 2{{/link-to}}</li>
        </ul>
        {{/outlet}}
     </script>

     <script type="text/x-handlebars" data-template-name="index">
        <p>This is login 1</p>
     </script>

     <!-- Display this line if not authenticated -->
     <script type="text/x-handlebars" data-template-name="login">
        <p>This is my Login</p>
     </script>

     <script type="text/x-handlebars" data-template-name="Login2">
        <p>This is login 2</p>
     </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() {
           this.route('login');
           this.route('Login2');
        });

        // 'Login2Route' should render by defining a route with the same name as the template
        App.Login2Route = Ember.Route.extend({
           beforeModel: function() {
              var myval = this.modelFor('application');
                 //If we pass an empty object, then it create a link to a route using 'transitionTo' method
                 if (Ember.isEmpty(myval)) {
                    this.transitionTo('login');
                 }
           }
        });

        //These methods are used to prepare the application for testing
        App.setupForTesting();
        App.injectTestHelpers();
        App.rootElement = '#ember-testing';   //Ember.js applications's root element

        module('Emberjs', {
           setup: function() {
              App.reset();   //After each test, reset the state of the application
           }
        });

        //Here, it tests the workflow of an application
        test('redirect to login if not authenticated', function() {
           visit('/');
           click('.Login2');

           //'andThen' helper wait for the preceding asynchronous test helpers to complete
           andThen(function() {
              equal(currentRouteName(), 'login');
           });
        });
     </script>
     </body>
</html>

输出

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

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

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

写笔记

我要补充