Dart - 聚合物单元测试。点击事件后无法引用 dom 元素答案

【问题标题】：Dart - Polymer Unit Testing. Not able to reference dom elements after click eventDart - 聚合物单元测试。点击事件后无法引用 dom 元素
【发布时间】：2015-06-16 02:33:02
【问题描述】：

Not able to reference dom elements.

除了ClickSignInButton 中的最后一个期望之外，大多数测试用例都有效，当我想确保在没有任何数据的情况下提交表单时我可以评估错误消息 div。

expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); 总是失败并且headerErrorDiv 为空，即使它在 div 中。

代码：

import 'package:test/test.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';

main() {
   initPolymer().then((zone) => zone.run(() {
     return Polymer.onReady.then((_) {
       group('Header Form Elements Are Available', () {
         test(("CheckSignInFormItems"), () {
            expect(querySelector('qme-header').shadowRoot
            .querySelector('#emailField'), isNotNull);
            expect(querySelector('qme-header').shadowRoot
             .querySelector('#passwordField'), isNotNull);
            expect(querySelector('qme-header').shadowRoot
             .querySelector('#signInButton'), isNotNull);
          });
          test(("CheckRegisterForgotItems"), () {
            expect(querySelector('qme-header').shadowRoot
              .querySelector('#registerButton'), isNotNull);
            expect(querySelector('qme-header').shadowRoot
              .querySelector('#forgotButton'), isNotNull);
          });
         });

         group('Header Form Click Sign In Button', () {
           test(("ClickSignInButton"), () {
             (querySelector('qme-header').shadowRoot
             .querySelector('#emailField') as InputElement).value = "";
            (querySelector('qme-header').shadowRoot
              .querySelector('#passwordField') as InputElement).value =  
                "";

           Timer.run(expectAsync(() {
            (querySelector('qme-header').shadowRoot
            .querySelector('#signInButton') as ButtonElement).click();
            expect(document.querySelector('qme-header').shadowRoot
             .querySelector('#headerErrorDiv'), isNotNull);
          }));
         });
       });
      });
     }));
   }

您好 Günter，感谢您抽出宝贵时间，我根据您的 cmets 调整了我的代码，它应该可以工作，但是我认为我弄乱了我使用聚合物模板的方式。

