如何在重新排列 Polymer 元素中的子 span 时通过 wct 测试？

Question

我正在创建一个名为 "price-text" 的聚合物元素，它显示货币值和一些与之关联的文本。我还添加了在存在 "swap" 属性时反转其位置的功能。尽管能够在浏览器演示中成功使用 swap 属性来反转 span 的顺序（内部"price-text") 显示。

我只能在 wct 打开浏览器进行运行测试时观察到错误。这是我在浏览器中看到的错误：

Error: the string "console.error:Error stamping [object HTMLUnknownElement] TypeError: Unable to get property 'parentNode' of undefined or null reference" was thrown, throw an Error :)

wct 完成所有的 suties 后它仍然会 return "Tests Passed" 到终端。

我已经确定设置函数会运行，一旦调用测试函数就会出现错误。重申一下我的目标，我希望能够使用 wct 通过此套件中的两个简单 "expect" 测试，其中 span 会改变位置。

这是测试夹具。

  <test-fixture id="price-text-swapd">
    <template>
      <price-text price="6.99" text="meal" swap></price-text>
    </template>
  </test-fixture>

这是与此测试夹具关联的脚本。

  suite('price and text are swapd', function() {

    var el;
    var priceTextLineEl;

    setup(function() {
      el = fixture('price-text-swapd');
      priceTextLineEl = Polymer.dom(el.root).querySelector("#price-text-line");
    });

    test('defines the swap property', function(done) {
      flush(function() {
        expect(el.swap).to.be.a('boolean');
        expect(el.swap).to.equal(true);
        done();
      });
    });
  });

这是价格文本元素。

  <span id="price-text-line">
    <span id="price" class="left border">{{_formattedPrice}}</span><span id="text" class="right">{{_formattedText}}</span>
  </span>

这里是控制阴影范围的函数DOM

  _swapPriceText: function() {
    var textEl = document.getElementById("text");
    var priceEl = document.getElementById("price")
    if (this.swap) {
      textEl.parentNode.insertBefore(textEl, textEl.parentNode.firstChild);
      textEl.classList.add("left");
      textEl.classList.remove("right");
      priceEl.classList.add("right");
      priceEl.classList.remove("left");
    } 
  }

我已经在以下片段中完整地发布了测试和元素文件。

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">

<!--
Variable price and text sparated by a border.

Example:

    <price-text price="6.99" text="meal"></price-text>

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="price-text">
  <template>
    <style>
      :root {
        --font-family: 'Helvetica', arial;
        --font-size: 32px;
        --text-font-size: 21px;
        --price-padding-left: 0;
        --price-padding-right: 4px;
        --price-border-right: 1px solid #000;
        --price-border-left: 1px solid #000;
        --text-padding-left: 8px;
        --text-padding-right: 0;
      }

      :host {
        display: inline-block;
        box-sizing: border-box;
      }

      #price-text-line {
        font-family: var(--font-family);
        @apply(--price-text-line);
      }

      #price {
        display: inline-block;
        font-size: var(--font-size);
        @apply(--price-text-line--price);
      }

      #text {
        display: inline-block;
        font-size: var(--text-font-size);
        @apply(--price-text-line--text);
      }

      .left {
        padding-left: var(--price-padding-left);
        padding-right: var(--price-padding-right);;
        @apply(--price-text-line--left);
      }

      .right {
        padding-left: var(--text-padding-left);
        padding-right: var(--text-padding-right);
        @apply(--price-text-line--right);
      }

      .border.right {
        border-left: var(--price-border-right);
      }

      .border.left {
        border-right: var(--price-border-left);
      }


   
    </style>

    <span id="price-text-line">
      <span id="price" class="left border">{{_formattedPrice}}</span><span id="text" class="right">{{_formattedText}}</span>
    </span>
  </template>

  <script>
    Polymer({
      is: 'price-text',

      properties: {
        /**
         * `price` accepts input in the form of numbers and passes the data to the `formatCurrency()` method.
         *
         * @type {{price: Number}}
         */
        price: {
          type: Number,
          value: 0,
          observer: '_formatCurrency'
        },
        /**
         * `formattedPrice` accepts formatted data from the `formatCurrency()` method to be displayed in .price.
         *
         * @type {{formattedPrice: String}}
         */
        _formattedPrice: {
          type: String,
          value: ""
        },
        /**
         * `text` accepts input in the form of strings and passes the data to the `formatText()` method.
         *
         * @type {{text: String}}
         */
        text: {
          type: String,
          value: "",
          observer: '_formatText'
        },
        /**
         * formattedText accepts formatted data from the `formatText()` method to be displayed in .text.
         *
         * @type {{formattedText: String}}
         */
        _formattedText: {
          type: String,
          value: ""
        },

        swap: {
          type: Boolean,
          observer: '_swapPriceText'
        }

      },

      /**
       * `formatCurrency()` accepts data from `price`, checks to see if it is a number greater than zero, rounds the number to two decimal places, and passes the data to `formattedPrice`.  If the data is not a number it will set `formattedCurrency` to an empty string.
       *
       */
      _formatCurrency: function() {
        if (this.price > 0) {
          this._formattedPrice = '$' + (this.price).toFixed(2);
        } else {
          this._formattedPrice = '';
        }
      },
      /**
       *`formatText()` accepts data from `text`, checks to see if it is not a number, and passes the data to `formattedText`.  If the data is a number, it will set `formattedText` to an empty string.
       *
       */
      _formatText: function() {
        if (isNaN(this.text)) {
          this._formattedText = this.text;
        } else {
          this._formattedText = '';
        }
      },

      /**
       *`swapPriceText` swaps the position of the spans containing the `price` and `text` data.
       *
       */

      _swapPriceText: function() {
        var textEl = document.getElementById("text");
        var priceEl = document.getElementById("price")
        if (this.swap) {
          textEl.parentNode.insertBefore(textEl, textEl.parentNode.firstChild);
          textEl.classList.add("left");
          textEl.classList.remove("right");
          priceEl.classList.add("right");
          priceEl.classList.remove("left");
        } else {
          priceEl.parentNode.insertBefore(priceEl, priceEl.parentNode.firstChild);
          textEl.classList.add("right");
          textEl.classList.remove("left");
          priceEl.classList.add("left");
          priceEl.classList.remove("right");

        }

      }





    });
  </script>
