Polmyer 中的数据绑定 <test-fixture>

Question

我正在尝试使用他们的 web-component-tester. Many of the examples make use of test-fixture 测试自定义 Polymer 元素。我想使用数据绑定测试我的自定义元素，但我很难让数据绑定正常工作。

本质上，我想采用我的自定义元素，假设变量已绑定，并对其进行断言。我正在尝试按照测试夹具自述文件中的示例进行操作。另请注意，我最初发布此问题 on their issue tracker 之后才意识到 Stack Overflow 可能是一个更好的地方。

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

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

这是我的元素-test.html 文件的相关部分：

<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 并插入到功能。我在这里做错了什么？我误用了聚合物吗？错误使用测试夹具？

Answer 1

我认为您缺少模板中的绑定声明：

<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> 但它不存在于测试夹具模板中。你想绑定什么数据？

编辑

这是我对您的代码所做的最重要的更改：

测试夹具内的模板必须是<template is="dom-template">
fixture() 调用执行时使用了错误的元素 ID

这是一个有效的 gist。执行 bower install 然后只需在浏览器中打开 test.html。

Polmyer 中的数据绑定 <test-fixture>

Data binding in Polmyer's <test-fixture>

polymer

polymer-1.0