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_ripple_test; | 5 library polymer_elements.test.paper_ripple_test; |
6 | 6 |
7 import 'dart:html'; | 7 import 'dart:html' hide Point; |
8 import 'package:polymer_elements/paper_ripple.dart'; | 8 import 'package:polymer_elements/paper_ripple.dart'; |
9 import 'package:test/test.dart'; | 9 import 'package:test/test.dart'; |
10 import 'package:web_components/web_components.dart'; | 10 import 'package:web_components/web_components.dart'; |
11 import 'common.dart'; | 11 import 'common.dart'; |
12 | 12 |
13 main() async { | 13 main() async { |
14 await initWebComponents(); | 14 await initWebComponents(); |
15 | 15 |
16 group('<paper-ripple>', () { | 16 group('<paper-ripple>', () { |
17 CustomEvent mouseEvent; | 17 CustomEvent mouseEvent; |
18 DivElement rippleContainer; | 18 DivElement rippleContainer; |
19 PaperRipple ripple; | 19 PaperRipple ripple; |
20 | 20 |
21 group('when tapped', () { | 21 group('when tapped', () { |
22 setUp(() { | 22 setUp(() { |
23 rippleContainer = fixture('TrivialRipple'); | 23 rippleContainer = fixture('TrivialRipple'); |
24 ripple = rippleContainer.children.first; | 24 ripple = rippleContainer.children.first; |
25 mouseEvent = fakeMouseEvent(ripple, 10, 10); | |
26 }); | 25 }); |
27 | 26 |
28 test('creates a ripple', () { | 27 test('creates a ripple', () { |
29 expect(ripple.ripples.length, 0); | 28 expect(ripple.ripples.length, 0); |
30 ripple.downAction(mouseEvent); | 29 down(ripple); |
31 expect(ripple.ripples.length, 1); | 30 expect(ripple.ripples.length, 1); |
32 }); | 31 }); |
33 | 32 |
34 test('may create multiple ripples that overlap', () { | 33 test('may create multiple ripples that overlap', () { |
35 expect(ripple.ripples.length, 0); | 34 expect(ripple.ripples.length, 0); |
36 for (var i = 0; i < 3; ++i) { | 35 for (var i = 0; i < 3; ++i) { |
37 ripple.downAction(mouseEvent); | 36 down(ripple); |
38 expect(ripple.ripples.length, i + 1); | 37 expect(ripple.ripples.length, i + 1); |
39 } | 38 } |
40 }); | 39 }); |
41 }); | 40 }); |
| 41 |
| 42 group('when holdDown is togggled', () { |
| 43 setUp( () { |
| 44 rippleContainer = fixture('TrivialRipple'); |
| 45 ripple = rippleContainer.children.first; |
| 46 }); |
| 47 |
| 48 test('generates a ripple', () { |
| 49 ripple.holdDown = true; |
| 50 expect(ripple.ripples.length, 1); |
| 51 }); |
| 52 |
| 53 test('generates a ripple when noink', () { |
| 54 ripple.noink = true; |
| 55 ripple.holdDown = true; |
| 56 expect(ripple.ripples.length, 1); |
| 57 |
| 58 }); |
| 59 |
| 60 }); |
| 61 |
| 62 group('when target is noink', () { |
| 63 setUp( () { |
| 64 rippleContainer = fixture('NoinkTarget'); |
| 65 ripple = rippleContainer.children.first; |
| 66 }); |
| 67 |
| 68 test('tapping does not create a ripple', () { |
| 69 expect(ripple.keyEventTarget, ripple); |
| 70 expect(ripple.ripples.length, 0); |
| 71 down(ripple); |
| 72 expect(ripple.ripples.length, 0); |
| 73 }); |
| 74 |
| 75 test('ripples can be manually created', () { |
| 76 expect(ripple.ripples.length, 0); |
| 77 ripple.simulatedRipple(); |
| 78 expect(ripple.ripples.length, 1); |
| 79 }); |
| 80 }); |
42 | 81 |
43 group('with the `center` attribute set to true', () { | 82 group('with the `center` attribute set to true', () { |
44 setUp(() { | 83 setUp(() { |
45 rippleContainer = fixture('CenteringRipple'); | 84 rippleContainer = fixture('CenteringRipple'); |
46 ripple = rippleContainer.children.first; | 85 ripple = rippleContainer.children.first; |
47 mouseEvent = fakeMouseEvent(ripple, 10, 10); | |
48 }); | 86 }); |
49 | 87 |
50 test('ripples will center', () { | 88 test('ripples will center', () { |
51 var waveContainerElement; | 89 var waveContainerElement; |
52 // let's ask the browser what `translate3d(0px, 0px, 0)` will actually l
ook like | 90 // let's ask the browser what `translate3d(0px, 0px, 0)` will actually l
ook like |
53 var div = document.createElement('div'); | 91 var div = document.createElement('div'); |
54 div.style.transform = 'translate3d(0px, 0px, 0)'; | 92 div.style.transform = 'translate3d(0px, 0px, 0)'; |
55 ripple.downAction(mouseEvent); | 93 down(ripple); |
56 waveContainerElement = ripple.ripples[0]['waveContainer']; | 94 waveContainerElement = ripple.ripples[0]['waveContainer']; |
57 ripple.upAction(mouseEvent); | 95 up(ripple); |
58 return requestAnimationFrame().then((_) { | 96 return requestAnimationFrame().then((_) { |
59 var currentTransform = waveContainerElement.style.transform; | 97 var currentTransform = waveContainerElement.style.transform; |
60 expect(div.style.transform, isNotNull); | 98 expect(div.style.transform, isNotNull); |
61 expect(currentTransform, isNotNull); | 99 expect(currentTransform, isNotNull); |
62 expect(currentTransform, div.style.transform); | 100 expect(currentTransform, div.style.transform); |
63 }); | 101 }); |
64 }); | 102 }); |
65 }); | 103 }); |
66 | 104 |
67 group('with the `recenters` attribute set to true', () { | 105 group('with the `recenters` attribute set to true', () { |
68 setUp(() { | 106 setUp(() { |
69 rippleContainer = fixture('RecenteringRipple'); | 107 rippleContainer = fixture('RecenteringRipple'); |
70 ripple = rippleContainer.children.first; | 108 ripple = rippleContainer.children.first; |
71 mouseEvent = fakeMouseEvent(ripple, 10, 10); | 109 mouseEvent = fakeMouseEvent(ripple, 10, 10); |
72 }); | 110 }); |
73 | 111 |
74 test('ripples will gravitate towards the center', () { | 112 test('ripples will gravitate towards the center', () { |
75 var waveContainerElement; | 113 var waveContainerElement; |
76 var waveTranslateString; | 114 var waveTranslateString; |
77 ripple.downAction(mouseEvent); | 115 down(ripple, new Point(10, 10)); |
78 waveContainerElement = ripple.ripples[0]['waveContainer']; | 116 waveContainerElement = ripple.ripples[0]['waveContainer']; |
79 waveTranslateString = waveContainerElement.style.transform; | 117 waveTranslateString = waveContainerElement.style.transform; |
80 ripple.upAction(mouseEvent); | 118 up(ripple); |
81 return requestAnimationFrame().then((_) { | 119 return requestAnimationFrame().then((_) { |
82 expect(waveTranslateString, isNotNull); | 120 expect(waveTranslateString, isNotNull); |
83 expect(waveContainerElement.style.transform, isNotNull); | 121 expect(waveContainerElement.style.transform, isNotNull); |
84 expect( | 122 expect( |
85 waveContainerElement.style.transform, isNot(waveTranslateString)); | 123 waveContainerElement.style.transform, isNot(waveTranslateString)); |
86 }); | 124 }); |
87 }); | 125 }); |
88 }); | 126 }); |
89 }); | 127 }); |
90 } | 128 } |
91 | 129 |
92 CustomEvent fakeMouseEvent(Element target, int relativeX, int relativeY) { | 130 CustomEvent fakeMouseEvent(Element target, int relativeX, int relativeY) { |
93 var rect = target.getBoundingClientRect(); | 131 var rect = target.getBoundingClientRect(); |
94 return new CustomEvent('', | 132 return new CustomEvent('', |
95 detail: {'x': rect.left + relativeX, 'y': rect.top + relativeY}); | 133 detail: {'x': rect.left + relativeX, 'y': rect.top + relativeY}); |
96 } | 134 } |
OLD | NEW |