mutations.html 6.63 KB

Edit Raw Blame History

<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
  <meta charset="UTF-8">
  <title>iron-list test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

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

  <link rel="import" href="../../test-fixture/test-fixture.html">
  <link rel="import" href="../iron-list.html">
</head>
<body>

  <test-fixture id="trivialList">
    <template>
      <template is="dom-bind">
        <style>
          :host {
            @apply(--layout-fit);
            @apply(--layout-vertical);

            display: block;
          }

          iron-list {
            height: 300px;
          }

          .item:nth-child(odd) {
            height: 100px;
            background-color: green;
            color: white;
          }

          .item:nth-child(even) {
            height: 100px;
            background-color: red;
            color: white;
          }
        </style>
        <iron-list items="[[data]]" as="item">
          <template>
            <div class="item">[[item.index]]</div>
          </template>
        </iron-list>
      </template>
    </template>
  </test-fixture>

  <script>
    function findElementInList(container, selector) {
      var i = 0;
      var children = container._children;
      var ms = Polymer.DomApi.matchesSelector;
      for (; i < children.length; i++) {
        if (children[i].nodeType === Node.ELEMENT_NODE && ms.call(children[i], selector)) {
          return children[i];
        }
      }
      return null;
    }

    function buildItem(index) {
      return {
        index: index
      };
    }

    function buildDataSet(size) {
      var data = [];
      while (data.length < size) {
        data.push(buildItem(data.length));
      }
      return data;
    }

    function simulateScroll(config, fn) {
      var list = config.list;
      var target = config.target;
      var delay = config.delay || 1;
      var contribution = config.contribution || 100;

      function scroll(dir, prevVal) {
        list.scrollTop = list.scrollTop + dir;
        if (list.scrollTop !== target && prevVal !== list.scrollTop) {
          setTimeout(scroll.bind(null, dir, list.scrollTop), delay);
        } else {
          setTimeout(fn.bind(null, list.scrollTop), 100);
        }
      }

      if (list.scrollTop < target) {
        scroll(Math.abs(contribution), -1);
      } else if (list.scrollTop > target) {
        scroll(-Math.abs(contribution), -1);
      }
    }

    function getFirstItemFromList(list) {
      var listRect = list.getBoundingClientRect();
      return document.elementFromPoint(listRect.left + 1, listRect.top + 1);
    }

    suite('mutations to items', function() {
      var list, ajax, container;

      setup(function() {
        container = fixture('trivialList');
        ajax = findElementInList(container, 'iron-ajax');
        list = findElementInList(container, 'iron-list');
      });

      test('update physical item', function(done) {
        var setSize = 100;
        var phrase = 'It works!';

        list.items = buildDataSet(setSize);

        list.set('items.0.index', phrase);

        flush(function() {
          assert.equal(getFirstItemFromList(list).textContent, phrase);
          done();
        });
      });

      test('update virtual item', function(done) {
        var setSize = 100;
        var phrase = 'It works!';

        list.items = buildDataSet(setSize);

        function scrollBackUp() {
          simulateScroll({
            list: list,
            target: 0
          }, function() {
            flush(function() {
              assert.equal(getFirstItemFromList(list).textContent, phrase);
              done();
            });
          });
        }

        flush(function() {
          var rowHeight = list._physicalItems[0].offsetHeight;
          // scroll down
          simulateScroll({
            list: list,
            target: setSize*rowHeight
          }, function() {
            list.set('items.0.index', phrase);
            flush(scrollBackUp);
          });
        });
      });

      test('push', function(done) {
        var setSize = 100;

        list.items = buildDataSet(setSize);
        setSize = list.items.length;

        list.push('items', buildItem(setSize));
        assert.equal(list.items.length, setSize + 1);

        flush(function() {
          var rowHeight = list._physicalItems[0].offsetHeight;
          var viewportHeight = list.offsetHeight;
          var itemsPerViewport = Math.floor(viewportHeight/rowHeight);

          assert.equal(getFirstItemFromList(list).textContent, 0);

          simulateScroll({
            list: list,
            contribution: rowHeight,
            target: list.items.length*rowHeight
          }, function() {
            assert.equal(getFirstItemFromList(list).textContent,
                list.items.length - itemsPerViewport);
            done();
          });
        })
      });

      test('pop', function(done) {
        var setSize = 100;
        list.items = buildDataSet(setSize);

        flush(function() {
          var rowHeight = list._physicalItems[0].offsetHeight;

          simulateScroll({
            list: list,
            contribution: rowHeight,
            target: setSize*rowHeight
          }, function() {
            var viewportHeight = list.offsetHeight;
            var itemsPerViewport = Math.floor(viewportHeight/rowHeight);

            list.pop('items');

            flush(function() {
              assert.equal(list.items.length, setSize-1);
              assert.equal(getFirstItemFromList(list).textContent, setSize - 3 - 1);
              done();
            });
          });
        });
      });

      test('splice', function(done) {
        var setSize = 45;
        var phrase = 'It works!'
        list.items = buildDataSet(setSize);

        list.splice('items', 0, setSize, buildItem(phrase));

        flush(function() {
          assert.equal(list.items.length, 1);
          assert.equal(getFirstItemFromList(list).textContent, phrase);
          done();
        });
      });
    });
  </script>

</body>
</html>