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 clicked = false; | |
46 actionButton.addEventListener('click', function() { | |
47 clicked = true; | |
48 }); | |
49 | |
50 // Enter key should ignore disabled buttons. | |
51 MockInteractions.keyEventOn( | |
52 dialog, 'keypress', 13, undefined, 'Enter'); | |
dpapad
2017/04/03 19:30:24
Nit: Indent off by 2
tommycli
2017/04/03 22:57:55
Done. I ran git cl format --js.
| |
53 assertFalse(clicked); | |
54 | |
55 // Enter key should trigger enabled buttons. | |
56 actionButton.disabled = false; | |
57 MockInteractions.keyEventOn( | |
58 dialog, 'keypress', 13, undefined, 'Enter'); | |
dpapad
2017/04/03 19:30:24
Nit: Indent off by 2
tommycli
2017/04/03 22:57:55
Done. Ran git cl format --js.
| |
59 assertTrue(clicked); | |
60 | |
61 // Enter keys on other buttons should be ignored. | |
62 clicked = false; | |
63 var otherButton = document.body.querySelector('#other-button'); | |
64 assertTrue(!!otherButton); | |
65 MockInteractions.keyEventOn( | |
66 otherButton, 'keypress', 13, undefined, 'Enter'); | |
dpapad
2017/04/03 19:30:24
Nit: Indent off by 2
tommycli
2017/04/03 22:57:55
Done.
| |
67 assertFalse(clicked); | |
68 }); | |
dpapad
2017/04/03 19:30:24
Optional suggestion for one more test case.
- Ch
tommycli
2017/04/03 22:57:55
Done.
| |
69 | |
29 test('focuses [autofocus] instead of title when present', function() { | 70 test('focuses [autofocus] instead of title when present', function() { |
30 document.body.innerHTML = ` | 71 document.body.innerHTML = ` |
31 <dialog is="cr-dialog"> | 72 <dialog is="cr-dialog"> |
32 <div class="title">title</div> | 73 <div class="title">title</div> |
33 <div class="body"><button autofocus>button</button></div> | 74 <div class="body"><button autofocus>button</button></div> |
34 </dialog>`; | 75 </dialog>`; |
35 | 76 |
36 var dialog = document.body.querySelector('dialog'); | 77 var dialog = document.body.querySelector('dialog'); |
37 var button = document.body.querySelector('button'); | 78 var button = document.body.querySelector('button'); |
38 | 79 |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
72 } | 113 } |
73 }); | 114 }); |
74 observer.observe(bodyContainer, {attributes: true}); | 115 observer.observe(bodyContainer, {attributes: true}); |
75 | 116 |
76 // Height is normally set via CSS, but mixin doesn't work with innerHTML. | 117 // Height is normally set via CSS, but mixin doesn't work with innerHTML. |
77 bodyContainer.style.height = '1px'; | 118 bodyContainer.style.height = '1px'; |
78 bodyContainer.scrollTop = 100; | 119 bodyContainer.scrollTop = 100; |
79 dialog.showModal(); // Attach the dialog for the first time here. | 120 dialog.showModal(); // Attach the dialog for the first time here. |
80 }); | 121 }); |
81 }); | 122 }); |
OLD | NEW |