• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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      test('closes on iron-activate if close-on-activate is true', function(done) {
111        menuButton.closeOnActivate = true;
112
113        menuButton.addEventListener('paper-dropdown-open', function() {
114          menuButton.addEventListener('paper-dropdown-close', function() {
115            done();
116          });
117
118          content.dispatchEvent(new CustomEvent('iron-activate', {
119            bubbles: true,
120            cancelable: true
121          }));
122        });
123
124        MockInteractions.tap(trigger);
125      });
126
127      test('allowOutsideScroll propagates to <iron-dropdown>', function() {
128        menuButton.allowOutsideScroll = false;
129        expect(menuButton.$.dropdown.allowOutsideScroll).to.be.equal(false);
130        menuButton.allowOutsideScroll = true;
131        expect(menuButton.$.dropdown.allowOutsideScroll).to.be.equal(true);
132      });
133
134      test('restoreFocusOnClose propagates to <iron-dropdown>', function() {
135        menuButton.restoreFocusOnClose = false;
136        expect(menuButton.$.dropdown.restoreFocusOnClose).to.be.equal(false);
137        menuButton.restoreFocusOnClose = true;
138        expect(menuButton.$.dropdown.restoreFocusOnClose).to.be.equal(true);
139      });
140
141    });
142
143    suite('when there are two buttons', function() {
144      var menuButton;
145      var trigger;
146      var otherButton;
147      var otherTrigger;
148
149      setup(function() {
150        var buttons = fixture('TwoMenuButtons');
151        menuButton = buttons[0];
152        otherButton = buttons[1];
153        trigger = Polymer.dom(menuButton).querySelector('.dropdown-trigger');
154        otherTrigger = Polymer.dom(otherButton).querySelector('.dropdown-trigger');
155      });
156
157      test('closes current and opens other', function(done) {
158        expect(menuButton.opened).to.be.equal(false);
159        expect(otherButton.opened).to.be.equal(false);
160
161        /*
162          NOTE: iron-overlay-behavior adds listeners asynchronously when the
163          overlay opens, so we need to wait for this event which is a
164          more-explicit signal that tells us that the overlay is really opened.
165         */
166        menuButton.addEventListener('iron-overlay-opened', function() {
167          expect(menuButton.opened).to.be.equal(true);
168          expect(otherButton.opened).to.be.equal(false);
169
170          var firstClosed = false;
171          var secondOpened = false;
172
173          menuButton.addEventListener('paper-dropdown-close', function() {
174            firstClosed = true;
175          });
176
177          otherButton.addEventListener('paper-dropdown-open', function() {
178            secondOpened = true;
179          });
180
181          Polymer.Base.async(function() {
182            MockInteractions.tap(otherTrigger);
183          });
184
185
186          Polymer.Base.async(function() {
187            expect(firstClosed).to.be.equal(true);
188            expect(secondOpened).to.be.equal(true);
189
190            done();
191          });
192        });
193
194        MockInteractions.tap(trigger);
195      });
196    });
197  </script>
198</body>
199</html>
200