Fatal编程技术网
  • dart/
  • Dart-聚合物单元测试。单击事件后无法引用dom元素

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

dart polymer

Dart-聚合物单元测试。单击事件后无法引用dom元素,dart,polymer,dart-polymer,Dart,Polymer,Dart Polymer,大多数测试用例都可以工作，除了ClickSignInButton中的最后一个期望，当我想确保在表单提交时没有任何数据，我可以评估错误消息div expect（document.querySelector（'qme-header'）.shadowRoot .querySelector（“#headerErrorDiv”），不为空始终失败，并且headerErrorDiv为空，即使其位于div中 代码： 嗨，甘特，谢谢你的时间，我根据你的评论调整了我的代码，它应该可以工作，但是我想我弄乱了我使用聚合

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

expect（document.querySelector（'qme-header'）.shadowRoot
.querySelector（“#headerErrorDiv”），不为空
始终失败，并且
headerErrorDiv
为空，即使其位于div中

代码：

嗨，甘特，谢谢你的时间，我根据你的评论调整了我的代码，它应该可以工作，但是我想我弄乱了我使用聚合物模板的方式

公开发行 error.html headertest.html index.html 

出口
“包装：聚合物/初始镖”；
在Dartium中运行
index.html
，但是头测试失败，因为
headerErrorDiv
为空。我知道我搞乱了Polymer模板，很可能是gobal错误持有者，但它在Dartium中运行
index.html
时工作，在运行
headertest.html
时测试用例失败。

首先，我认为应该在
main（）中添加
@whenPolymerReady
注释
而不是您的聚合物初始化代码

而不是

          <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>
你可以用

expect(document.querySelector('qme-header').shadowRoot
         .querySelector('#headerErrorDiv'), isNotNull);
我看你的工作没有问题 鳕鱼。你能提供一个完整的例子来重现你的问题吗（包括HTML和pubspec.yaml）

headerErrorDiv
仅当
qmeErrorHolder.headerError
为true时才存在

我认为您应该确保测试文件以
\u test
（
.dart
|
.html
）结尾，以供testrunner
发布运行测试
识别

您需要将Dart脚本标记更改为
x-link-Dart
，以使测试与testrunner一起工作（如果您想直接运行它，请返回到
）

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

首先，我认为您应该将
@whenpolymeready
注释添加到
main（）
而不是您的聚合物初始化代码

而不是

          <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>
你可以用

expect(document.querySelector('qme-header').shadowRoot
         .querySelector('#headerErrorDiv'), isNotNull);
我看你的工作没有问题 鳕鱼。你能提供一个完整的例子来重现你的问题吗（包括HTML和pubspec.yaml）

headerErrorDiv
仅当
qmeErrorHolder.headerError
为true时才存在

我认为您应该确保测试文件以
\u test
（
.dart
|
.html
）结尾，以供testrunner
发布运行测试
识别

您需要将Dart脚本标记更改为
x-link-Dart
，以使测试与testrunner一起工作（如果您想直接运行它，请返回到
）

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

我假设原因是
headerrordiv
仅在
qmeErrorHolder.headerror
为
true
时存在。另请参见我的更新答案。谢谢你，甘特，是的，将测试文件更改为_test.html//u test.dart并验证qmeErrorHolder.headerError是否设置为true解决了问题。现在一切都好了，谢谢你抽出时间。太好了！如果答案解决了您的问题，请您点击上下投票按钮下方的复选标记接受，谢谢。我假设原因是
headerrordiv
仅在
qmeErrorHolder时存在。headerror
为
true
。另请参见我的更新答案。谢谢你，甘特，是的，将测试文件更改为_test.html//u test.dart并验证qmeErrorHolder.headerError是否设置为true解决了问题。现在一切都好了，谢谢你抽出时间。太好了！如果答案解决了您的问题，请您点击上下投票按钮下方的复选标记接受，谢谢。我假设原因是
headerrordiv
仅在
qmeErrorHolder时存在。headerror
为
true
。另请参见我的更新答案。谢谢你，甘特，是的，将测试文件更改为_test.html//u test.dart并验证qmeErrorHolder.headerError是否设置为true解决了问题。现在一切都好了，谢谢你抽出时间。太好了！如果答案解决了你的问题，请点击上下投票按钮下方的复选标记接受，谢谢。 
       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 = ""]);
           }

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

         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();
            }

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

             @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);
            });
           });
              }

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

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

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