1 files changed, 375 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-selector/test/multi.html b/catapult/third_party/polymer/components/iron-selector/test/multi.html
new file mode 100644
index 00000000..39b70b94
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-selector/test/multi.html
@@ -0,0 +1,375 @@
+<!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>
+
+  <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>