Issue
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();
});
});
Solution
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 By - Shy Agam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.