OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 suite('cr-dialog', function() { | 5 suite('cr-dialog', function() { |
6 setup(function() { | 6 setup(function() { |
7 PolymerTest.clearBody(); | 7 PolymerTest.clearBody(); |
8 }); | 8 }); |
9 | 9 |
10 test('focuses title on show', function() { | 10 test('focuses title on show', function() { |
11 document.body.innerHTML = ` | 11 document.body.innerHTML = ` |
12 <dialog is="cr-dialog"> | 12 <dialog is="cr-dialog"> |
13 <div class="title">title</div> | 13 <div class="title">title</div> |
14 <div class="body"><button>button</button></div> | 14 <div class="body"><button>button</button></div> |
15 </dialog>`; | 15 </dialog>`; |
16 | 16 |
17 var dialog = document.body.querySelector('dialog'); | 17 var dialog = document.body.querySelector('dialog'); |
18 var button = document.body.querySelector('button'); | 18 var button = document.body.querySelector('button'); |
19 | 19 |
20 assertNotEquals(dialog, document.activeElement); | 20 assertNotEquals(dialog, document.activeElement); |
21 assertNotEquals(button, document.activeElement); | 21 assertNotEquals(button, document.activeElement); |
22 | 22 |
23 dialog.showModal(); | 23 dialog.showModal(); |
24 | 24 |
25 expectEquals(dialog, document.activeElement); | 25 expectEquals(dialog, document.activeElement); |
26 expectNotEquals(button, document.activeElement); | 26 expectNotEquals(button, document.activeElement); |
27 }); | 27 }); |
28 | 28 |
| 29 test('enter key clicks action button', function() { |
| 30 document.body.innerHTML = ` |
| 31 <dialog is="cr-dialog"> |
| 32 <div class="title">title</div> |
| 33 <div class="body"> |
| 34 <button class="action-button" disabled>button</button> |
| 35 <button id="other-button">other button</button> |
| 36 </div> |
| 37 </dialog>`; |
| 38 |
| 39 var dialog = document.body.querySelector('dialog'); |
| 40 var actionButton = document.body.querySelector('.action-button'); |
| 41 |
| 42 dialog.showModal(); |
| 43 |
| 44 // MockInteractions triggers event listeners synchronously. |
| 45 var clickedCounter = 0; |
| 46 actionButton.addEventListener('click', function() { |
| 47 clickedCounter += 1; |
| 48 }); |
| 49 |
| 50 // Enter key should ignore disabled buttons. |
| 51 MockInteractions.keyEventOn(dialog, 'keypress', 13, undefined, 'Enter'); |
| 52 assertEquals(0, clickedCounter); |
| 53 |
| 54 // Enter key should trigger enabled buttons. |
| 55 actionButton.disabled = false; |
| 56 MockInteractions.keyEventOn(dialog, 'keypress', 13, undefined, 'Enter'); |
| 57 assertEquals(1, clickedCounter); |
| 58 |
| 59 // Enter keys on other buttons should be ignored. |
| 60 clickedCounter = 0; |
| 61 var otherButton = document.body.querySelector('#other-button'); |
| 62 assertTrue(!!otherButton); |
| 63 MockInteractions.keyEventOn( |
| 64 otherButton, 'keypress', 13, undefined, 'Enter'); |
| 65 assertEquals(0, clickedCounter); |
| 66 |
| 67 // Enter key on the action button should only fire the click handler once. |
| 68 MockInteractions.tap(actionButton, 'keypress', 13, undefined, 'Enter'); |
| 69 assertEquals(1, clickedCounter); |
| 70 }); |
| 71 |
29 test('focuses [autofocus] instead of title when present', function() { | 72 test('focuses [autofocus] instead of title when present', function() { |
30 document.body.innerHTML = ` | 73 document.body.innerHTML = ` |
31 <dialog is="cr-dialog"> | 74 <dialog is="cr-dialog"> |
32 <div class="title">title</div> | 75 <div class="title">title</div> |
33 <div class="body"><button autofocus>button</button></div> | 76 <div class="body"><button autofocus>button</button></div> |
34 </dialog>`; | 77 </dialog>`; |
35 | 78 |
36 var dialog = document.body.querySelector('dialog'); | 79 var dialog = document.body.querySelector('dialog'); |
37 var button = document.body.querySelector('button'); | 80 var button = document.body.querySelector('button'); |
38 | 81 |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 } | 115 } |
73 }); | 116 }); |
74 observer.observe(bodyContainer, {attributes: true}); | 117 observer.observe(bodyContainer, {attributes: true}); |
75 | 118 |
76 // Height is normally set via CSS, but mixin doesn't work with innerHTML. | 119 // Height is normally set via CSS, but mixin doesn't work with innerHTML. |
77 bodyContainer.style.height = '1px'; | 120 bodyContainer.style.height = '1px'; |
78 bodyContainer.scrollTop = 100; | 121 bodyContainer.scrollTop = 100; |
79 dialog.showModal(); // Attach the dialog for the first time here. | 122 dialog.showModal(); // Attach the dialog for the first time here. |
80 }); | 123 }); |
81 }); | 124 }); |
OLD | NEW |