chrome/test/data/webui/cr_elements/cr_scrollable_behavior_tests.js

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

suite('cr-scrollable-behavior', function() {
  /** @type {CrScrollableListElement} */ let testElement;
  /** @type {HTMLDivElement} */ let container;
  /** @type {IronListElement} */ let ironList;

  suiteSetup(function() {
    document.body.innerHTML = `
      <dom-module is="test-element">
        <template>
          <style>
            #container {
              height: 30px;
              overflow-y: auto;
            }
          </style>
          <div id="container" scrollable>
            <iron-list scroll-target="container" items="[[items]]">
              <template>
                <div>[[item]]</div>
              </template>
            </iron-list>
          </div>
        </template>
      </dom-module>
    `;

    Polymer({
      is: 'test-element',

      properties: {
        items: {
          type: Array,
          value: function() {
            return ['apple', 'bannana', 'cucumber', 'doughnut'];
          },
        },
      },

      behaviors: [CrScrollableBehavior],
    });
  });

  setup(function(done) {
    PolymerTest.clearBody();

    testElement = document.createElement('test-element');
    document.body.appendChild(testElement);
    container = testElement.$$('#container');
    ironList = testElement.$$('iron-list');

    // Wait for requestAnimationFrame for CrScrollableBehavior to set the
    // initial scrollable class properties.
    window.requestAnimationFrame(function() {
      done();
    });
  });

  // There is no MockInteractions scroll event, and simlating a scroll is messy,
  // so instead scroll ironList and send a 'scroll' event to the container.
  function scrollToIndex(index) {
    ironList.scrollToIndex(index);
    container.dispatchEvent(new CustomEvent('scroll'));
    Polymer.dom.flush();
  }

  test('scroll', function() {
    assertTrue(container.classList.contains('can-scroll'));
    assertFalse(container.classList.contains('is-scrolled'));
    assertFalse(container.classList.contains('scrolled-to-bottom'));
    scrollToIndex(1);
    assertTrue(container.classList.contains('is-scrolled'));
    assertFalse(container.classList.contains('scrolled-to-bottom'));
    scrollToIndex(3);
    assertTrue(container.classList.contains('scrolled-to-bottom'));
  });

  test('save scroll', function(done) {
    scrollToIndex(2);
    assertTrue(container.classList.contains('can-scroll'));
    assertTrue(container.classList.contains('is-scrolled'));
    const scrollTop = container.scrollTop;
    testElement.saveScroll(ironList);
    testElement.items = ['apple', 'bannana', 'cactus', 'cucumber', 'doughnut'];
    testElement.restoreScroll(ironList);
    Polymer.dom.flush();
    Polymer.Base.async(function() {
      assertEquals(scrollTop, container.scrollTop);
      done();
    });
  });
});