Fix hard failure on google maps error

src/app/components/data-request/data-request.component.ts

@@ -19,7 +19,7 @@ import schema from "./data-request.schema.json";
     <p>To download a standard CSV of annotations</p>
 
     <ol>
-      <li>Open the site or point page you're interested in</li>
+      <li>Open the project, site, or point page you're interested in</li>
       <li>
         Use the <i>Download Annotations</i> button to download annotations
       </li>
@@ -54,7 +54,7 @@ class DataRequestComponent extends FormTemplate<DataRequest> implements OnInit {
     private api: DataRequestService,
     notifications: ToastrService,
     route: ActivatedRoute,
-    router: Router
+    router: Router,
   ) {
     super(notifications, route, router, {
       successMsg: () =>

src/app/components/projects/components/site-map/site-map.component.ts

@@ -5,10 +5,8 @@ import { withUnsubscribe } from "@helpers/unsubscribe/unsubscribe";
 import { Project } from "@models/Project";
 import { Region } from "@models/Region";
 import { ISite, Site } from "@models/Site";
-import {
-  MapMarkerOptions,
-  sanitizeMapMarkers,
-} from "@shared/map/map.component";
+import { MapMarkerOptions } from "@services/maps/maps.service";
+import { sanitizeMapMarkers } from "@shared/map/map.component";
 import { List } from "immutable";
 import { merge, Observable } from "rxjs";
 import { switchMap, takeUntil } from "rxjs/operators";
@@ -42,11 +40,11 @@ export class SiteMapComponent extends withUnsubscribe() implements OnChanges {
     if ((this.project || this.region) && !this.sitesSubset?.length) {
       this.getFilter(filters, this.project, this.region)
         .pipe(
-          switchMap((models) => this.getMarkers(models)),
-          takeUntil(this.unsubscribe)
+          switchMap((models: Site[]) => this.getMarkers(models)),
+          takeUntil(this.unsubscribe),
         )
         .subscribe({
-          next: (sites) => this.pushMarkers(sites),
+          next: (sites: Site[]) => this.pushMarkers(sites),
           error: () => this.pushMarkers([]),
         });
     }
@@ -57,8 +55,8 @@ export class SiteMapComponent extends withUnsubscribe() implements OnChanges {
   private getFilter(
     filters: Filters<ISite>,
     project: Project,
-    region?: Region
-  ) {
+    region?: Region,
+  ): Observable<Site[]> {
     return this.region
       ? this.sitesApi.filterByRegion(filters, project, region)
       : this.sitesApi.filter(filters, project);
@@ -67,14 +65,14 @@ export class SiteMapComponent extends withUnsubscribe() implements OnChanges {
   /**
    * Retrieve map markers from api
    */
-  private getMarkers(sites: Site[]) {
+  private getMarkers(sites: Site[]): Observable<Site[]> {
     const numPages = sites?.[0]?.getMetadata()?.paging?.maxPage || 1;
     const observables: Observable<Site[]>[] = [];
 
     // Can skip first page because initial filter produces the results
     for (let page = 2; page <= numPages; page++) {
       observables.push(
-        this.getFilter({ paging: { page } }, this.project, this.region)
+        this.getFilter({ paging: { page } }, this.project, this.region),
       );
     }
 
@@ -85,9 +83,9 @@ export class SiteMapComponent extends withUnsubscribe() implements OnChanges {
   /**
    * Push new sites to markers list
    */
-  private pushMarkers(sites: Site[]) {
+  private pushMarkers(sites: Site[]): void {
     this.markers = this.markers.concat(
-      sanitizeMapMarkers(sites.map((site) => site.getMapMarker()))
+      sanitizeMapMarkers(sites.map((site) => site.getMapMarker())),
     );
   }
 }

src/app/components/projects/projects.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { getRouteConfigForPage } from "@helpers/page/pageRouting";
-import { MapModule } from "@shared/map/map.module";
 import { SharedModule } from "@shared/shared.module";
 import { SiteCardComponent } from "./components/site-card/site-card.component";
 import { SiteMapComponent } from "./components/site-map/site-map.component";
@@ -30,7 +29,7 @@ const routes = projectsRoute.compileRoutes(getRouteConfigForPage);
 
 @NgModule({
   declarations: components,
-  imports: [MapModule, SharedModule, RouterModule.forChild(routes)],
+  imports: [SharedModule, RouterModule.forChild(routes)],
   exports: [RouterModule, ...components],
 })
 export class ProjectsModule {}

src/app/components/shared/formly/location-input.component.spec.ts

@@ -6,7 +6,6 @@ import {
   ReactiveFormsModule,
 } from "@angular/forms";
 import { GoogleMapsModule } from "@angular/google-maps";
-import { embedGoogleMaps } from "@helpers/embedScript/embedGoogleMaps";
 import { createHostFactory, SpectatorHost } from "@ngneat/spectator";
 import { FormlyBootstrapModule } from "@ngx-formly/bootstrap";
 import { FormlyFieldProps, FormlyModule } from "@ngx-formly/core";
@@ -62,8 +61,6 @@ describe("FormlyLocationInput", () => {
     return spectator;
   }
 
-  beforeAll(async () => await embedGoogleMaps());
-
   beforeEach(() => setup());
 
   const getLatitudeInput = () =>

src/app/components/shared/formly/location-input.component.ts

@@ -1,12 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { isInstantiated } from "@helpers/isInstantiated/isInstantiated";
 import { FieldType } from "@ngx-formly/core";
-import {
-  MapMarkerOptions,
-  sanitizeMapMarkers,
-} from "@shared/map/map.component";
+import { sanitizeMapMarkers } from "@shared/map/map.component";
 import { List } from "immutable";
 import { asFormControl } from "./helper";
+import { MapMarkerOptions } from "@services/maps/maps.service";
 
 /**
  * Location Input
@@ -131,7 +129,7 @@ export class LocationInputComponent extends FieldType implements OnInit {
             position: { lat: latitude, lng: longitude },
             label: `Position (${latitude},${longitude})`,
           }
-        : null
+        : null,
     );
   }
 

src/app/components/shared/map/map.component.html

@@ -0,0 +1,29 @@
+@if (hasMarkers && googleMapsLoaded) {
+<google-map
+  height="100%"
+  width="100%"
+  [options]="mapOptions"
+  (mapClick)="markerOptions?.draggable && newLocation.emit($event)"
+>
+  <map-marker
+    *ngFor="let marker of filteredMarkers"
+    [options]="markerOptions"
+    [position]="marker.position"
+    (mapDragend)="newLocation.emit($event)"
+  ></map-marker>
+  <map-info-window>{{ infoContent }}</map-info-window>
+</google-map>
+} @else {
+<div class="map-placeholder">
+  @if (googleMapsFailed) {
+  <p class="text-danger">Failure loading map</p>
+  <p class="error-hint">
+    Please ensure your ad-block is not blocking Google Maps
+  </p>
+  } @else if(!googleMapsLoaded) {
+  <baw-loading></baw-loading>
+  } @else if (!hasMarkers) {
+  <p>No locations specified</p>
+  }
+</div>
+}

src/app/components/shared/map/map.component.scss

@@ -1,8 +1,14 @@
 .map-placeholder {
-  border: 1px solid black;
   display: flex;
-  height: 100%;
-  min-height: 400px;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  border: 1px solid black;
+  height: 100%;
+  min-height: 400px;
+}
+
+.error-hint {
+  text-align: center;
 }

src/app/components/shared/map/map.component.spec.ts

@@ -1,20 +1,31 @@
 import { GoogleMapsModule } from "@angular/google-maps";
-import {
-  embedGoogleMaps,
-  destroyGoogleMaps,
-} from "@helpers/embedScript/embedGoogleMaps";
 import { Site } from "@models/Site";
-import { createComponentFactory, Spectator } from "@ngneat/spectator";
+import {
+  createComponentFactory,
+  Spectator,
+  SpyObject,
+} from "@ngneat/spectator";
 import { generateSite } from "@test/fakes/Site";
 import { List } from "immutable";
+import {
+  destroyGoogleMaps,
+  mockGoogleNamespace,
+} from "@test/helpers/googleMaps";
+import { modelData } from "@test/helpers/faker";
+import { MockConfigModule } from "@services/config/configMock.module";
+import { SharedModule } from "@shared/shared.module";
+import { LoadingComponent } from "@shared/loading/loading.component";
+import { MapMarkerOptions, MapsService } from "@services/maps/maps.service";
 import { MapComponent } from "./map.component";
 
 // Disabled because google maps bundle interferes with other tests
-xdescribe("MapComponent", () => {
+describe("MapComponent", () => {
   let spectator: Spectator<MapComponent>;
+  let mapsServiceSpy: SpyObject<MapsService>;
+
   const createComponent = createComponentFactory({
     component: MapComponent,
-    imports: [GoogleMapsModule],
+    imports: [GoogleMapsModule, MockConfigModule, SharedModule],
   });
 
   function getMap() {
@@ -29,62 +40,104 @@ xdescribe("MapComponent", () => {
     return spectator.queryAll<HTMLElement>("map-marker");
   }
 
-  beforeAll(async () => await embedGoogleMaps());
-  beforeEach(async () => (spectator = createComponent()));
-  afterAll(() => destroyGoogleMaps());
+  function getLoadingComponent(): LoadingComponent {
+    return spectator.query(LoadingComponent);
+  }
 
-  it("should create", () => {
-    spectator.setInput("markers", List([]));
-    spectator.detectChanges();
-    expect(spectator.component).toBeTruthy();
-  });
+  function placeholderElement() {
+    return spectator.query<HTMLDivElement>("div.map-placeholder");
+  }
 
-  it("should display placeholder", () => {
-    spectator.setInput("markers", List([]));
+  /** Causes all pending 'loadAsync' promises to resolve */
+  function triggerLoadSuccess(): void {
+    mapsServiceSpy["handleGoogleMapsLoaded"]();
     spectator.detectChanges();
-    const label = spectator
-      .query<HTMLDivElement>("div.map-placeholder")
-      .innerText.trim();
-    expect(label).toBe("No locations specified");
-  });
+  }
 
-  it("should display map", () => {
-    spectator.setInput(
-      "markers",
-      List([new Site(generateSite()).getMapMarker()])
-    );
+  /** Causes all pending 'loadAsync' promises to reject */
+  function triggerLoadFailure(): void {
+    mapsServiceSpy["handleGoogleMapsFailed"]();
     spectator.detectChanges();
+  }
 
-    expect(getMap()).toBeTruthy();
-  });
+  function setup(markers: MapMarkerOptions[] = []): void {
+    mockGoogleNamespace();
 
-  it("should have info window", () => {
-    spectator.setInput(
-      "markers",
-      List([new Site(generateSite()).getMapMarker()])
-    );
-    spectator.detectChanges();
+    spectator = createComponent({ detectChanges: false });
+    mapsServiceSpy = spectator.inject(MapsService);
+
+    // when ng-spectator's setInput is used it will call detectChanges, meaning
+    // that this will be the first change detection cycle
+    spectator.setInput("markers", List(markers));
+  }
 
-    expect(getMap()).toBeTruthy();
+  afterEach(() => {
+    destroyGoogleMaps();
+    MapsService["embeddedService"] = false;
   });
 
-  it("should display single site", () => {
-    spectator.setInput(
-      "markers",
-      List([new Site(generateSite()).getMapMarker()])
-    );
-    spectator.detectChanges();
+  it("should create", () => {
+    setup();
+    expect(spectator.component).toBeInstanceOf(MapComponent);
+  });
+
+  describe("loading/error messages", () => {
+    it("should display a placeholder when loading the google maps bundle", () => {
+      setup();
+      expect(getLoadingComponent()).toExist();
+    });
+
+    it("should display placeholder when there are no markers", () => {
+      const expectedText = "No locations specified";
+
+      setup();
+      triggerLoadSuccess();
+
+      expect(placeholderElement()).toHaveExactTrimmedText(expectedText);
+    });
+
+    it("should display an error if the google maps bundle fails to load", () => {
+      const expectedText =
+        "Failure loading map Please ensure your ad-block is not blocking Google Maps";
+
+      setup();
+      triggerLoadFailure();
 
-    expect(getInfoWindow()).toBeTruthy();
+      expect(placeholderElement()).toHaveExactTrimmedText(expectedText);
+    });
   });
 
-  it("should display multiple markers", () => {
-    const markers = List(
-      [1, 2, 3].map(() => new Site(generateSite()).getMapMarker())
-    );
-    spectator.setInput("markers", markers);
-    spectator.detectChanges();
+  describe("markers", () => {
+    it("should display map", () => {
+      const markers = [new Site(generateSite()).getMapMarker()];
+
+      setup(markers);
+      triggerLoadSuccess();
+
+      expect(getMap()).toBeTruthy();
+    });
+
+    it("should have info window", () => {
+      const markers = [new Site(generateSite()).getMapMarker()];
+      setup(markers);
+
+      expect(getMap()).toBeTruthy();
+    });
+
+    it("should display single site", () => {
+      const markers = [new Site(generateSite()).getMapMarker()];
+      setup(markers);
+
+      expect(getInfoWindow()).toBeTruthy();
+    });
+
+    it("should display multiple markers", () => {
+      const markers = modelData.randomArray(3, 3, () =>
+        new Site(generateSite()).getMapMarker(),
+      );
+      setup(markers);
 
-    expect(getMarker().length).toBe(3);
+      expect(getMarker().length).toBe(3);
+    });
   });
 });