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_tooltip_test; | 5 library polymer_elements.test.paper_tooltip_test; |
6 | 6 |
7 import 'dart:async'; | 7 import 'dart:async'; |
8 import 'dart:html'; | 8 import 'dart:html'; |
9 import 'package:polymer/polymer.dart'; | 9 import 'package:polymer/polymer.dart'; |
10 import 'package:polymer_elements/paper_tooltip.dart'; | 10 import 'package:polymer_elements/paper_tooltip.dart'; |
(...skipping 232 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
243 focus(target); | 243 focus(target); |
244 expect(isHidden(actualTooltip), isFalse); | 244 expect(isHidden(actualTooltip), isFalse); |
245 | 245 |
246 tooltip.on['neon-animation-finish'].take(1).listen((_) { | 246 tooltip.on['neon-animation-finish'].take(1).listen((_) { |
247 expect(isHidden(actualTooltip), isTrue); | 247 expect(isHidden(actualTooltip), isTrue); |
248 done.complete(); | 248 done.complete(); |
249 }); | 249 }); |
250 blur(target); | 250 blur(target); |
251 | 251 |
252 return done.future; | 252 return done.future; |
253 }, skip: 'https://github.com/dart-lang/polymer_elements/issues/52'); | 253 }); |
254 | 254 |
255 test('tooltip unlistens to target on detach', () { | 255 test('tooltip unlistens to target on detach', () { |
256 HtmlElement f = fixture('basic'); | 256 HtmlElement f = fixture('basic'); |
257 DivElement target = f.querySelector('#target'); | 257 DivElement target = f.querySelector('#target'); |
258 PaperTooltip tooltip = f.querySelector('paper-tooltip'); | 258 PaperTooltip tooltip = f.querySelector('paper-tooltip'); |
259 | 259 |
260 sinon.spy(tooltip.jsElement, 'show'); | 260 sinon.spy(tooltip.jsElement, 'show'); |
261 | 261 |
262 focus(target); | 262 focus(target); |
263 expect(tooltip.jsElement['show']['callCount'], equals(1)); | 263 expect(tooltip.jsElement['show']['callCount'], equals(1)); |
264 | 264 |
265 focus(target); | 265 focus(target); |
266 expect(tooltip.jsElement['show']['callCount'], equals(2)); | 266 expect(tooltip.jsElement['show']['callCount'], equals(2)); |
267 | 267 |
268 tooltip.remove(); | 268 tooltip.remove(); |
269 | 269 |
270 return wait(200).then((_) { | 270 return wait(200).then((_) { |
271 // No more listener means no more calling show. | 271 // No more listener means no more calling show. |
272 focus(target); | 272 focus(target); |
273 expect(tooltip.jsElement['show']['callCount'], equals(2)); | 273 expect(tooltip.jsElement['show']['callCount'], equals(2)); |
274 }); | 274 }); |
275 }); | 275 }); |
276 }); | 276 }); |
277 group('tooltip is inside a custom element', () { | 277 group('tooltip is inside a custom element', () { |
278 HtmlElement f; | 278 TestButton f; |
279 PaperTooltip tooltip; | 279 PaperTooltip tooltip; |
280 HtmlElement target; | 280 HtmlElement target; |
281 | 281 |
282 setUp(() { | 282 setUp(() { |
283 f = fixture('custom'); | 283 f = fixture('custom'); |
284 target = f.querySelector('#button'); | 284 target = f.$['button']; |
285 tooltip = f.querySelector('paper-tooltip'); | 285 tooltip = f.$['buttonTooltip']; |
286 }); | 286 }); |
287 | 287 |
288 test('tooltip is shown when target is focused', () { | 288 test('tooltip is shown when target is focused', () { |
289 HtmlElement actualTooltip = tooltip.querySelector('#tooltip'); | 289 HtmlElement actualTooltip = tooltip.querySelector('#tooltip'); |
290 expect(isHidden(actualTooltip), isTrue); | 290 expect(isHidden(actualTooltip), isTrue); |
291 | 291 |
292 focus(target); | 292 focus(target); |
293 expect(isHidden(actualTooltip), isFalse); | 293 expect(isHidden(actualTooltip), isFalse); |
294 }); | 294 }); |
295 | 295 |
296 test('tooltip is positioned correctly', () { | 296 test('tooltip is positioned correctly', () { |
297 HtmlElement actualTooltip = tooltip.querySelector('#tooltip'); | 297 HtmlElement actualTooltip = tooltip.querySelector('#tooltip'); |
298 expect(isHidden(actualTooltip), isTrue); | 298 expect(isHidden(actualTooltip), isTrue); |
299 | 299 |
300 focus(target); | 300 focus(target); |
301 expect(isHidden(actualTooltip), isFalse); | 301 expect(isHidden(actualTooltip), isFalse); |
302 | 302 |
303 Rectangle divRect = target.getBoundingClientRect(); | 303 Rectangle divRect = target.getBoundingClientRect(); |
304 expect(divRect.width, equals(100)); | 304 expect(divRect.width, equals(100)); |
305 expect(divRect.height, equals(20)); | 305 expect(divRect.height, equals(20)); |
306 | 306 |
307 Rectangle contentRect = tooltip.getBoundingClientRect(); | 307 Rectangle contentRect = tooltip.getBoundingClientRect(); |
308 expect(contentRect.width, equals(70)); | 308 expect(contentRect.width, equals(30)); |
309 expect(contentRect.height, equals(30)); | 309 expect(contentRect.height, equals(30)); |
310 | 310 |
311 // The target div width is 100, and the tooltip width is 70, and | 311 // The target div width is 100, and the tooltip width is 70, and |
312 // it's centered. The height of the target div is 20, and the | 312 // it's centered. The height of the target div is 20, and the |
313 // tooltip is 14px below. | 313 // tooltip is 14px below. |
314 expect(contentRect.left, equals((100 - 70) / 2)); | 314 expect(contentRect.left, equals((100 - 30) / 2)); |
315 expect(contentRect.top, equals(20 + 14)); | 315 expect(contentRect.top, equals(20 + 14)); |
316 | 316 |
317 // Also check the math, just in case. | 317 // Also check the math, just in case. |
318 expect(contentRect.left, equals((divRect.width - contentRect.width) / 2)); | 318 expect(contentRect.left, equals((divRect.width - contentRect.width) / 2)); |
319 expect(contentRect.top, equals(divRect.height + tooltip.offset)); | 319 expect(contentRect.top, equals(divRect.height + tooltip.offset)); |
320 }); | 320 }); |
321 }); | 321 }); |
322 | 322 |
323 group('a11y', () { | 323 group('a11y', () { |
324 test('has aria role "tooltip"', () { | 324 test('has aria role "tooltip"', () { |
325 HtmlElement f = fixture('basic'); | 325 HtmlElement f = fixture('basic'); |
326 PaperTooltip tooltip = f.querySelector('paper-tooltip'); | 326 PaperTooltip tooltip = f.querySelector('paper-tooltip'); |
327 | 327 |
328 expect(tooltip.getAttribute('role'), equals('tooltip')); | 328 expect(tooltip.getAttribute('role'), equals('tooltip')); |
329 }); | 329 }); |
330 }); | 330 }); |
| 331 |
| 332 // TODO(jakemac): investigate these |
| 333 // |
| 334 // a11ySuite('basic'); |
| 335 // a11ySuite('fitted'); |
| 336 // a11ySuite('no-text'); |
| 337 // a11ySuite('dynamic'); |
| 338 // a11ySuite('custom'); |
331 } | 339 } |
OLD | NEW |