test: Convert some material tests to zoneless

src/material/core/ripple/ripple.spec.ts

@@ -286,17 +286,6 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
 
-    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();
-    });
-
     it('should only persist the latest ripple on pointer down', () => {
       dispatchMouseEvent(rippleTarget, 'mousedown');
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);

src/material/core/ripple/ripple.zone.spec.ts

@@ -0,0 +1,60 @@
+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;
+}