Question

我正在尝试使用web-component-tester测试自定义Polymer元素。许多示例都使用test-fixture。我想使用数据绑定来测试我的自定义元素，但我很难让数据绑定工作。

基本上，我想采用我的自定义元素，假设变量已绑定，并断言它的相关内容。我试图按照测试夹具自述文件中的示例进行操作。另请注意，在我意识到Stack Overflow可能是一个更好的地方之前，我最初发布了这个问题on their issue tracker。

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

以下是my-element-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>

1 个答案: