| 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 |