</dom-module>

<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <script src="../../web-component-tester/browser.js"></script>

    <!-- Step 1: import the element to test -->
    <link rel="import" href="../price-text.html">
  </head>
  <body>

    <!-- You can use the document as a place to set up your fixtures. -->
    <test-fixture id="has-price-and-text">
      <template>
        <price-text price="6.99" text="meals"></price-text>
      </template>
    </test-fixture>
    <test-fixture id="has-price-not-text">
      <template>
        <price-text price="42.42"></price-text>
      </template>
    </test-fixture>
    <test-fixture id="has-text-not-price">
      <template>
        <price-text text="sandwich"></price-text>
      </template>
    </test-fixture>
    <test-fixture id="has-wrong-price-data">
      <template>
        <price-text price="shake" text="fries"></price-text>
      </template>
    </test-fixture>
    <test-fixture id="has-wrong-text-data">
      <template>
        <price-text price="42.00" text="0.42"></price-text>
      </template>
    </test-fixture>
    <test-fixture id="price-text-undefined">
      <template>
        <price-text></price-text>
      </template>
    </test-fixture>
    <test-fixture id="price-text-swapd">
      <template>
        <price-text price="6.99" text="meal" swap></price-text>
      </template>
    </test-fixture>

    <script>
      suite('define price and text', function() {
      
        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('has-price-and-text');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text')
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(el.price).to.equal(6.99);
        });

        test('defines the text properly', function() {
          expect(el.text).to.be.a('string');
          expect(el.text).to.equal('meals');
        });

        test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('.99');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('meals')
        });

      });

      suite('define price but not text', function() {

        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('has-price-not-text');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text');
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(el.price).to.equal(42.42);
        });

        test('defines the text property', function() {
          expect(el.text).to.be.a('string');
          expect(el.text).to.equal('');
        });

        test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('.42');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('')
        });

      });

      suite('price data is wrong', function() {

        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('has-wrong-price-data');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text');
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(isNaN(el.price)).to.be.ok;
        });

        test('defines the text property', function() {
          expect(el.text).to.be.a('string');
          expect(el.text).to.equal('fries');
        });

        test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('fries')
        });

      });

      suite('define text but not price', function() {

        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('has-text-not-price');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text');
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(el.price).to.equal(0);
        });

        test('defines the text property', function() {
          expect(el.text).to.be.a('string');
          expect(el.text).to.equal('sandwich');
        });

        test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('sandwich')
        });

      });

      suite('text data is wrong', function() {

        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('has-wrong-text-data');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text');
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(el.price).to.equal(42.00);
        });

        test('defines the text property', function() {
          expect(el.text).to.be.a('string');
          expect(!isNaN(el.text)).to.be.ok;
        });

        test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('.00');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('')
        });

      });

      suite('price and text are not defined', function() {

        var el;
        var priceEl;
        var textEl;

        setup(function() {
          el = fixture('price-text-undefined');
          priceEl = Polymer.dom(el.root).querySelector('#price');
          textEl = Polymer.dom(el.root).querySelector('#text');
        });

        test('defines the price property', function() {
          expect(el.price).to.be.a('number');
          expect(el.price).to.equal(0);
        });

        test('defines the text property', function() {
          expect(el.text).to.be.a('string');
          expect(el.text).to.equal('');
        });

         test('is price displaying properly', function() {
          expect(priceEl.innerHTML).to.equal('');
        });

        test('is text displaying properly', function() {
          expect(textEl.innerHTML).to.equal('')
        });

      });

      suite('price and text are swapd', function() {
        
        var el;
        var priceTextLineEl;

        setup(function() {
          el = fixture('price-text-swapd');
          priceTextLineEl = Polymer.dom(el.root).querySelector("#price-text-line");
        });
/*
        test('defines the swap, price, and text properties', function(done) {
          flush(function() {
            expect(el.swap).to.be.a('boolean');
            expect(el.swap).to.equal(true);
            expect(el.price).to.be.a('number');
            expect(el.price).to.equal(6.99);
            expect(el.text).to.be.a('string');
            expect(el.text).to.equal('meal');
            done();
          });
        });*/

/*        test('is swap displaying properly', function() {
          expect(priceTextLineEl.innerHTML).to.equal('<span id="text" class="right">meal</span><span id="price" class="left border">meal</span>');
        });
*/
      });
    </script>

  </body>
</html>

Answer 1

在_swapPriceText方法中使用this.$.text和this.$.price。这将解决您的问题。在 Polymer 中重复 dom 获取节点的情况下，总是更喜欢使用上述方法或 this.$$('#id')。 polymer.

推荐方法

此外，您不需要 flush 在 dom-repeat

情况下所需的方法

如何在重新排列 Polymer 元素中的子 span 时通过 wct 测试？

How can I pass a wct test while rearranging children spans in a Polymer element?

javascript

html

polymer

wct