<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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>

<test-fixture id="valueById">
  <template>
    <iron-selector multi attr-for-selected="id">
      <div id="item0">Item 0</div>
      <div id="item1">Item 1</div>
      <div id="item2">Item 2</div>
      <div id="item3">Item 3</div>
      <div id="item4">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');
      t = Polymer.dom(s).querySelector('[is="dom-repeat"]');
    });

    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
      MockInteractions.tap(s.children[0]);
      MockInteractions.tap(s.children[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('fire iron-select/deselect events when selectedValues changes', function() {
      // setup listener for iron-select/deselect events
      var items = [s.children[0], s.children[1], s.children[2]], 
          selectEventCounters = [0, 0, 0], 
          deselectEventCounters = [0, 0, 0];

      s.addEventListener('iron-select', function(e) {
        selectEventCounters[items.indexOf(e.detail.item)]++;
      });
      s.addEventListener('iron-deselect', function(e) {
        deselectEventCounters[items.indexOf(e.detail.item)]++;
      });

      // programatically select values 0 and 1 (both fire select)
      s.selectedValues = [0, 1];

      // programatically select values 1 and 2 (2 fires select, 0 fires deselect)
      s.selectedValues = [1, 2];

      // programatically deselect all values (1 and 2 fire deselect)
      s.selectedValues = [];

      // check events
      assert.equal(selectEventCounters[0], 1);
      assert.equal(deselectEventCounters[0], 1);
      assert.equal(selectEventCounters[1], 1);
      assert.equal(deselectEventCounters[1], 1);
      assert.equal(selectEventCounters[2], 1);
      assert.equal(deselectEventCounters[2], 1);
    });

    test('fire iron-select/deselect events when selectedValues is modified', function() {
      // setup listener for iron-select/deselect events
      var items = [s.children[0], s.children[1], s.children[2]],
          selectEventCounters = [0, 0, 0],
          deselectEventCounters = [0, 0, 0];

      s.addEventListener('iron-select', function(e) {
        selectEventCounters[items.indexOf(e.detail.item)]++;
      });
      s.addEventListener('iron-deselect', function(e) {
        deselectEventCounters[items.indexOf(e.detail.item)]++;
      });

      s.selectedValues = []

      // programatically select value 0
      s.push('selectedValues', 0, 1);

      // programatically deselect value 0
      s.shift('selectedValues');

      // programatically select value 2
      s.push('selectedValues', 2);

      // programatically deselect value 1
      s.shift('selectedValues');

      assert.equal(selectEventCounters[0], 1);
      assert.equal(deselectEventCounters[0], 1);
      assert.equal(selectEventCounters[1], 1);
      assert.equal(deselectEventCounters[1], 1);
      assert.equal(selectEventCounters[2], 1);
      assert.equal(deselectEventCounters[2], 0);
    });

    test('fire iron-select/deselect events when toggling items', function() {
      // setup listener for iron-select/deselect events
      var items = [s.children[0], s.children[1], s.children[2]], 
          selectEventCounters = [0, 0, 0], 
          deselectEventCounters = [0, 0, 0];

      s.addEventListener('iron-select', function(e) {
        selectEventCounters[items.indexOf(e.detail.item)]++;
      });
      s.addEventListener('iron-deselect', function(e) {
        deselectEventCounters[items.indexOf(e.detail.item)]++;
      });

      // tap to select items 0 and 1 (both fire select)
      MockInteractions.tap(items[0]);
      MockInteractions.tap(items[1]);

      // programatically select values 1 and 2 (2 fires select, 0 fires deselect)
      s.selectedValues = [1, 2];

      // tap to deselect items 1 and 2 (both fire deselect)
      MockInteractions.tap(items[1]);
      MockInteractions.tap(items[2]);

      // check events
      assert.equal(selectEventCounters[0], 1);
      assert.equal(deselectEventCounters[0], 1);
      assert.equal(selectEventCounters[1], 1);
      assert.equal(deselectEventCounters[1], 1);
      assert.equal(selectEventCounters[2], 1);
      assert.equal(deselectEventCounters[2], 1);
    });

    test('toggle iron-selected class when toggling items selection', function() {
      // setup listener for iron-item-select/deselect events
      var item0 = s.children[0], item1 = s.children[1];

      assert.isFalse(item0.classList.contains('iron-selected'));
      assert.isFalse(item1.classList.contains('iron-selected'));

      // tap to select item 0 (add iron-selected class)
      MockInteractions.tap(item0);

      assert.isTrue(item0.classList.contains('iron-selected'));
      assert.isFalse(item1.classList.contains('iron-selected'));

      // tap to select item 1 (add iron-selected class)
      MockInteractions.tap(item1);

      assert.isTrue(item0.classList.contains('iron-selected'));
      assert.isTrue(item1.classList.contains('iron-selected'));

      // tap to deselect item 1 (remove iron-selected class)
      MockInteractions.tap(item1);

      assert.isTrue(item0.classList.contains('iron-selected'));
      assert.isFalse(item1.classList.contains('iron-selected'));

      // programatically select both values (1 add iron-selected class)
      s.selectedValues = [0, 1];

      assert.isTrue(item0.classList.contains('iron-selected'));
      assert.isTrue(item1.classList.contains('iron-selected'));

      // programatically deselect all values (both removes iron-selected class)
      s.selectedValues = [];

      assert.isFalse(item0.classList.contains('iron-selected'));
      assert.isFalse(item1.classList.contains('iron-selected'));
    });

    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('updates selection when dom changes', function(done) {
      var selectEventCounter = 0;

      s = fixture('test');

      Polymer.Base.async(function() {
        var firstChild = Polymer.dom(s).querySelector(':first-child');
        var lastChild = Polymer.dom(s).querySelector(':last-child');

        MockInteractions.tap(firstChild);
        MockInteractions.tap(lastChild);

        expect(s.selectedItems.length).to.be.equal(2);

        Polymer.dom(s).removeChild(lastChild);

        Polymer.dom.flush();

        expect(s.selectedItems.length).to.be.equal(1);
        expect(s.selectedItems[0]).to.be.equal(firstChild);

        done();
      });

    });

    suite('`select()` and `selectIndex()`', function() {
      var selector;

      setup(function() {
        selector = fixture('valueById');
      });

      test('`select()` selects an item with the given value', function() {
        selector.select('item1');
        assert.equal(selector.selectedValues.length, 1);
        assert.equal(selector.selectedValues.indexOf('item1'), 0);

        selector.select('item3');
        assert.equal(selector.selectedValues.length, 2);
        assert.isTrue(selector.selectedValues.indexOf('item3') >= 0);

        selector.select('item2');
        assert.equal(selector.selectedValues.length, 3);
        assert.isTrue(selector.selectedValues.indexOf('item2') >= 0);
      });

      test('`selectIndex()` selects an item with the given index', function() {
        selector.selectIndex(1);
        assert.equal(selector.selectedValues.length, 1);
        assert.isTrue(selector.selectedValues.indexOf('item1') >= 0);
        assert.equal(selector.selectedItems.length, 1);
        assert.isTrue(selector.selectedItems.indexOf(selector.items[1]) >= 0);

        selector.selectIndex(3);
        assert.equal(selector.selectedValues.length, 2);
        assert.isTrue(selector.selectedValues.indexOf('item3') >= 0);
        assert.equal(selector.selectedItems.length, 2);
        assert.isTrue(selector.selectedItems.indexOf(selector.items[3]) >= 0);

        selector.selectIndex(0);
        assert.equal(selector.selectedValues.length, 3);
        assert.isTrue(selector.selectedValues.indexOf('item0') >= 0);
        assert.equal(selector.selectedItems.length, 3);
        assert.isTrue(selector.selectedItems.indexOf(selector.items[0]) >= 0);
      });
    });

    /* 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>