Skip to content

Commit 27778ad

Browse files
committed
debugging test
1 parent 02197b3 commit 27778ad

File tree

1 file changed

+28
-29
lines changed

1 file changed

+28
-29
lines changed

src/lib/core/ripple/ripple.spec.ts

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,34 @@ describe('MdRipple', () => {
5656
rippleDirective = fixture.componentInstance.ripple;
5757
});
5858

59+
it('sizes ripple to cover element', () => {
60+
let elementRect = rippleTarget.getBoundingClientRect();
61+
62+
// Dispatch a ripple at the following relative coordinates (X: 50| Y: 75)
63+
dispatchMouseEvent(rippleTarget, 'mousedown', 50, 75);
64+
dispatchMouseEvent(rippleTarget, 'mouseup');
65+
66+
// Calculate distance from the click to farthest edge of the ripple target.
67+
let maxDistanceX = TARGET_WIDTH - 50;
68+
let maxDistanceY = TARGET_HEIGHT - 75;
69+
70+
// At this point the foreground ripple should be created with a div centered at the click
71+
// location, and large enough to reach the furthest corner, which is 250px to the right
72+
// and 125px down relative to the click position.
73+
let expectedRadius = Math.sqrt(maxDistanceX * maxDistanceX + maxDistanceY * maxDistanceY);
74+
let expectedLeft = elementRect.left + 50 - expectedRadius;
75+
let expectedTop = elementRect.top + 75 - expectedRadius;
76+
77+
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
78+
79+
// Note: getBoundingClientRect won't work because there's a transform applied to make the
80+
// ripple start out tiny.
81+
expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
82+
expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
83+
expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
84+
expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
85+
});
86+
5987
it('creates ripple on mousedown', () => {
6088
dispatchMouseEvent(rippleTarget, 'mousedown');
6189
dispatchMouseEvent(rippleTarget, 'mouseup');
@@ -137,35 +165,6 @@ describe('MdRipple', () => {
137165
expect(parseFloat(rippleElement.style.top)).toBeCloseTo(TARGET_HEIGHT / 2 - radius, 1);
138166
});
139167

140-
it('sizes ripple to cover element', () => {
141-
let elementRect = rippleTarget.getBoundingClientRect();
142-
143-
// Dispatch a ripple at the following relative coordinates (X: 50| Y: 75)
144-
dispatchMouseEvent(rippleTarget, 'mousedown', 50, 75);
145-
dispatchMouseEvent(rippleTarget, 'mouseup');
146-
147-
// Calculate distance from the click to farthest edge of the ripple target.
148-
let maxDistanceX = TARGET_WIDTH - 50;
149-
let maxDistanceY = TARGET_HEIGHT - 75;
150-
151-
// At this point the foreground ripple should be created with a div centered at the click
152-
// location, and large enough to reach the furthest corner, which is 250px to the right
153-
// and 125px down relative to the click position.
154-
let expectedRadius = Math.sqrt(maxDistanceX * maxDistanceX + maxDistanceY * maxDistanceY);
155-
let expectedLeft = elementRect.left + 50 - expectedRadius;
156-
let expectedTop = elementRect.top + 75 - expectedRadius;
157-
158-
let ripple = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
159-
160-
// Note: getBoundingClientRect won't work because there's a transform applied to make the
161-
// ripple start out tiny.
162-
expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
163-
expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
164-
expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
165-
expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
166-
});
167-
168-
169168
it('cleans up the event handlers when the container gets destroyed', () => {
170169
fixture = TestBed.createComponent(RippleContainerWithNgIf);
171170
fixture.detectChanges();

0 commit comments

Comments
 (0)