閱讀(1.6k) 書簽贊(0) 我要糾錯(cuò)

EmberJS 測(cè)試用戶交互

2018-01-03 16:40 更新

測(cè)試用戶交互

用戶可以使用助手與頁(yè)面交互，并檢查DOM中的更改。當(dāng)未經(jīng)授權(quán)的用戶嘗試訪問特定的URL時(shí)，您可以將其轉(zhuǎn)換為登錄頁(yè)面。

例子

<!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>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在testing_userinteraction.html文件中
在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充