Polmyer的< test-fixture>中的数据绑定 [英] Data binding in Polmyer's <test-fixture>

问题描述

我正在尝试使用其 web-component-tester 测试自定义的Polymer元素. .许多示例都使用了测试夹具.我想使用数据绑定测试我的自定义元素，但是我正在努力使数据绑定起作用.

I am trying to test a custom Polymer element using their web-component-tester. Many of the examples make use of test-fixture. I would like to test my custom element using databinding, but I'm struggling to get data binding to work.

从本质上讲，我想使用我的自定义元素，假设变量已绑定，并声明有关它的内容.我试图按照测试夹具自述文件中的示例进行操作.还要注意，我最初在实现堆栈溢出之前在其问题跟踪器上发布了这个问题 可能是一个更好的地方.

Essentially, I want to take my custom element, assume that the variables are bound, and assert things about it. I'm trying to follow the example in the test-fixture README. Note also that I originally posted this question on their issue tracker before realizing that Stack Overflow is probably a better place for it.

我正在my-element.html文件中定义一个自定义元素，如下所示:

I'm defining a custom element in a my-element.html file, like follows:

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
    </style>
      <div id="txt-url" class="card-content">{{captureUrl}}</div>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      properties: { captureUrl: String }
    });
  </script>

这是我的my-element-test.html文件的相关部分:

Here is the relevant portion of my my-element-test.html file:

<test-fixture id="my-fixture">
  <template>
    <my-element>
      <h2>seed-element</h2>
    </my-element>
  </template>
</test-fixture>

<script>
  suite('<my-element>', function() {

    var myEl;

    setup(function() {
      myEl = fixture('my-fixture', {captureUrl: 'the url'});
    });

    test('heading is captureUrl', function() {
      var urlDiv = myEl.$$('#txt-url');
      // this will obviously fail, but used for logging purposes
      assert.equal(urlDiv, boundData.captureUrl);
    });
});
</script>

运行此命令时，我在错误消息中看到urlDiv(console.log对我不起作用)，并且div为空，未绑定captureUrl并将其插入到函数中.我在这里做错了什么?我滥用聚合物吗?误用测试治具?

When I run this I see urlDiv in the error message (console.log wasn't working for me), and the div is empty, without captureUrl bound and inserted into the function. What am I doing wrong here? Am I mis-using Polymer? Mis-using test-fixture?

推荐答案

我认为您在模板中缺少绑定声明:

I think you're missing the binding declaration in your template:

<test-fixture id="cached-page-summary-fixture">
  <template is="dom-template">
    <cached-page-summary capture-url="{{captureUrl}}">
      <h2>seed-element</h2>
    </cached-page-summary>
  </template>
</test-fixture>

此外，您正在测试<my-element>，但它不在测试治具模板中.您要绑定什么数据?

Also, you're testing <my-element> but it's not present in the test fixture template. What do you want to data bind?

编辑

这是我对您的代码进行的最重要的更改:

Here's the most important change I made to your code:

1. 测试治具内部的模板必须为 <template is="dom-template">
2. fixture()调用执行时元素ID错误

1. The template inside test fixture must be <template is="dom-template">
2. fixture() call was executed with wrong element id

这是一个有效的要点.进行bower install，然后只需在浏览器中打开test.html.

Here's a gist, which works. Do bower install and then simply open test.html in your browser.

这篇关于Polmyer的< test-fixture>中的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！