61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
|
import {dispatchMouseEvent} from '@angular/cdk/testing/private';
|
||
|
|
import {Component, ViewChild} from '@angular/core';
|
||
|
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||
|
|
import {MatRippleModule} from '.';
|
||
|
|
import {MatRipple} from './ripple';
|
||
|
|
|
||
|
|
describe('MatRipple Zone.js integration', () => {
|
||
|
|
let fixture: ComponentFixture<any>;
|
||
|
|
let rippleTarget: HTMLElement;
|
||
|
|
let originalBodyMargin: string | null;
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
TestBed.configureTestingModule({
|
||
|
|
imports: [MatRippleModule, BasicRippleContainer],
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
// Set body margin to 0 during tests so it doesn't mess up position calculations.
|
||
|
|
originalBodyMargin = document.body.style.margin;
|
||
|
|
document.body.style.margin = '0';
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
document.body.style.margin = originalBodyMargin!;
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('basic ripple', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
fixture = TestBed.createComponent(BasicRippleContainer);
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('does not run events inside the NgZone', () => {
|
||
|
|
const spy = jasmine.createSpy('zone unstable callback');
|
||
|
|
const subscription = fixture.ngZone!.onUnstable.subscribe(spy);
|
||
|
|
|
||
|
|
dispatchMouseEvent(rippleTarget, 'mousedown');
|
||
|
|
dispatchMouseEvent(rippleTarget, 'mouseup');
|
||
|
|
|
||
|
|
expect(spy).not.toHaveBeenCalled();
|
||
|
|
subscription.unsubscribe();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
template: `
|
||
|
|
<div id="container" #ripple="matRipple" matRipple
|
||
|
|
style="position: relative; width:300px; height:200px;">
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
standalone: true,
|
||
|
|
imports: [MatRippleModule],
|
||
|
|
})
|
||
|
|
class BasicRippleContainer {
|
||
|
|
@ViewChild('ripple') ripple: MatRipple;
|
||
|
|
}
|