diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 330da08fea53..1d14b7a2f037 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -2,8 +2,9 @@ import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/ import {Component, ViewChild} from '@angular/core'; import {MdRipple, MdRippleModule, MD_DISABLE_RIPPLES, RippleState} from './index'; import {ViewportRuler} from '../overlay/position/viewport-ruler'; -import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer'; +import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION, RippleConfig} from './ripple-renderer'; import {dispatchMouseEvent} from '../testing/dispatch-events'; +import {MD_RIPPLES_CONFIG} from './ripple'; /** Extracts the numeric value of a pixel size string like '123px'. */ const pxStringToFloat = (s: string) => { @@ -390,6 +391,54 @@ describe('MdRipple', () => { }); + describe('with a global config', () => { + let rippleDirective: MdRipple; + + function createTestComponent(rippleConfig: RippleConfig) { + // Reset the previously configured testing module to be able set new providers. + // The testing module has been initialized in the root describe group for the ripples. + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + imports: [MdRippleModule], + declarations: [BasicRippleContainer], + providers: [{ provide: MD_RIPPLES_CONFIG, useValue: rippleConfig }] + }); + + fixture = TestBed.createComponent(BasicRippleContainer); + fixture.detectChanges(); + + rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]'); + rippleDirective = fixture.componentInstance.ripple; + } + + it('should be able to overwrite the speedFactor', fakeAsync(() => { + createTestComponent({ speedFactor: 0.5 }); + + dispatchMouseEvent(rippleTarget, 'mousedown'); + dispatchMouseEvent(rippleTarget, 'mouseup'); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1); + + // Calculates the duration for fading-in and fading-out the ripple. + tick(RIPPLE_FADE_IN_DURATION * 2 + RIPPLE_FADE_OUT_DURATION); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); + })); + + it('should be able to overwrite the color', fakeAsync(() => { + createTestComponent({ color: 'red' }); + + dispatchMouseEvent(rippleTarget, 'mousedown'); + dispatchMouseEvent(rippleTarget, 'mouseup'); + + let rippleElement = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement; + + expect(rippleElement).toBeTruthy(); + expect(rippleElement.style.backgroundColor).toBe('red'); + })); + + }); + describe('configuring behavior', () => { let controller: RippleContainerWithInputBindings; let rippleComponent: MdRipple; diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 844cf20144b7..fe56d1ee4d1d 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -13,10 +13,14 @@ import { import {RippleConfig, RippleRenderer} from './ripple-renderer'; import {ViewportRuler} from '../overlay/position/viewport-ruler'; import {RippleRef} from './ripple-ref'; +import {extendObject} from '../util/object-extend'; /** OpaqueToken that can be used to globally disable all ripples. Except programmatic ones. */ export const MD_DISABLE_RIPPLES = new OpaqueToken('md-disable-ripples'); +/** OpaqueToken that can be used to specify a global ripple configuration. */ +export const MD_RIPPLES_CONFIG = new OpaqueToken('md-ripples-config'); + @Directive({ selector: '[md-ripple], [mat-ripple]', exportAs: 'mdRipple', @@ -71,7 +75,8 @@ export class MdRipple implements OnChanges, OnDestroy { private _rippleRenderer: RippleRenderer; constructor(elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler, - @Optional() @Inject(MD_DISABLE_RIPPLES) private _forceDisableRipples: boolean) { + @Optional() @Inject(MD_DISABLE_RIPPLES) private _forceDisableRipples: boolean, + @Optional() @Inject(MD_RIPPLES_CONFIG) private _globalRippleConfig: RippleConfig) { this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler); } @@ -102,11 +107,11 @@ export class MdRipple implements OnChanges, OnDestroy { /** Ripple configuration from the directive's input values. */ get rippleConfig(): RippleConfig { - return { + return extendObject({ centered: this.centered, speedFactor: this.speedFactor, radius: this.radius, color: this.color - }; + }, this._globalRippleConfig); } }