OLD | NEW |
1 // Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 @TestOn('browser') | 4 @TestOn('browser') |
5 library polymer_elements.test.paper_badge_test; | 5 library polymer_elements.test.paper_badge_test; |
6 | 6 |
7 import 'dart:async'; | 7 import 'dart:async'; |
8 import 'dart:html'; | 8 import 'dart:html'; |
9 import 'package:polymer_elements/paper_badge.dart'; | 9 import 'package:polymer_elements/paper_badge.dart'; |
10 import 'package:web_components/web_components.dart'; | 10 import 'package:web_components/web_components.dart'; |
11 import 'package:test/test.dart'; | 11 import 'package:test/test.dart'; |
12 import 'common.dart'; | 12 import 'common.dart'; |
13 | 13 |
14 main() async { | 14 main() async { |
15 await initWebComponents(); | 15 await initWebComponents(); |
16 | 16 |
17 group('basic', () { | 17 group('basic', () { |
18 test('badge is positioned correctly', () { | 18 test('badge is positioned correctly', () { |
19 DivElement f = fixture('basic'); | 19 DivElement f = fixture('basic'); |
20 PaperBadge badge = f.querySelector('paper-badge'); | 20 PaperBadge badge = f.querySelector('paper-badge'); |
21 HtmlElement actualbadge = badge.querySelector('#badge'); | 21 HtmlElement actualbadge = badge.querySelector('#badge'); |
22 expect(actualbadge.text, equals("1")); | 22 expect(actualbadge.text, equals("1")); |
| 23 expect(badge.target.getAttribute('id'), 'target'); |
23 badge.updatePosition(); | 24 badge.updatePosition(); |
24 | 25 |
25 Completer done = new Completer(); | 26 Completer done = new Completer(); |
26 | 27 |
27 wait(1).then((_) { | 28 wait(1).then((_) { |
28 Rectangle divRect = f.querySelector('#target').getBoundingClientRect(); | 29 Rectangle divRect = f.querySelector('#target').getBoundingClientRect(); |
29 expect(divRect.width, equals(100)); | 30 expect(divRect.width, equals(100)); |
30 expect(divRect.height, equals(20)); | 31 expect(divRect.height, equals(20)); |
31 | 32 |
32 Rectangle contentRect = badge.getBoundingClientRect(); | 33 Rectangle contentRect = badge.getBoundingClientRect(); |
33 expect(contentRect.width, equals(22)); | 34 expect(contentRect.width, equals(22)); |
34 expect(contentRect.height, equals(22)); | 35 expect(contentRect.height, equals(22)); |
35 // The target div is 100 x 20, and the badge is centered on the | 36 // The target div is 100 x 20, and the badge is centered on the |
36 // top right corner. | 37 // top right corner. |
37 expect(contentRect.left, equals(100 - 11)); | 38 expect(contentRect.left, equals(100 - 11)); |
38 expect(contentRect.top, equals(0 - 11)); | 39 expect(contentRect.top, equals(0 - 11)); |
39 // Also check the math, just in case. | 40 // Also check the math, just in case. |
40 expect(contentRect.left, equals(divRect.width - 11)); | 41 expect(contentRect.left, equals(divRect.width - 11)); |
41 expect(contentRect.top, equals(divRect.top - 11)); | 42 expect(contentRect.top, equals(divRect.top - 11)); |
42 done.complete(); | 43 done.complete(); |
43 }); | 44 }); |
44 | 45 |
45 return done.future; | 46 return done.future; |
46 }); | 47 }); |
47 test('badge is positioned correctly after being dynamically set', () { | 48 test('badge is positioned correctly after being dynamically set', () { |
48 DivElement f = fixture('dynamic'); | 49 DivElement f = fixture('dynamic'); |
49 PaperBadge badge = f.querySelector('paper-badge'); | 50 PaperBadge badge = f.querySelector('paper-badge'); |
50 badge.updatePosition(); | 51 badge.updatePosition(); |
51 | 52 |
| 53 expect(badge.target.getAttribute('id'), isNot('target')); |
| 54 |
52 Completer done = new Completer(); | 55 Completer done = new Completer(); |
53 | 56 |
54 wait(1).then((_) { | 57 wait(1).then((_) { |
55 Rectangle contentRect = badge.getBoundingClientRect(); | 58 Rectangle contentRect = badge.getBoundingClientRect(); |
56 expect(contentRect.left, isNot(100 - 11)); | 59 expect(contentRect.left, isNot(100 - 11)); |
57 badge.forId = 'target'; | 60 badge.forId = 'target'; |
| 61 expect(badge.target.getAttribute('id'), 'target'); |
58 badge.updatePosition(); | 62 badge.updatePosition(); |
59 | 63 |
60 wait(1).then((_) { | 64 wait(1).then((_) { |
61 Rectangle divRect = | 65 Rectangle divRect = |
62 f.querySelector('#target').getBoundingClientRect(); | 66 f.querySelector('#target').getBoundingClientRect(); |
63 expect(divRect.width, equals(100)); | 67 expect(divRect.width, equals(100)); |
64 expect(divRect.height, equals(20)); | 68 expect(divRect.height, equals(20)); |
65 | 69 |
66 Rectangle contentRect = badge.getBoundingClientRect(); | 70 Rectangle contentRect = badge.getBoundingClientRect(); |
67 expect(contentRect.width, equals(22)); | 71 expect(contentRect.width, equals(22)); |
68 expect(contentRect.height, equals(22)); | 72 expect(contentRect.height, equals(22)); |
69 // The target div is 100 x 20, and the badge is centered on the | 73 // The target div is 100 x 20, and the badge is centered on the |
70 // top right corner. | 74 // top right corner. |
71 expect(contentRect.left, equals(100 - 11)); | 75 expect(contentRect.left, equals(100 - 11)); |
72 expect(contentRect.top, equals(0 - 11)); | 76 expect(contentRect.top, equals(0 - 11)); |
73 // Also check the math, just in case. | 77 // Also check the math, just in case. |
74 expect(contentRect.left, equals(divRect.width - 11)); | 78 expect(contentRect.left, equals(divRect.width - 11)); |
75 expect(contentRect.top, equals(divRect.top - 11)); | 79 expect(contentRect.top, equals(divRect.top - 11)); |
76 done.complete(); | 80 done.complete(); |
77 }); | 81 }); |
78 }); | 82 }); |
79 | 83 |
80 return done.future; | 84 return done.future; |
81 }); | 85 }); |
82 }); | 86 }); |
| 87 |
| 88 test('badge is positioned correctly when nested in a target element', () async
{ |
| 89 var f = fixture('nested'); |
| 90 var badge = f.querySelector('paper-badge'); |
| 91 |
| 92 expect(badge.target.getAttribute('id'), 'target'); |
| 93 |
| 94 badge.updatePosition(); |
| 95 |
| 96 await wait(1); |
| 97 var divRect = f.querySelector('#target').getBoundingClientRect(); |
| 98 expect(divRect.width, 100); |
| 99 expect(divRect.height, 20); |
| 100 |
| 101 var contentRect = badge.getBoundingClientRect(); |
| 102 expect(contentRect.width, 22); |
| 103 expect(contentRect.height, 22); |
| 104 |
| 105 // The target div is 100 x 20, and the badge is centered on the |
| 106 // top right corner. |
| 107 expect(contentRect.left, 100 - 11); |
| 108 expect(contentRect.top, 0 - 11); |
| 109 |
| 110 // Also check the math, just in case. |
| 111 expect(contentRect.left, divRect.width - 11); |
| 112 expect(contentRect.top, divRect.top - 11); |
| 113 }); |
83 | 114 |
84 group('badge is inside a custom element', () { | 115 group('badge is inside a custom element', () { |
85 test('badge is positioned correctly', () { | 116 test('badge is positioned correctly', () { |
86 HtmlElement f = fixture('custom'); | 117 HtmlElement f = fixture('custom'); |
87 | 118 |
88 PaperBadge badge = f.querySelector('paper-badge'); | 119 PaperBadge badge = f.querySelector('paper-badge'); |
89 HtmlElement actualbadge = badge.querySelector('#badge'); | 120 HtmlElement actualbadge = badge.querySelector('#badge'); |
90 expect(actualbadge.text, equals("1")); | 121 expect(actualbadge.text, equals("1")); |
91 badge.updatePosition(); | 122 badge.updatePosition(); |
92 | 123 |
(...skipping 13 matching lines...) Expand all Loading... |
106 expect(contentRect.top, equals(0 - 11)); | 137 expect(contentRect.top, equals(0 - 11)); |
107 // Also check the math, just in case. | 138 // Also check the math, just in case. |
108 expect(contentRect.left, equals(divRect.width - 11)); | 139 expect(contentRect.left, equals(divRect.width - 11)); |
109 expect(contentRect.top, equals(divRect.top - 11)); | 140 expect(contentRect.top, equals(divRect.top - 11)); |
110 | 141 |
111 done.complete(); | 142 done.complete(); |
112 }); | 143 }); |
113 }); | 144 }); |
114 }); | 145 }); |
115 } | 146 } |
OLD | NEW |