diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index f375af0c6b08..afd308a2aed3 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -75,6 +75,7 @@ describe('MdRipple', () => { } describe('basic ripple', () => { + let rippleDirective: MdRipple; const TARGET_HEIGHT = 200; const TARGET_WIDTH = 300; @@ -83,7 +84,8 @@ describe('MdRipple', () => { fixture = TestBed.createComponent(BasicRippleContainer); fixture.detectChanges(); - rippleTarget = fixture.debugElement.nativeElement.querySelector('[mat-ripple]'); + rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]'); + rippleDirective = fixture.componentInstance.ripple; }); it('creates ripple on mousedown', () => { @@ -111,15 +113,29 @@ describe('MdRipple', () => { })); it('creates ripples when manually triggered', () => { - let rippleComponent = fixture.debugElement.componentInstance.ripple as MdRipple; - expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); - rippleComponent.launch(0, 0); + rippleDirective.launch(0, 0); expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1); }); + it('creates manual ripples with the default ripple config', () => { + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); + + // Calculate the diagonal distance and divide it by two for the center radius. + let radius = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH) / 2; + + rippleDirective.centered = true; + rippleDirective.launch(0, 0); + + let rippleElement = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement; + + expect(rippleElement).toBeTruthy(); + expect(parseFloat(rippleElement.style.left)).toBeCloseTo(TARGET_WIDTH / 2 - radius, 1); + expect(parseFloat(rippleElement.style.top)).toBeCloseTo(TARGET_HEIGHT / 2 - radius, 1); + }); + it('sizes ripple to cover element', () => { let elementRect = rippleTarget.getBoundingClientRect(); @@ -382,13 +398,13 @@ describe('MdRipple', () => { @Component({ template: ` -