• 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    });
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