Angular GoogleMaps error when using it in test

Question

I'm using the Angular Material google maps component for integrating Maps in to an Ionic/Capacitor application.

https://github.com/angular/components/tree/master/src/google-maps

The map functionality works perfectly fine when I'm developing the application. When I try to run the test file for the component that implements the Google Map, I get this error:

Failed: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:202:1)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:441:49)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4029:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7964:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7330:1)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13902:1)
    at HomePage_Template (ng:///HomePage.js:79:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7303:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7112:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8373:1)

karma.conf.js (this was kinda a last ditch effort, no luck tho.):

config.set({
  ...
  plugins: [
    ...
    require('@angular/google-maps')
  ],
  ...
});

HTML:

<google-map>
    <map-rectangle
      *ngIf="showSelectionUI"
      [bounds]="bounds"
      [options]="options"
    ></map-rectangle>
    <map-marker
      #marker="mapMarker"
      *ngFor="let position of markerPositions"
      [position]="position"
     ></map-marker>
</google-map>

Typescript:

@ViewChild(GoogleMap) map: GoogleMap;

@ViewChild(MapRectangle) rectangle: MapRectangle;

And here's the entire spec file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { Storage } from '@ionic/storage';

import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { GoogleMapsModule, GoogleMap } from '@angular/google-maps';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        GoogleMapsModule,
        GooglePlaceModule
      ],
      providers: [
        {
          provide: Storage,
          useValue: {
            get: () => 'manual'
          }
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Shy Agam · Accepted Answer · 2021-03-22 00:16:16Z

3

I ran into the same problem when developing my library. Solution was to download the JavaScript API file from Google, save it into the workspace, then configure karma to load it before running the tests.

Take a look at my karma.conf file.

And here is the google-maps-api.js file

❕ Note that this means you might have to manually redownload and replace the file if Google releases any breaking changes. Probably not a big deal. Just something to keep in mind.

🎁 Another side note, have a look at my library @bespunky/angular-google-maps. In addition to the great features it offers, it also has a testing suite.

Cheers 🥂

answered Mar 22, 2021 at 0:16

Shy Agam

1,4551 gold badge18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

D.Hodges Over a year ago

Could you direct me to a project and the actual unit test where you're doing this? I'm having the same issue here: stackoverflow.com/questions/72842732/…

Gregor Over a year ago

@shy agam how did you fix the need for the google maps api key?

Shy Agam Over a year ago

Google Maps works without an API key. It just enters a limited development mode. For testing purposes I found it to be insignificant.

xinthose · Accepted Answer · 2021-01-22 05:48:27Z

0

I can at least show you how I do this using Angular Google Maps. I have an archived repository and website that used to use a Google map with a marker on it here.

app.module.ts

import { AgmCoreModule } from '@agm/core';

HTML Template of component

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng" [mapTypeId]="'hybrid'" style="height: 600px;">
    <agm-marker  [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>

Typescript Template of component

lat: number = 41.6600203;
lng: number = -88.7526228;
zoom: number = 15;

answered Jan 22, 2021 at 5:48

xinthose

3,9273 gold badges51 silver badges71 bronze badges

2 Comments

Don G. Over a year ago

So, the implementation of the map is fine. It’s only the test file where I get this error. I’m open to switching frameworks,but I’ve already moved from Cordova maps to angular/components google maps. So I’m hesitant to go through that process again if I’m missing one small thing for test setup.

featlorin Over a year ago

I recently move from agm/core to the native angular implementation of Google Maps, mainly because agm/core is not supported in Angular 10 and above.' I'm facing the same namespace issue, only in the unit test.

featlorin · Accepted Answer · 2021-02-09 21:17:50Z

0

I had a similar issue and after several days of being stuck on it, I decided that my unit test should not care about the map component itself so I mocked GoogleMap, MapInfoWinfow and MapMarker using ng-mocks.

In a way, that solved it for me.

answered Feb 9, 2021 at 21:17

featlorin

832 silver badges11 bronze badges

1 Comment

D.Hodges Over a year ago

Mind sharing how?

Collectives™ on Stack Overflow

Angular GoogleMaps error when using it in test

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related