iron-dropdown/test/iron-dropdown-scroll-manager.html

<!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">
  <title>iron-dropdown-scroll-manager tests</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>
  <script src="../../iron-test-helpers/mock-interactions.js"></script>

  <link rel="import" href="../iron-dropdown-scroll-manager.html">
  <link rel="import" href="../../test-fixture/test-fixture.html">
  <link rel="import" href="x-scrollable-element.html">
</head>

<body>

  <test-fixture id="DOMSubtree">
    <template>
      <x-scrollable-element id="Parent"></x-scrollable-element>
    </template>
  </test-fixture>
  <script>

    suite('IronDropdownScrollManager', function() {
      var parent;
      var childOne;
      var childTwo;
      var grandChildOne;
      var grandChildTwo;
      var ancestor;

      setup(function() {
        parent = fixture('DOMSubtree');
        childOne = parent.$$('#ChildOne');
        childTwo = parent.$$('#ChildTwo');
        grandChildOne = parent.$$('#GrandchildOne');
        grandChildTwo = parent.$$('#GrandchildTwo');
        ancestor = document.body;
      });

      suite('constraining scroll in the DOM', function() {
        setup(function() {
          Polymer.IronDropdownScrollManager.pushScrollLock(childOne);
        });

        teardown(function() {
          Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
        });

        test('recognizes sibling as locked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childTwo))
            .to.be.equal(true);
        });

        test('recognizes neice as locked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildTwo))
            .to.be.equal(true);
        });

        test('recognizes parent as locked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
            .to.be.equal(true);
        });

        test('recognizes ancestor as locked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(ancestor))
            .to.be.equal(true);
        });

        test('recognizes locking child as unlocked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childOne))
            .to.be.equal(false);
        });

        test('recognizes descendant of locking child as unlocked', function() {
          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildOne))
            .to.be.equal(false);
        });

        test('unlocks locked elements when there are no locking elements', function() {
          Polymer.IronDropdownScrollManager.removeScrollLock(childOne);

          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
            .to.be.equal(false);
        });

        suite('various scroll events', function() {
          var scrollEvents;
          var events;

          setup(function() {
            scrollEvents = [
              'wheel',
              'mousewheel',
              'DOMMouseScroll',
              'touchmove'
            ];

            events = scrollEvents.map(function(scrollEvent) {
              var event = new CustomEvent(scrollEvent, {
                bubbles: true,
                cancelable: true
              });
              event.deltaX = 0;
              event.deltaY = 10;
              return event;
            });
          });

          test('prevents wheel events from locked elements', function() {
            events.forEach(function(event) {
              childTwo.dispatchEvent(event);
              expect(event.defaultPrevented).to.be.eql(true);
            });
          });

          test('allows wheel events when there are no locking elements', function() {
            Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
            events.forEach(function(event) {
              childTwo.dispatchEvent(event);
              expect(event.defaultPrevented).to.be.eql(false);
            });
          });

          test('allows wheel events from unlocked elements', function() {
            events.forEach(function(event) {
              childOne.dispatchEvent(event);
              expect(event.defaultPrevented).to.be.eql(false);
            });
          });

          test('touchstart is prevented if dispatched by an element outside the locking element', function() {
            var event = new CustomEvent('touchstart', {
              bubbles: true,
              cancelable: true
            });
            childTwo.dispatchEvent(event);
            expect(event.defaultPrevented).to.be.eql(true);
          });

          test('touchstart is not prevented if dispatched by an element inside the locking element', function() {
            var event = new CustomEvent('touchstart', {
              bubbles: true,
              cancelable: true
            });
            grandChildOne.dispatchEvent(event);
            expect(event.defaultPrevented).to.be.eql(false);
          });

          test('arrow keyboard events not prevented by manager', function() {
            // Even if these events might cause scrolling, they should not be
            // prevented because they might cause a11y issues (e.g. arrow keys
            // used for navigating the content). iron-dropdown is capable of
            // restoring the scroll position of the document if necessary.
            var left = MockInteractions.keyboardEventFor('keydown', 37);
            var up = MockInteractions.keyboardEventFor('keydown', 38);
            var right = MockInteractions.keyboardEventFor('keydown', 39);
            var down = MockInteractions.keyboardEventFor('keydown', 40);
            grandChildOne.dispatchEvent(left);
            grandChildOne.dispatchEvent(up);
            grandChildOne.dispatchEvent(right);
            grandChildOne.dispatchEvent(down);
            expect(left.defaultPrevented).to.be.eql(false);
            expect(up.defaultPrevented).to.be.eql(false);
            expect(right.defaultPrevented).to.be.eql(false);
            expect(down.defaultPrevented).to.be.eql(false);
          });
        });
      });
    });
  </script>
</body>

</html>