Skip to content

test(google-maps): move more tests away from fakeAsync #33521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crisbeto merged 1 commit into from
Jul 12, 2026
+88 −53
Merged

test(google-maps): move more tests away from fakeAsync #33521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 46 additions & 27 deletions src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';

import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
import {MapMarker} from '../map-marker/map-marker';
Expand Down Expand Up @@ -51,6 +51,7 @@ describe('DeprecatedMapMarkerClusterer', () => {
(window as any).MarkerClusterer = undefined;
});

// We can't test this one easily without `fakeAsync`.
it('throws an error if the clustering library has not been loaded', fakeAsync(() => {
(window as any).MarkerClusterer = undefined;
markerClustererConstructorSpy = createDeprecatedMarkerClustererConstructorSpy(
Expand All @@ -64,9 +65,10 @@ describe('DeprecatedMapMarkerClusterer', () => {
}).toThrowError(/MarkerClusterer class not found, cannot construct a marker cluster/);
}));

it('initializes a Google Map Marker Clusterer', fakeAsync(() => {
it('initializes a Google Map Marker Clusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith(mapSpy, [], {
ariaLabelFn: undefined,
Expand All @@ -88,9 +90,9 @@ describe('DeprecatedMapMarkerClusterer', () => {
zIndex: undefined,
zoomOnClick: undefined,
});
}));
});