pubspec.yaml

   environment:
          sdk: '>=1.0.0 <2.0.0'
   dependencies:
          bootstrap: ^3.3.4
          browser: '>=0.10.0 <0.11.0'
          polymer: '>=0.16.0 <0.17.0'
          test: '>=0.12.3'
    transformers:
        - polymer:
            inline_stylesheets:
               packages/bootstrap/css/bootstrap.css: false
               packages/bootstrap/css/bootstrap-theme.css: false
            entry_points:
              - web/index.html
              - test/qme_header_test.html
         - test/pub_serve:
              $include: test/**_test{.*,}.dart

header.html

       <polymer-element name="qme-header">
         <div class="container">
             <div class="navbar-header"><a class="navbar-brand"  
              href="#"><span>QMe Application</span></a></div>
              <template if="{{usingHeaderForm}}">
                    <div id="navbar" class="navbar-collapse collapse" >
                      <form on-submit="{{validateSignInForm}}" 
               class="navbar-form navbar-right">
                          <div class="form-group">
                               <input type="text" id="emailField" 
               value="{{qmeSignIn.userEmail}}" placeholder="Email" 
               class="form-control">
                          </div>
                          <div class="form-group">
                              <input type="password" id="passwordField" 
                value="{{qmeSignIn.userPassword}}"  
                placeholder="Password" class="form-control">
                          </div>
                          <button id="signInButton" type="submit" 
                 class="btn btn-success btn-sm">Sign in</button>
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <button id="registerButton" class="btn btn-
                   info btn-xs" type="button-small">Register</button>
                          &nbsp;
                          <button id="forgotButton" class="btn btn-info 
                 btn-xs" type="button-small">Forgot Password</button>
                      </form>
                    </div>
              </template>
              <template if="{{!usingHeaderForm}}">
                    <p>Hello login complete</p>
              </template>

header.dart

       library qme_header;

       import 'package:polymer/polymer.dart';
       import 'dart:html';
       import 'package:qme/views/qme_error.dart';

       @CustomTag('qme-header')
       class QmeHeader extends PolymerElement {
       @published QMeSignIn qmeSignIn;

       @observable bool usingHeaderForm = true;

       @observable QmeErrorHolder qmeErrorHolder;

       QmeHeader.created() : super.created() {
          qmeSignIn = new QMeSignIn();
          qmeErrorHolder = QmeErrorHolder.instance;
        }

        toggleFormDisplay() {
          usingHeaderForm = !usingHeaderForm;
         }

          performLogin() {
           toggleFormDisplay();
           }

          bool validateSignInEmail() {
            if (qmeSignIn.userEmail.length == 0) {
             qmeErrorHolder.headerErrorMessage = "Valid user email 
             required";
             return false;
            }
            qmeErrorHolder.headerErrorMessage = '';
            return true;
           }

           bool validateSignInPassword() {
           if (qmeSignIn.userPassword.length == 0) {
              qmeErrorHolder.headerErrorMessage = "Valid user password 
           required";
            return false;
           }
           qmeErrorHolder.headerErrorMessage = '';
           return true;
           }

         validateSignInForm(Event event, Object detail, Node sender) {
          event.preventDefault();
         if (validateSignInEmail() && validateSignInPassword()) {
          print("Submit");
          performLogin();
           qmeErrorHolder.headerError = false;
          } else {
           qmeErrorHolder.headerError = true;
         }
        }
         }

        class QMeSignIn extends Observable {
            @observable String userEmail;
            @observable String userPassword;
            QMeSignIn([this.userEmail = "", this.userPassword = ""]);
           }

error.html

         <polymer-element name="qme-error">
          <template>
           <template if="{{qmeErrorHolder.headerError}}">
             <div class="container">
                  <div id="headerErrorDiv" class="alert alert-danger" 
            role="alert">{{qmeErrorHolder.headerErrorMessage}}</div>
              </div>
            </template>
         </template>
          <script type="application/dart" src="qme_error.dart">
          </script>
         </polymer-element>

error.dart

         library qme_error;

         import 'package:polymer/polymer.dart';

         @CustomTag('qme-error')
         class QmeError extends PolymerElement {
            @observable QmeErrorHolder qmeErrorHolder;

            QmeError.created() : super.created() {
            qmeErrorHolder = QmeErrorHolder.instance;
           }
          }

          class QmeErrorHolder extends Observable {
             @observable bool headerError;

             @observable String headerErrorMessage;

             static final QmeErrorHolder _instance = new    
             QmeErrorHolder._internal();

             static QmeErrorHolder get instance => _instance;

             QmeErrorHolder._internal();
            }

headertest.html

            <html>
             <head>
              <link rel="import" 
              href="../packages/polymer/polymer.html">
              <link rel="import"  
              href="../packages/qme/views/qme_header.html" >
               <link rel="import" 
              href="../packages/qme/views/qme_error.html" >
             <link rel="stylesheet" 
              href="packages/bootstrap/css/bootstrap.css">
              <link rel="stylesheet" 
               href="packages/bootstrap/css/bootstrap-theme.css">
                <script type="application/dart" 
               src="qme_header_test.dart"></script>
            <script data-pub-inline src="packages/test/dart.js"> 
              </script>
            </head>
              <body>
                <qme-header></qme-header>
                <qme-error></qme-error>
              </body>
             </html>

headertest.dart

             @whenPolymerReady
             void runTests() {

               group('Header Form Click Sign In Button', () {
                   test(("ClickSignInButton"), () {
                 (querySelector('qme-header::shadow #emailField ') as         
                   InputElement).value ="";
             (querySelector(
                  'qme-header::shadow #passwordField') as 
                  InputElement).value = "";
                (querySelector('qme-header::shadow #signInButton') as 
                  ButtonElement)
                  .click();
            expect(
                 document.querySelector('qme-error::shadow #headerErrorDiv'), isNotNull);
            });
           });
              }

index.html

          <html>
            <head>
             <link rel="stylesheet" 
               href="packages/bootstrap/css/bootstrap.css">
               <link rel="stylesheet" 
               href="packages/bootstrap/css/bootstrap-theme.css">
             <link rel="stylesheet" href="styles/main.css">
             <link rel="import" 
           href="packages/qme/views/qme_header.html">
            <link rel="import" 
             href="packages/qme/views/qme_error.html">
           </head>
              <body>
              <qme-header></qme-header>
                 <qme-error></qme-error>

            <script src="packages/bootstrap/jquery/jquery.js"></script>
            <script src="packages/bootstrap/js/bootstrap.js"></script>
            <script data-pub-inline src="packages/browser/dart.js">    
             </script>
             <script type="application/dart">export 
             'package:polymer/init.dart';</script>
          </body>
            </html>

在 Dartium 中运行 index.html 有效，但是标头测试失败，headerErrorDiv 为 null。我知道我搞砸了 Polymer 模板并且很可能有全局错误持有者，但是当 index.html 在 Dartium 中运行时它可以工作，而当 headertest.html 运行时测试用例失败。

【问题讨论】：

我认为原因是headerErrorDiv 仅在qmeErrorHolder.headerError 为true 时才存在。另请参阅我的更新答案。
谢谢 Günter，是的，将测试文件更改为 _test.html/_test.dart 并验证 qmeErrorHolder.headerError 设置为 true 解决了问题。现在一切顺利，感谢您的宝贵时间。
太棒了！如果答案解决了您的问题，请您点击上下投票按钮下方的复选标记接受，谢谢。

标签： dart polymer dart-polymer

【解决方案1】：

首先，我认为您应该将@whenPolymerReady 注释添加到main()，而不是您的Polymer 初始化代码。

代替

expect(document.querySelector('qme-header').shadowRoot
         .querySelector('#headerErrorDiv'), isNotNull);

你可以使用

expect(document.querySelector('qme-header::shadow #headerErrorDiv'), isNotNull);

我没有看到你的问题鳕鱼您能否提供一个完整的示例来重现您的问题（包括 HTML 和 pubspec.yaml）

headerErrorDiv 仅在 qmeErrorHolder.headerError 为真时才存在

我认为您应该确保测试文件以_test(.dart|.html) 结尾，以便测试运行者pub run test 识别

您需要将 Dart 脚本标记更改为 x-link-dart 以使测试与 testrunner 一起工作（当您想直接运行时返回到 <script>）

AFAIK 如果您的测试需要额外的文件，例如组件文件，您需要运行 pub serve test 并将端口传递给 pub run test（有关详细信息，请参阅测试包的自述文件）

【讨论】：