diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-item/test/paper-item.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-item/test/paper-item.html | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-item/test/paper-item.html b/catapult/third_party/polymer/components/paper-item/test/paper-item.html new file mode 100644 index 00000000..a728d6c1 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-item/test/paper-item.html @@ -0,0 +1,218 @@ +<!-- +@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 +--> +<!doctype html> +<html> + <head> + + <title>paper-item tests</title> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <script src="../../web-component-tester/browser.js"></script> + <script src="../../iron-test-helpers/mock-interactions.js"></script> + + <link rel="import" href="../../paper-input/paper-input.html"> + <link rel="import" href="../paper-item.html"> + <link rel="import" href="../paper-icon-item.html"> + + </head> + <body> + + <test-fixture id="item"> + <template> + <div role="listbox"> + <paper-item>item</paper-item> + </div> + </template> + </test-fixture> + + <test-fixture id="button"> + <template> + <div role="listbox"> + <button class="paper-item" role="option">item</button> + </div> + </template> + </test-fixture> + + <test-fixture id="iconItem"> + <template> + <div role="listbox"> + <paper-icon-item>item</paper-icon-item> + </div> + </template> + </test-fixture> + + <test-fixture id="item-with-input"> + <template> + <div role="list"> + <paper-item><input></paper-item> + </div> + </template> + </test-fixture> + + <test-fixture id="item-with-paper-input"> + <template> + <div role="list"> + <paper-item><paper-input></paper-input></paper-item> + </div> + </template> + </test-fixture> + + <test-fixture id="iconItem-with-input"> + <template> + <div role="list"> + <paper-icon-item><input></paper-icon-item> + </div> + </template> + </test-fixture> + + <script> + suite('paper-item basic', function() { + var item, clickHandler; + + setup(function() { + item = fixture('item').querySelector('paper-item'); + clickHandler = sinon.spy(); + item.addEventListener('click', clickHandler); + }); + + test('space triggers a click event', function(done) { + MockInteractions.pressSpace(item); + Polymer.Base.async(function(){ + // You need two ticks, one for the MockInteractions event, and one + // for the button event. + Polymer.Base.async(function(){ + expect(clickHandler.callCount).to.be.equal(1); + done(); + }, 1); + }, 1); + }); + + test('enter triggers a click event', function(done) { + MockInteractions.pressEnter(item); + Polymer.Base.async(function(){ + // You need two ticks, one for the MockInteractions event, and one + // for the button event. + Polymer.Base.async(function(){ + expect(clickHandler.callCount).to.be.equal(1); + done(); + }, 1); + }, 1); + }); + }); + + suite('paper-icon-item basic', function() { + var item, clickHandler; + + setup(function() { + item = fixture('iconItem').querySelector('paper-icon-item'); + clickHandler = sinon.spy(); + item.addEventListener('click', clickHandler); + }); + + test('space triggers a click event', function(done) { + MockInteractions.pressSpace(item); + Polymer.Base.async(function(){ + // You need two ticks, one for the MockInteractions event, and one + // for the button event. + Polymer.Base.async(function(){ + expect(clickHandler.callCount).to.be.equal(1); + done(); + }, 1); + }, 1); + }); + + test('click triggers a click event', function(done) { + MockInteractions.tap(item); + Polymer.Base.async(function(){ + expect(clickHandler.callCount).to.be.equal(1); + done(); + }, 1); + }); + }); + + suite('clickable element inside item', function() { + test('paper-item: space in child native input does not trigger a click event', function(done) { + var f = fixture('item-with-input'); + var outerItem = f.querySelector('paper-item'); + var innerInput = f.querySelector('input'); + + var itemClickHandler = sinon.spy(); + outerItem.addEventListener('click', itemClickHandler); + + innerInput.focus(); + MockInteractions.pressSpace(innerInput); + Polymer.Base.async(function(){ + expect(itemClickHandler.callCount).to.be.equal(0); + done(); + }, 1); + }); + + test('paper-item: space in child paper-input does not trigger a click event', function(done) { + var f = fixture('item-with-paper-input'); + var outerItem = f.querySelector('paper-item'); + var innerInput = f.querySelector('paper-input'); + + var itemClickHandler = sinon.spy(); + outerItem.addEventListener('click', itemClickHandler); + + innerInput.focus(); + MockInteractions.pressSpace(innerInput); + Polymer.Base.async(function(){ + expect(itemClickHandler.callCount).to.be.equal(0); + done(); + }, 1); + }); + + test('paper-icon-item: space in child input does not trigger a click event', function(done) { + var f = fixture('iconItem-with-input'); + var outerItem = f.querySelector('paper-icon-item'); + var innerInput = f.querySelector('input'); + + var itemClickHandler = sinon.spy(); + outerItem.addEventListener('click', itemClickHandler); + + MockInteractions.pressSpace(innerInput); + Polymer.Base.async(function(){ + expect(itemClickHandler.callCount).to.be.equal(0); + done(); + }, 1); + }); + }); + + suite('item a11y tests', function() { + var item, iconItem; + + setup(function() { + item = fixture('item').querySelector('paper-item'); + iconItem = fixture('iconItem').querySelector('paper-icon-item'); + }); + + test('item has role="listitem"', function() { + assert.equal(item.getAttribute('role'), 'option', 'has role="option"'); + }); + + test('icon item has role="listitem"', function() { + assert.equal(iconItem.getAttribute('role'), 'option', 'has role="option"'); + }); + + a11ySuite('item'); + a11ySuite('button'); + a11ySuite('iconItem'); + }); + + </script> + + </body> +</html> |