it('sets marker clusterer inputs', fakeAsync(() => {
it('sets marker clusterer inputs', async () => {
fixture.componentInstance.ariaLabelFn = (testString: string) => testString;
fixture.componentInstance.averageCenter = true;
fixture.componentInstance.batchSize = 1;
Expand All @@ -109,7 +111,8 @@ describe('DeprecatedMapMarkerClusterer', () => {
fixture.componentInstance.zoomOnClick = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith(mapSpy, [], {
ariaLabelFn: jasmine.any(Function),
Expand All @@ -131,11 +134,12 @@ describe('DeprecatedMapMarkerClusterer', () => {
zIndex: 6,
zoomOnClick: true,
});
}));
});

it('sets marker clusterer options', fakeAsync(() => {
it('sets marker clusterer options', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);
const options: MarkerClustererOptions = {
enableRetinaIcons: true,
gridSize: 1337,
Expand All @@ -145,12 +149,15 @@ describe('DeprecatedMapMarkerClusterer', () => {
fixture.componentInstance.options = options;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
await fixture.whenStable();
await wait(50);
expect(markerClustererSpy.setOptions).toHaveBeenCalledWith(jasmine.objectContaining(options));
}));
});

it('gives precedence to specific inputs over options', fakeAsync(() => {
it('gives precedence to specific inputs over options', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);
const options: MarkerClustererOptions = {
enableRetinaIcons: true,
gridSize: 1337,
Expand All @@ -170,25 +177,29 @@ describe('DeprecatedMapMarkerClusterer', () => {
fixture.componentInstance.options = options;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.setOptions).toHaveBeenCalledWith(
jasmine.objectContaining(expectedOptions),
);
}));
});

it('sets Google Maps Markers in the MarkerClusterer', fakeAsync(() => {
it('sets Google Maps Markers in the MarkerClusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([
anyMarkerMatcher,
anyMarkerMatcher,
]);
}));
});

it('updates Google Maps Markers in the Marker Clusterer', fakeAsync(() => {
it('updates Google Maps Markers in the Marker Clusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([
anyMarkerMatcher,
Expand All @@ -198,7 +209,8 @@ describe('DeprecatedMapMarkerClusterer', () => {
fixture.componentInstance.state = 'state2';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([anyMarkerMatcher], true);
expect(markerClustererSpy.removeMarkers).toHaveBeenCalledWith([anyMarkerMatcher], true);
Expand All @@ -207,19 +219,21 @@ describe('DeprecatedMapMarkerClusterer', () => {
fixture.componentInstance.state = 'state0';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([], true);
expect(markerClustererSpy.removeMarkers).toHaveBeenCalledWith(
[anyMarkerMatcher, anyMarkerMatcher],
true,
);
expect(markerClustererSpy.repaint).toHaveBeenCalledTimes(2);
}));
});

it('exposes marker clusterer methods', fakeAsync(() => {
it('exposes marker clusterer methods', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);
const markerClustererComponent = fixture.componentInstance.markerClusterer;

markerClustererComponent.fitMapToMarkers(5);
Expand Down Expand Up @@ -286,11 +300,12 @@ describe('DeprecatedMapMarkerClusterer', () => {

markerClustererSpy.getZoomOnClick.and.returnValue(true);
expect(markerClustererComponent.getZoomOnClick()).toBe(true);
}));
});

it('initializes marker clusterer event handlers', fakeAsync(() => {
it('initializes marker clusterer event handlers', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addListener).toHaveBeenCalledWith(
'clusteringbegin',
Expand All @@ -301,9 +316,13 @@ describe('DeprecatedMapMarkerClusterer', () => {
jasmine.any(Function),
);
expect(markerClustererSpy.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
}));
});
});

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

@Component({
selector: 'test-app',
template: `
Expand Down
68 changes: 42 additions & 26 deletions src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
import type {MarkerClusterer, Renderer, Algorithm} from './map-marker-clusterer-types';

import {DEFAULT_OPTIONS} from '../google-map/google-map';
Expand Down Expand Up @@ -46,6 +46,7 @@ describe('MapMarkerClusterer', () => {
(window as any).markerClusterer = undefined;
});

// We can't test this easily without `fakeAsync`.
it('throws an error if the clustering library has not been loaded', fakeAsync(() => {
(window as any).markerClusterer = undefined;
markerClustererConstructorSpy = createMarkerClustererConstructorSpy(
Expand All @@ -59,37 +60,40 @@ describe('MapMarkerClusterer', () => {
}).toThrowError(/MarkerClusterer class not found, cannot construct a marker cluster/);
}));

it('initializes a Google Map Marker Clusterer', fakeAsync(() => {
it('initializes a Google Map Marker Clusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith({
map: mapSpy,
renderer: undefined,
algorithm: undefined,
onClusterClick: jasmine.any(Function),
});
}));
});

it('sets marker clusterer inputs', fakeAsync(() => {
it('sets marker clusterer inputs', async () => {
fixture.componentInstance.algorithm = {name: 'custom'} as any;
fixture.componentInstance.renderer = {render: () => null!};
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith({
map: mapSpy,
algorithm: fixture.componentInstance.algorithm,
renderer: fixture.componentInstance.renderer,
onClusterClick: jasmine.any(Function),
});
}));
});

it('recreates the clusterer if the options change', fakeAsync(() => {
it('recreates the clusterer if the options change', async () => {
fixture.componentInstance.algorithm = {name: 'custom1'} as any;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith({
map: mapSpy,
Expand All @@ -101,29 +105,32 @@ describe('MapMarkerClusterer', () => {
fixture.componentInstance.algorithm = {name: 'custom2'} as any;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererConstructorSpy).toHaveBeenCalledWith({
map: mapSpy,
algorithm: jasmine.objectContaining({name: 'custom2'}),
renderer: undefined,
onClusterClick: jasmine.any(Function),
});
}));
});

it('sets Google Maps Markers in the MarkerClusterer', fakeAsync(() => {
it('sets Google Maps Markers in the MarkerClusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([
anyMarkerMatcher,
anyMarkerMatcher,
]);
}));
});

it('updates Google Maps Markers in the Marker Clusterer', fakeAsync(() => {
it('updates Google Maps Markers in the Marker Clusterer', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([
anyMarkerMatcher,
Expand All @@ -133,7 +140,8 @@ describe('MapMarkerClusterer', () => {
fixture.componentInstance.state = 'state2';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([anyMarkerMatcher], true);
expect(markerClustererSpy.removeMarkers).toHaveBeenCalledWith([anyMarkerMatcher], true);
Expand All @@ -142,39 +150,47 @@ describe('MapMarkerClusterer', () => {
fixture.componentInstance.state = 'state0';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(markerClustererSpy.addMarkers).toHaveBeenCalledWith([], true);
expect(markerClustererSpy.removeMarkers).toHaveBeenCalledWith(
[anyMarkerMatcher, anyMarkerMatcher],
true,
);
expect(markerClustererSpy.render).toHaveBeenCalledTimes(2);
}));
});

it('initializes event handlers on the map related to clustering', fakeAsync(() => {
it('initializes event handlers on the map related to clustering', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(mapSpy.addListener).toHaveBeenCalledWith('clusteringbegin', jasmine.any(Function));
expect(mapSpy.addListener).not.toHaveBeenCalledWith('clusteringend', jasmine.any(Function));
}));
});

it('emits to clusterClick when the `onClusterClick` callback is invoked', fakeAsync(() => {
it('emits to clusterClick when the `onClusterClick` callback is invoked', async () => {
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(fixture.componentInstance.onClusterClick).not.toHaveBeenCalled();

const callback = markerClustererConstructorSpy.calls.mostRecent().args[0].onClusterClick;
callback({}, {}, {});
fixture.detectChanges();
flush();
await fixture.whenStable();
await wait(50);

expect(fixture.componentInstance.onClusterClick).toHaveBeenCalledTimes(1);
}));
});
});

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

@Component({
selector: 'test-app',
imports: [GoogleMapsModule],
Expand Down
Loading