Using this package with Angular 5 and Karma/PhantomJS gives error

[ddouras]

When testing a component that uses GooglePlaceModule I get below error:

        ReferenceError: Can't find variable: google in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 213542)
        isGoogleLibExists@http://localhost:9876/_karma_webpack_/vendor.bundle.js:213542:25
        initialize@http://localhost:9876/_karma_webpack_/vendor.bundle.js:213554:36

[skynet2]

Hi @ddouras ,

Can you provide an example of your component`s test? Do you use angular-cli ?

Thanks, Stas

[ddouras]

@skynet2 yes I use angular-cli

Here's a simple snippet of my spec file

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        GooglePlaceModule
      ],
      declarations: [
        MyComponent
      ],
      schemas: [NO_ERRORS_SCHEMA],]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

  });

  it('Should create component', () => {
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

I have also included below script to my index file. No sure if I am missing something. The screen works works perfectly fine with the auto complete, only issue I have is with karma.

<script src="https://maps.googleapis.com/maps/api/js?key={{MY_KEY}}&libraries=places&sensor=false&language=en"></script>

[skynet2]

Hi @ddouras ,

I found pretty similar issue https://github.com/angular-ui/angular-google-maps/issues/270

Looks like there few ways to resolve it, but the most suitable, I think will be to mock google object (last few messages from angular-ui discussion) https://github.com/ScottieR/angular-google-maps-mock

Thanks, Stas

[ddouras]

thanks @skynet2

I now get another error.

        TypeError: undefined is not a function (evaluating 'this.autocomplete.addListener('place_changed', function () {
                    _this.handleChangeEvent();
                })') in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 213559)

Do you think there is a way to mock the entire directive on my test?

[skynet2]

Hi @ddouras ,

I added an additional check in a directive, can you try the latest version? 2.0.1 Not very familiar with karma, unfortunately.

Thanks, Stas

[ddouras]

Unfortunately, still same issue, I guess this needs to be addressed as Karma is very commonly used with Angular 4/5

[skynet2]

Hi @ddouras ,

Yep, I`ll take a look at weekends.

Which mock lib you are using?

Thanks, Stas

[ddouras]

thanks @skynet2 , I use karma/jasmine/phantomJS for all tests/mocks, no specific mock library

[gitneeraj]

@ddouras @skynet2 I'm facing the same issue when testing with Karma/Jasmine in Angular 7 Error - ReferenceError: google is not defined

Is there any fix for this?

My Unit test import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { GooglePlaceModule } from "ngx-google-places-autocomplete"; import { RouterTestingModule } from '@angular/router/testing';

import { DefaultComponent } from './default.component';

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

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            FormsModule,
            GooglePlaceModule,
            RouterTestingModule
        ],
        declarations: [DefaultComponent]
    })
        .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(DefaultComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

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

});

I have included my google places api script tag in index.html

Any help much appreciated.

[gitneeraj]

Hey,

It worked for me this way -

All I did was followed the link https://github.com/ScottieR/angular-google-maps-mock

And copied the actual js content from 'https://maps.googleapis.com/maps/api/js?sensor=false' and put into a file inside tests/mocks/gogole.js

In src/karma.config.js files: [ '../tests/mocks/google.js' ]

That's it! Tests passed.

[akash-int]

Hi @gitneeraj I have tried your process but it's not working. Sometimes it's showing errors-

1. Error: Google maps library cannot be found karma
2. TypeError: google.maps.places.Autocomplete is not a constructor Any help much appreciated.

====== spec.ts file ======= import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AddCompanyComponent } from './add-company.component'; import { SharedModule } from 'src/app/shared/shared.module'; import { HttpClientModule } from '@angular/common/http'; import { RouterTestingModule } from '@angular/router/testing'; import { ToastrModule } from 'ngx-toastr';

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

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [AddCompanyComponent],
        imports: [SharedModule, HttpClientModule, RouterTestingModule, ToastrModule.forRoot()]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AddCompanyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    component.ngOnInit();
});

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

});

===== karma.config.js file ===== files: [ 'app/service/mocks/google.js', // <- Only added this ],