multi.html 5.95 KB
<!doctype html>
<!--
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>

  <title>iron-selector-multi</title>
  <meta charset="utf-8">
  <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-test-helpers/iron-test-helpers.html">
  <link rel="import" href="../iron-selector.html">

  <style>
    .iron-selected {
      background: #ccc;
    }
  </style>

</head>
<body>

  <test-fixture id="test">
    <template>
      <iron-selector multi>
        <div>Item 0</div>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </iron-selector>
    </template>
  </test-fixture>

  <!--
  NOTE(cdata): Enable test-fixture when polymer/polymer#2495 is resolved
  -->
  <!--<test-fixture id="repeatedItems">
    <template>-->
      <iron-selector multi id="repeatedItems">
        <template is="dom-repeat" items='["foo", "bar", "baz"]'>
          <div>[[item]]</div>
        </template>
        <div>vim</div>
      </iron-selector>
    <!--</template>
  </test-fixture>-->

  <script>

    suite('multi', function() {

      var s;

      setup(function () {
        s = fixture('test');
      });

      test('honors the multi attribute', function() {
        assert.isTrue(s.multi);
      });

      test('has sane defaults', function() {
        assert.equal(s.selectedValues, undefined);
        assert.equal(s.selectedClass, 'iron-selected');
        assert.equal(s.items.length, 5);
      });

      test('set multi-selection via selected property', function() {
        // set selectedValues
        s.selectedValues = [0, 2];
        // check selected class
        assert.isTrue(s.children[0].classList.contains('iron-selected'));
        assert.isTrue(s.children[2].classList.contains('iron-selected'));
        // check selectedItems
        assert.equal(s.selectedItems.length, 2);
        assert.equal(s.selectedItems[0], s.children[0]);
        assert.equal(s.selectedItems[1], s.children[2]);
      });

      test('set multi-selection via tap', function() {
        // set selectedValues
        s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
        s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
        // check selected class
        assert.isTrue(s.children[0].classList.contains('iron-selected'));
        assert.isTrue(s.children[2].classList.contains('iron-selected'));
        // check selectedItems
        assert.equal(s.selectedItems.length, 2);
        assert.equal(s.selectedItems[0], s.children[0]);
        assert.equal(s.selectedItems[1], s.children[2]);
      });

      test('fire iron-select/deselect events', function() {
        // setup listener for iron-select event
        var selectEventCounter = 0;
        s.addEventListener('iron-select', function(e) {
          selectEventCounter++;
        });
        // setup listener for core-deselect event
        var deselectEventCounter = 0;
        s.addEventListener('iron-deselect', function(e) {
          deselectEventCounter++;
        });
        // tap to select an item
        s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
        // check events
        assert.equal(selectEventCounter, 1);
        assert.equal(deselectEventCounter, 0);
        // tap on already selected item should deselect it
        s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
        // check selectedValues
        assert.equal(s.selectedValues.length, 0);
        // check class
        assert.isFalse(s.children[0].classList.contains('iron-selected'));
        // check events
        assert.equal(selectEventCounter, 1);
        assert.equal(deselectEventCounter, 1);
      });

      test('fires selected-values-changed when selection changes', function() {
        var selectedValuesChangedEventCounter = 0;

        s.addEventListener('selected-values-changed', function(e) {
          selectedValuesChangedEventCounter++;
        });

        MockInteractions.tap(Polymer.dom(s).children[0]);
        MockInteractions.tap(Polymer.dom(s).children[0]);
        MockInteractions.tap(Polymer.dom(s).children[0]);

        expect(selectedValuesChangedEventCounter);
      });

      test('selects from items created by dom-repeat', function(done) {
        var selectEventCounter = 0;
        var firstChild;

        s = document.querySelector('#repeatedItems');
        s.addEventListener('iron-select', function(e) {
          selectEventCounter++;
        });

        // NOTE(cdata): I guess `dom-repeat` doesn't stamp synchronously..
        Polymer.Base.async(function() {
          firstChild = Polymer.dom(s).querySelector('div');
          MockInteractions.tap(firstChild);

          assert.equal(s.selectedItems[0].textContent, 'foo');
          done();
        });
      });

      /* test('toggle multi from true to false', function() {
        // set selected
        s.selected = [0, 2];
        var first = s.selected[0];
        // set mutli to false, so to make it single-selection
        s.multi = false;
        // selected should not be an array
        assert.isNotArray(s.selected);
        // selected should be the first value from the old array
        assert.equal(s.selected, first);
      }); */

    });

  </script>

</body>
</html>