diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-menu/test/paper-submenu.html')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-menu/test/paper-submenu.html | 285 |
1 files changed, 285 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-menu/test/paper-submenu.html b/catapult/third_party/polymer/components/paper-menu/test/paper-submenu.html new file mode 100644 index 00000000..13d8ede3 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-menu/test/paper-submenu.html @@ -0,0 +1,285 @@ +<!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>paper-submenu 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-item/paper-item.html"> + <link rel="import" href="../paper-menu.html"> + <link rel="import" href="../paper-submenu.html"> + + </head> + <style> + paper-item { + font-weight: normal; + } + </style> + <body> + + <test-fixture id="basic"> + <template> + <paper-menu> + <paper-submenu> + <paper-item class="menu-trigger">Topic 1</paper-item> + <paper-menu class="menu-content"> + <paper-item>item 1.1</paper-item> + <paper-item>item 1.2</paper-item> + <paper-item>item 1.3</paper-item> + </paper-menu> + </paper-submenu> + <paper-submenu> + <paper-item class="menu-trigger">Topic 2</paper-item> + <paper-menu class="menu-content"> + <paper-item>item 2.1</paper-item> + <paper-item>item 2.2</paper-item> + <paper-item>item 2.3</paper-item> + </paper-menu> + </paper-submenu> + <paper-submenu disabled> + <paper-item class="menu-trigger">Topic 3</paper-item> + <paper-menu class="menu-content"> + <paper-item>item 3.1</paper-item> + <paper-item>item 3.2</paper-item> + <paper-item>item 3.3</paper-item> + </paper-menu> + </paper-submenu> + </paper-menu> + </template> + </test-fixture> + + <test-fixture id="opened"> + <template> + <paper-menu> + <paper-submenu class="menu-content" opened> + <paper-item class="menu-trigger">My submenu is opened to start!</paper-item> + <paper-menu class="menu-content"> + <paper-item>Triggered item</paper-item> + </paper-menu> + </paper-submenu> + </paper-menu> + </template> + </test-fixture> + + <script> + + suite('<paper-submenu>', function() { + var menu, + sub1, sub2, sub3, + collapse1, collapse2, collapse3, + trigger1, trigger2, trigger3; + + setup(function() { + menu = fixture('basic'); + + sub1 = menu.querySelectorAll('paper-submenu')[0]; + sub2 = menu.querySelectorAll('paper-submenu')[1]; + sub3 = menu.querySelectorAll('paper-submenu')[2]; + + collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse'); + collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse'); + collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse'); + + trigger1 = sub1.querySelector('.menu-trigger'); + trigger2 = sub2.querySelector('.menu-trigger'); + trigger3 = sub3.querySelector('.menu-trigger'); + }); + + test('selecting an item expands the submenu', function() { + assert.isFalse(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + + MockInteractions.tap(trigger1); + + assert.isTrue(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + }); + + test('selecting a different item closes the previously opened submenu', function() { + assert.isFalse(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + + MockInteractions.tap(trigger1); + + assert.isTrue(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + + MockInteractions.tap(trigger2); + + assert.isFalse(collapse1.opened); + assert.isTrue(collapse2.opened); + assert.isFalse(collapse3.opened); + }); + + test('cannot open a disabled submenu', function() { + assert.isFalse(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + + MockInteractions.tap(trigger3); + + assert.isFalse(collapse1.opened); + assert.isFalse(collapse2.opened); + assert.isFalse(collapse3.opened); + }); + + test('selecting an item styles it and the parent', function() { + var boldDiv = document.createElement('div'); + boldDiv.style.fontWeight = 'bold'; + document.body.appendChild(boldDiv); + + var normalDiv = document.createElement('div'); + normalDiv.style.fontWeight = 'normal'; + document.body.appendChild(normalDiv); + + assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); + + var item1 = sub1.querySelector('.menu-content').querySelector('paper-item'); + + MockInteractions.tap(trigger1); + // Nothing is initially selected. + assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(normalDiv).fontWeight); + MockInteractions.tap(item1); + + assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight); + assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(boldDiv).fontWeight); + assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); + }); + + test('selecting a new item de-styles the previous one', function() { + var boldDiv = document.createElement('div'); + boldDiv.style.fontWeight = 'bold'; + document.body.appendChild(boldDiv); + + var normalDiv = document.createElement('div'); + normalDiv.style.fontWeight = 'normal'; + document.body.appendChild(normalDiv); + + assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); + + var item1 = sub1.querySelector('.menu-content').querySelector('paper-item'); + var item2 = sub2.querySelector('.menu-content').querySelector('paper-item'); + + MockInteractions.tap(trigger1); + MockInteractions.tap(item1); + MockInteractions.tap(trigger2); + MockInteractions.tap(item2); + + // Both children are still selected even though the first one is hidden. + assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight); + assert.equal(getComputedStyle(item2).fontWeight, getComputedStyle(boldDiv).fontWeight); + + assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); + assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(boldDiv).fontWeight); + assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); + }); + + test('focus a submenu should redirect focus to the trigger', function(done) { + MockInteractions.focus(sub1); + flush(function() { + assert.equal(sub1.shadowRoot ? sub1.shadowRoot.activeElement : + document.activeElement, sub1.__trigger); + done(); + }); + }); + }); + + suite('<paper-submenu opened>', function() { + var opened; + var submenu; + var collapse; + + var fail = function(msg) { + return function() { + throw new Error(msg); + }; + }; + + setup(function() { + opened = fixture('opened'); + submenu = opened.querySelector('paper-submenu'); + collapse = Polymer.dom(submenu.root).querySelector('iron-collapse'); + }); + + test('opened binding + .menu-trigger tap', function() { + assert.isTrue(submenu.opened); + + var trigger = submenu.querySelector('.menu-trigger'); + MockInteractions.tap(trigger); + assert.isFalse(submenu.opened); + + MockInteractions.tap(trigger); + assert.isTrue(submenu.opened); + }); + + test('opened binding + open()/close()', function() { + assert.isTrue(submenu.opened); + + submenu.close(); + assert.isFalse(submenu.opened); + assert.isFalse(collapse.opened); + + submenu.open(); + assert.isTrue(submenu.opened); + assert.isTrue(collapse.opened); + }); + + test('opened binding + toggle()', function() { + assert.isTrue(submenu.opened); + + submenu.toggle(); + assert.isFalse(submenu.opened); + assert.isFalse(collapse.opened); + + submenu.toggle(); + assert.isTrue(submenu.opened); + assert.isTrue(collapse.opened); + }); + + test('opened binding + open() x 2', function() { + assert.isTrue(submenu.opened); + + opened.addEventListener('paper-submenu-open', fail('duplicate open')); + + submenu.open(); // Opening when already opened should not fire(). + }); + + test('opened binding + close() x 2', function() { + submenu.close(); + assert.isFalse(submenu.opened); + + opened.addEventListener('paper-submenu-close', fail('duplicate close')); + + submenu.close(); // Closing again when !opened should not fire(). + }); + }); + </script> + + </body> +</html> |