src/material/tooltip/tooltip.zone.spec.ts - main - githubmirror/components

src/material/tooltip/tooltip.zone.spec.ts
92 строки3 KB
Kristiyan Kostadinov
refactor(material/tooltip): switch tests away from fakeAsync (#33100)
20 апр 2026, 10:11
20 апр 2026, 10:1139b0f55
import {CdkScrollable, OverlayModule} from '@angular/cdk/overlay';
import {dispatchFakeEvent, provideFakeDirectionality} from '@angular/cdk/testing/private';
import {
  Component,
  DebugElement,
  NgZone,
  ViewChild,
  provideZoneChangeDetection,
  ChangeDetectionStrategy,
} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {MatTooltipModule} from './tooltip-module';
import {MatTooltip, TooltipPosition} from './tooltip';

const initialTooltipMessage = 'initial tooltip message';

describe('MatTooltip Zone.js integration', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideZoneChangeDetection(), provideFakeDirectionality('rtl')],
    });
  });

  function wait(milliseconds: number) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
  }

  describe('scrollable usage', () => {
    let fixture: ComponentFixture<ScrollableTooltipDemo>;
    let buttonDebugElement: DebugElement;
    let tooltipDirective: MatTooltip;

    beforeEach(() => {
      fixture = TestBed.createComponent(ScrollableTooltipDemo);
      fixture.detectChanges();
      buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
      tooltipDirective = buttonDebugElement.injector.get<MatTooltip>(MatTooltip);
    });

    it('should execute the `hide` call, after scrolling away, inside the NgZone', async () => {
      const inZoneSpy = jasmine.createSpy('in zone spy');

      tooltipDirective.show();
      fixture.detectChanges();
      await wait(0);

      spyOn(tooltipDirective._tooltipInstance!, 'hide').and.callFake(() => {
        inZoneSpy(NgZone.isInAngularZone());
      });

      fixture.componentInstance.scrollDown();
      await wait(100);
      fixture.detectChanges();

      expect(inZoneSpy).toHaveBeenCalled();
      expect(inZoneSpy).toHaveBeenCalledWith(true);
    });
  });
});

@Component({
  selector: 'app',
  template: `
      <div cdkScrollable style="padding: 100px; margin: 300px;
                                 height: 200px; width: 200px; overflow: auto;">
        @if (showButton) {
          <button style="margin-bottom: 600px"
                [matTooltip]="message"
                [matTooltipPosition]="position">Button</button>
        }
      </div>`,
  imports: [MatTooltipModule, OverlayModule],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class ScrollableTooltipDemo {
  position: TooltipPosition = 'below';
  message: string = initialTooltipMessage;
  showButton: boolean = true;

  @ViewChild(CdkScrollable) scrollingContainer!: CdkScrollable;

  scrollDown() {
    const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement;
    scrollingContainerEl.scrollTop = 250;

    // Emit a scroll event from the scrolling element in our component.
    // This event should be picked up by the scrollable directive and notify.
    // The notification should be picked up by the service.
    dispatchFakeEvent(scrollingContainerEl, 'scroll');
  }
}