1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <meta charset="UTF-8"> 14 <title>paper-menu-button basic tests</title> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 16 17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 18 <script src="../../web-component-tester/browser.js"></script> 19 <script src="../../test-fixture/test-fixture-mocha.js"></script> 20 <script src="../../iron-test-helpers/mock-interactions.js"></script> 21 22 <link rel="import" href="../paper-menu-button.html"> 23 <link rel="import" href="../../test-fixture/test-fixture.html"> 24 25 </head> 26 <body> 27 28 <test-fixture id="TrivialMenuButton"> 29 <template> 30 <paper-menu-button no-animations> 31 <span class="dropdown-trigger">trigger</span> 32 <span class="dropdown-content">content</span> 33 </paper-menu-button> 34 </template> 35 </test-fixture> 36 37 <test-fixture id="TwoMenuButtons"> 38 <template> 39 <paper-menu-button no-animations> 40 <span class="dropdown-trigger">trigger</span> 41 <span class="dropdown-content">content</span> 42 </paper-menu-button> 43 <paper-menu-button no-animations> 44 <span class="dropdown-trigger">trigger</span> 45 <span class="dropdown-content">content</span> 46 </paper-menu-button> 47 </template> 48 </test-fixture> 49 50 <script> 51 suite('<paper-menu-button>', function() { 52 var menuButton; 53 var trigger; 54 var content; 55 56 setup(function() { 57 menuButton = fixture('TrivialMenuButton'); 58 trigger = Polymer.dom(menuButton).querySelector('.dropdown-trigger'); 59 content = Polymer.dom(menuButton).querySelector('.dropdown-content'); 60 }); 61 62 test('opens when trigger is clicked', function(done) { 63 var contentRect; 64 65 contentRect = content.getBoundingClientRect(); 66 67 expect(contentRect.width).to.be.equal(0); 68 expect(contentRect.height).to.be.equal(0); 69 70 menuButton.addEventListener('paper-dropdown-open', function() { 71 expect(menuButton.opened).to.be.equal(true); 72 done(); 73 }); 74 75 MockInteractions.tap(trigger); 76 }); 77 78 test('closes when trigger is clicked again', function(done) { 79 menuButton.addEventListener('paper-dropdown-open', function() { 80 menuButton.addEventListener('paper-dropdown-close', function() { 81 expect(menuButton.opened).to.be.equal(false); 82 done(); 83 }); 84 85 Polymer.Base.async(function() { 86 MockInteractions.tap(trigger); 87 }); 88 }); 89 90 MockInteractions.tap(trigger); 91 }); 92 93 test('closes when disabled while open', function() { 94 var contentRect; 95 96 menuButton.opened = true; 97 menuButton.disabled = true; 98 99 expect(menuButton.opened).to.be.equal(false); 100 101 contentRect = content.getBoundingClientRect(); 102 expect(contentRect.width).to.be.equal(0); 103 expect(contentRect.height).to.be.equal(0); 104 }); 105 106 test('has aria-haspopup attribute', function() { 107 expect(menuButton.hasAttribute('aria-haspopup')).to.be.equal(true); 108 }); 109 110 }); 111 112 suite('when there are two buttons', function() { 113 var menuButton; 114 var trigger; 115 var otherButton; 116 var otherTrigger; 117 118 setup(function() { 119 var buttons = fixture('TwoMenuButtons'); 120 menuButton = buttons[0]; 121 otherButton = buttons[1]; 122 trigger = Polymer.dom(menuButton).querySelector('.dropdown-trigger'); 123 otherTrigger = Polymer.dom(otherButton).querySelector('.dropdown-trigger'); 124 }); 125 126 test('closes current and opens other', function(done) { 127 expect(menuButton.opened).to.be.equal(false); 128 expect(otherButton.opened).to.be.equal(false); 129 130 /* 131 NOTE: iron-overlay-behavior adds listeners asynchronously when the 132 overlay opens, so we need to wait for this event which is a 133 more-explicit signal that tells us that the overlay is really opened. 134 */ 135 menuButton.addEventListener('iron-overlay-opened', function() { 136 expect(menuButton.opened).to.be.equal(true); 137 expect(otherButton.opened).to.be.equal(false); 138 139 var firstClosed = false; 140 var secondOpened = false; 141 142 menuButton.addEventListener('paper-dropdown-close', function() { 143 firstClosed = true; 144 }); 145 146 otherButton.addEventListener('paper-dropdown-open', function() { 147 secondOpened = true; 148 }); 149 150 Polymer.Base.async(function() { 151 MockInteractions.tap(otherTrigger); 152 }); 153 154 155 Polymer.Base.async(function() { 156 expect(firstClosed).to.be.equal(true); 157 expect(secondOpened).to.be.equal(true); 158 159 done(); 160 }); 161 }); 162 163 MockInteractions.tap(trigger); 164 }); 165 }); 166 </script> 167 </body> 168 </html> 169
